Switch explorer to dark mode by default (#11360)

explorer/src/components/ClusterModal.tsx

@@ -92,7 +92,7 @@ function CustomClusterInput({ activeSuffix, active }: InputProps) {
       />
       <div className="input-group-prepend">
         <div className={`input-group-text pr-0 ${customClass("border")}`}>
-          <span className={customClass("text") || "text-dark"}>Custom:</span>
+          <span className={customClass("text") || ""}>Custom:</span>
         </div>
       </div>
     </Link>
@@ -105,7 +105,7 @@ function ClusterToggle() {
   let activeSuffix = "";
   switch (status) {
     case ClusterStatus.Connected:
-      activeSuffix = "success";
+      activeSuffix = "primary";
       break;
     case ClusterStatus.Connecting:
       activeSuffix = "warning";
@@ -132,7 +132,7 @@ function ClusterToggle() {
 
         const btnClass = active
           ? `border-${activeSuffix} text-${activeSuffix}`
-          : "btn-white text-dark";
+          : "btn-white";
 
         const clusterLocation = (location: Location) => {
           const params = new URLSearchParams(location.search);

explorer/src/components/ClusterStatusButton.tsx

@@ -41,7 +41,7 @@ function Button() {
   switch (status) {
     case ClusterStatus.Connected:
       return (
-        <span className={btnClasses("success")}>
+        <span className={btnClasses("primary")}>
           <span className="fe fe-check-circle mr-2"></span>
           {statusName}
         </span>

explorer/src/components/MessageBanner.tsx

@@ -63,7 +63,7 @@ export default function Banner() {
   }
 
   return (
-    <div className="bg-danger text-white">
+    <div className="bg-info">
       <div className="container">
         <div className="d-flex flex-column align-items-center justify-content-center text-center py-3">
           <h3 className="mb-0 line-height-md">

explorer/src/components/Navbar.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import Logo from "img/logos-solana/light-explorer-logo.svg";
+import Logo from "img/logos-solana/dark-explorer-logo.svg";
 import { clusterPath } from "utils/url";
 import { Link, NavLink } from "react-router-dom";
 import { ClusterStatusButton } from "components/ClusterStatusButton";

explorer/src/components/SearchBar.tsx

@@ -73,9 +73,7 @@ export function SearchBar() {
             onChange={onChange}
             onInputChange={onInputChange}
             components={{ DropdownIndicator }}
-            styles={{
-              control: (styles) => ({ ...styles, borderRadius: "7px" }),
-            }}
+            classNamePrefix="search-bar"
           />
         </div>
       </div>

explorer/src/components/TopAccountsCard.tsx

@@ -114,7 +114,7 @@ const renderAccountRow = (
   return (
     <tr key={index}>
       <td>
-        <span className="badge badge-soft-dark badge-pill">{index + 1}</span>
+        <span className="badge badge-soft-gray badge-pill">{index + 1}</span>
       </td>
       <td>
         <Address pubkey={account.address} link />

explorer/src/components/TransactionDetails.tsx

@@ -243,16 +243,16 @@ function AccountsCard({ signature }: Props) {
         <td>{lamportsToSolString(post)}</td>
         <td>
           {index === 0 && (
-            <span className="badge badge-soft-dark mr-1">Fee Payer</span>
+            <span className="badge badge-soft-info mr-1">Fee Payer</span>
           )}
           {!message.isAccountWritable(index) && (
-            <span className="badge badge-soft-dark mr-1">Readonly</span>
+            <span className="badge badge-soft-info mr-1">Readonly</span>
           )}
           {index < message.header.numRequiredSignatures && (
-            <span className="badge badge-soft-dark mr-1">Signer</span>
+            <span className="badge badge-soft-info mr-1">Signer</span>
           )}
           {message.instructions.find((ix) => ix.programIdIndex === index) && (
-            <span className="badge badge-soft-dark mr-1">Program</span>
+            <span className="badge badge-soft-info mr-1">Program</span>
           )}
         </td>
       </tr>

explorer/src/components/instruction/InstructionCard.tsx

@@ -34,7 +34,7 @@ export function InstructionCard({
 
         <button
           className={`btn btn-sm d-flex ${
-            showRaw ? "btn-dark active" : "btn-white"
+            showRaw ? "btn-black active" : "btn-white"
           }`}
           onClick={() => setShowRaw((r) => !r)}
         >

explorer/src/components/instruction/RawDetails.tsx

@@ -27,10 +27,10 @@ export function RawDetails({ ix }: { ix: TransactionInstruction }) {
           <td>
             <div className="mr-2 d-md-inline">Account #{keyIndex + 1}</div>
             {!isWritable && (
-              <span className="badge badge-soft-dark mr-1">Readonly</span>
+              <span className="badge badge-soft-info mr-1">Readonly</span>
             )}
             {isSigner && (
-              <span className="badge badge-soft-dark mr-1">Signer</span>
+              <span className="badge badge-soft-info mr-1">Signer</span>
             )}
           </td>
           <td className="text-lg-right">

explorer/src/index.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import ReactDOM from "react-dom";
 import { BrowserRouter as Router } from "react-router-dom";
-import "./scss/theme.scss";
+import "./scss/theme-dark.scss";
 import App from "./App";
 import * as serviceWorker from "./serviceWorker";
 import { ClusterProvider } from "./providers/cluster";

explorer/src/scss/_solana-dark-overrides.scss

@@ -0,0 +1,37 @@
+//
+// solana.scss
+// Use this to write your custom SCSS
+//
+
+code {
+  background-color: $black-dark;
+  color: $white;
+}
+
+.form-control {
+  border-color: $input-border-color;
+}
+
+.input-group .input-group-text {
+  border-color: $input-border-color;
+}
+
+.search-bar__control {
+  background-color: $gray-800-dark !important;
+  border-color: $card-outline-color !important;
+  box-shadow: $card-box-shadow !important;
+
+  .search-bar__input {
+    color: $white !important;
+  }
+}
+
+.search-bar__menu {
+  background-color: $gray-800-dark !important;
+  border-color: $card-outline-color !important;
+  box-shadow: $card-box-shadow !important;
+
+  .search-bar__option {
+    background-color: $gray-700-dark !important;
+  }
+}

explorer/src/scss/_solana-variables-dark.scss

@@ -0,0 +1,31 @@
+//
+// solana-variables.scss
+// Use this to overwrite Bootstrap and Dashkit variables
+//
+
+// Example of a variable override to change Dashkit's background color
+// Remove the "//" to comment it in and see it in action!
+$body-bg: #161b19 !default;
+
+$black: #232323;
+$white: #eee !default;
+$gray-600: #86b8b6;
+$gray-600-dark: #343a37 !default;
+$gray-700-dark: #282d2b !default;
+$gray-800-dark: #1e2423 !default;
+$black-dark: #141816 !default;
+
+$primary: #1dd79b !default;
+$success: #26e97e !default;
+$warning: #fa62fc !default;
+$card-border-color: $gray-700-dark !default;
+$card-outline-color: $black-dark !default;
+
+$input-bg: transparent !default;
+$input-border-color: $gray-600-dark !default;
+$input-group-addon-color: $white !default;
+
+$theme-colors: (
+  "black": $black,
+  "gray": $gray-600,
+);

explorer/src/scss/_solana-variables.scss

@@ -5,7 +5,7 @@
 
 // Example of a variable override to change Dashkit's background color
 // Remove the "//" to comment it in and see it in action!
-$body-bg: #f9fdfc;
+$body-bg: #f9fdfc !default;
 
 // Dashkit scss needs to know where img masks are stored
 $path-to-img: "../../img/dashkit" !default;
@@ -13,7 +13,7 @@ $path-to-fonts: "../../fonts" !default;
 
 // Colors
 
-$white: #ffffff;
+$white: #ffffff !default;
 $gray-100: #f9fdfc;
 $gray-200: #f1f8f6;
 $gray-300: #e5ebe9;
@@ -31,25 +31,25 @@ $rainbow-3: #79abd2;
 $rainbow-4: #38d0bd;
 $rainbow-5: #1dd79b;
 
-$primary: #358c70;
-$success: #42ba96;
-$primary-desat: #42ba96;
+$primary: #42ba96 !default;
+$primary-dark: #33a382 !default;
+$success: #19be56 !default;
 $secondary: $gray-700;
-$info: #b45be1;
-$info-muted: #9272a3;
-$warning: #d83aeb;
-$danger: #43b5c5;
+$danger: #b45be1;
+$warning: #d83aeb !default;
+$info: #43b5c5 !default;
 $light: $gray-100;
 $dark: $gray-900;
 
-$card-border-color: $gray-300;
-$text-info-muted: $info-muted;
-$navbar-light-active-color: $primary;
 $theme-colors: (
-  "primary-desat": $primary-desat,
   "black": $black,
-  "white": $white
-);
+  "gray": $gray-900,
+) !default;
+
+$card-border-color: $gray-300 !default;
+$input-group-addon-color: $gray-900 !default;
+$navbar-light-active-color: $primary-dark;
+$link-color: $primary-dark;
 
 // Global
 

explorer/src/scss/_solana.scss

@@ -163,3 +163,11 @@ h4.slot-pill {
     color: hsl(0,0%,40%);
   }
 }
+
+.search-bar__control {
+  border-radius: $border-radius !important;
+}
+
+.search-bar__menu {
+  border-radius: $border-radius !important;
+}

explorer/src/scss/theme-dark.scss

@@ -5,9 +5,15 @@
  * to ensure cascade of styles.
  */
 
+ // Icon font
+@import "../fonts/feather/feather";
+
 // Bootstrap functions
 @import '~bootstrap/scss/functions.scss';
 
+// Custom variables
+@import 'solana-variables-dark';
+
 // Custom variables
 @import 'solana-variables';
 
@@ -28,3 +34,6 @@
 
 // Custom core
 @import 'solana';
+
+// Dark mode overrides
+@import 'solana-dark-overrides';