From cad36e1b3ceacc6d879f3a7020624d39ed2fda71 Mon Sep 17 00:00:00 2001
From: Justin Starry <justin@solana.com>
Date: Tue, 4 Aug 2020 22:25:50 +0800
Subject: [PATCH] Switch explorer to dark mode by default (#11360)

---
 explorer/src/components/ClusterModal.tsx      |  6 +--
 .../src/components/ClusterStatusButton.tsx    |  2 +-
 explorer/src/components/MessageBanner.tsx     |  2 +-
 explorer/src/components/Navbar.tsx            |  2 +-
 explorer/src/components/SearchBar.tsx         |  4 +-
 explorer/src/components/TopAccountsCard.tsx   |  2 +-
 .../src/components/TransactionDetails.tsx     |  8 ++--
 .../instruction/InstructionCard.tsx           |  2 +-
 .../src/components/instruction/RawDetails.tsx |  4 +-
 .../img/logos-solana/dark-explorer-logo.svg   | 12 ++++++
 explorer/src/index.tsx                        |  2 +-
 explorer/src/scss/_solana-dark-overrides.scss | 37 +++++++++++++++++++
 explorer/src/scss/_solana-variables-dark.scss | 31 ++++++++++++++++
 explorer/src/scss/_solana-variables.scss      | 30 +++++++--------
 explorer/src/scss/_solana.scss                |  8 ++++
 explorer/src/scss/theme-dark.scss             |  9 +++++
 16 files changed, 128 insertions(+), 33 deletions(-)
 create mode 100644 explorer/src/img/logos-solana/dark-explorer-logo.svg
 create mode 100644 explorer/src/scss/_solana-dark-overrides.scss
 create mode 100644 explorer/src/scss/_solana-variables-dark.scss

diff --git a/explorer/src/components/ClusterModal.tsx b/explorer/src/components/ClusterModal.tsx
index 58fb77f247..74eef136c5 100644
--- a/explorer/src/components/ClusterModal.tsx
+++ b/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);
diff --git a/explorer/src/components/ClusterStatusButton.tsx b/explorer/src/components/ClusterStatusButton.tsx
index 9d460072ce..216cf315da 100644
--- a/explorer/src/components/ClusterStatusButton.tsx
+++ b/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>
diff --git a/explorer/src/components/MessageBanner.tsx b/explorer/src/components/MessageBanner.tsx
index 4580478d39..b27db59757 100644
--- a/explorer/src/components/MessageBanner.tsx
+++ b/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">
diff --git a/explorer/src/components/Navbar.tsx b/explorer/src/components/Navbar.tsx
index 116a9e7658..64eecb1ad2 100644
--- a/explorer/src/components/Navbar.tsx
+++ b/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";
diff --git a/explorer/src/components/SearchBar.tsx b/explorer/src/components/SearchBar.tsx
index 7c0720f213..89b7190fa3 100644
--- a/explorer/src/components/SearchBar.tsx
+++ b/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>
diff --git a/explorer/src/components/TopAccountsCard.tsx b/explorer/src/components/TopAccountsCard.tsx
index 1b69349407..a4093bb3ef 100644
--- a/explorer/src/components/TopAccountsCard.tsx
+++ b/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 />
diff --git a/explorer/src/components/TransactionDetails.tsx b/explorer/src/components/TransactionDetails.tsx
index c667bf4e1c..4a8c50f43e 100644
--- a/explorer/src/components/TransactionDetails.tsx
+++ b/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>
diff --git a/explorer/src/components/instruction/InstructionCard.tsx b/explorer/src/components/instruction/InstructionCard.tsx
index 4fe4b552ce..523b5743fe 100644
--- a/explorer/src/components/instruction/InstructionCard.tsx
+++ b/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)}
         >
diff --git a/explorer/src/components/instruction/RawDetails.tsx b/explorer/src/components/instruction/RawDetails.tsx
index 5abd92d47f..1eb41e6931 100644
--- a/explorer/src/components/instruction/RawDetails.tsx
+++ b/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">
diff --git a/explorer/src/img/logos-solana/dark-explorer-logo.svg b/explorer/src/img/logos-solana/dark-explorer-logo.svg
new file mode 100644
index 0000000000..a2128b4831
--- /dev/null
+++ b/explorer/src/img/logos-solana/dark-explorer-logo.svg
@@ -0,0 +1,12 @@
+<svg width="4476" height="513" viewBox="0 0 4476 513" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M1252 150C1252 146.134 1255.13 143 1259 143H1285.81C1289.68 143 1292.81 146.134 1292.81 150V315.38C1292.81 319.246 1295.95 322.38 1299.81 322.38H1458.19C1464.32 322.38 1467.49 329.698 1463.3 334.168L1443.03 355.788C1441.71 357.199 1439.86 358 1437.92 358H1292.81H1259C1255.13 358 1252 354.866 1252 351V150Z" fill="#FFFFFF"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M831.122 271.306H742.497C742.491 271.306 742.486 271.301 742.486 271.295C742.486 271.289 742.48 271.284 742.474 271.284C741.901 271.299 741.325 271.306 740.749 271.306C705.251 271.306 676.475 242.584 676.475 207.153C676.475 171.722 705.251 143 740.749 143C741.325 143 741.901 143.008 742.474 143.023C742.48 143.023 742.486 143.018 742.486 143.011C742.486 143.005 742.491 143 742.497 143H877.425C883.8 143 886.857 150.828 882.168 155.148L852.198 182.761C850.905 183.952 849.212 184.613 847.455 184.613H740.706C728.257 184.613 718.166 194.705 718.166 207.153C718.166 219.602 728.257 229.694 740.706 229.694H836.183C836.242 229.694 836.291 229.742 836.291 229.802C836.291 229.858 836.335 229.905 836.391 229.909C869.403 232.605 895.353 260.201 895.353 293.847C895.353 329.278 866.577 358 831.079 358C829.362 358 827.66 357.933 825.976 357.801C825.918 357.796 825.868 357.842 825.868 357.9C825.868 357.955 825.823 358 825.768 358H691.95C685.448 358 682.459 349.908 687.4 345.681L719.675 318.068C720.943 316.983 722.557 316.387 724.226 316.387H770.885H831.122C843.57 316.387 853.662 306.295 853.662 293.847C853.662 281.398 843.57 271.306 831.122 271.306Z" fill="#FFFFFF"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M1000.77 143C1000.75 143 1000.75 143.008 1000.75 143.019C1000.75 143.029 1000.74 143.037 1000.73 143.038C980.058 143.93 963.461 160.496 962.567 181.127C962.567 181.137 962.558 181.145 962.548 181.145C962.538 181.145 962.529 181.154 962.529 181.164V316.369C962.529 316.379 962.537 316.387 962.547 316.387C962.558 316.387 962.566 316.396 962.566 316.406C962.541 316.975 962.529 317.546 962.529 318.121C962.529 339.558 979.476 357.045 1000.73 357.962C1000.74 357.963 1000.75 357.971 1000.75 357.981C1000.75 357.992 1000.75 358 1000.77 358H1146.65C1146.66 358 1146.67 357.992 1146.67 357.981C1146.67 357.971 1146.67 357.963 1146.68 357.962C1167.94 357.045 1184.88 339.558 1184.88 318.121C1184.88 317.546 1184.87 316.975 1184.85 316.406C1184.85 316.396 1184.85 316.387 1184.86 316.387C1184.87 316.387 1184.88 316.379 1184.88 316.369V181.164C1184.88 181.154 1184.87 181.145 1184.86 181.145C1184.85 181.145 1184.84 181.137 1184.84 181.127C1183.95 160.496 1167.35 143.93 1146.68 143.038C1146.67 143.037 1146.67 143.029 1146.67 143.019C1146.67 143.008 1146.66 143 1146.65 143H1000.77ZM1028.12 181.145C1028.11 181.145 1028.11 181.15 1028.11 181.157C1028.11 181.163 1028.1 181.169 1028.09 181.169C1015.18 181.73 1004.8 192.151 1004.24 205.128C1004.24 205.135 1004.24 205.14 1004.23 205.14C1004.23 205.14 1004.22 205.145 1004.22 205.152V290.2C1004.22 290.206 1004.23 290.211 1004.23 290.211C1004.24 290.211 1004.24 290.217 1004.24 290.223C1004.23 290.581 1004.22 290.94 1004.22 291.302C1004.22 304.787 1014.81 315.786 1028.09 316.363C1028.1 316.364 1028.11 316.369 1028.11 316.375C1028.11 316.382 1028.11 316.387 1028.12 316.387H1119.29C1119.3 316.387 1119.31 316.382 1119.31 316.375C1119.31 316.369 1119.31 316.364 1119.32 316.363C1132.6 315.786 1143.19 304.787 1143.19 291.302C1143.19 290.94 1143.18 290.581 1143.17 290.223C1143.17 290.217 1143.17 290.211 1143.18 290.211C1143.19 290.211 1143.19 290.206 1143.19 290.2V205.152C1143.19 205.145 1143.19 205.14 1143.18 205.14C1143.17 205.14 1143.17 205.135 1143.17 205.128C1142.61 192.151 1132.24 181.73 1119.32 181.169C1119.31 181.169 1119.31 181.163 1119.31 181.157C1119.31 181.15 1119.3 181.145 1119.29 181.145H1028.12Z" fill="#FFFFFF"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M1582.69 201.952V236.565C1582.69 240.431 1585.83 243.565 1589.69 243.565H1714.66C1718.53 243.565 1721.66 240.431 1721.66 236.565V201.952C1721.66 188.545 1710.77 177.677 1697.34 177.677H1607.01C1593.58 177.677 1582.69 188.545 1582.69 201.952ZM1728.66 358C1724.8 358 1721.66 354.866 1721.66 351V281.774C1721.66 277.908 1718.53 274.774 1714.66 274.774H1589.69C1585.83 274.774 1582.69 277.908 1582.69 281.774V351C1582.69 354.866 1579.56 358 1575.69 358H1548C1544.13 358 1541 354.866 1541 351V184.631C1541 184.621 1541.01 184.613 1541.02 184.613C1541.03 184.613 1541.04 184.604 1541.04 184.594C1541.01 184.025 1541 183.454 1541 182.879C1541 160.854 1558.89 143 1580.95 143C1581.53 143 1582.1 143.012 1582.67 143.036C1582.68 143.037 1582.69 143.028 1582.69 143.018C1582.69 143.008 1582.7 143 1582.71 143H1725.12C1725.13 143 1725.14 143.008 1725.14 143.019C1725.14 143.029 1725.14 143.037 1725.15 143.038C1746.41 143.955 1763.35 161.442 1763.35 182.879C1763.35 183.454 1763.34 184.025 1763.32 184.594C1763.32 184.604 1763.32 184.613 1763.33 184.613C1763.34 184.613 1763.35 184.621 1763.35 184.631V351C1763.35 354.866 1760.22 358 1756.35 358H1728.66Z" fill="#FFFFFF"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M2162.69 201.952V236.565C2162.69 240.431 2165.83 243.565 2169.69 243.565H2294.66C2298.53 243.565 2301.66 240.431 2301.66 236.565V201.952C2301.66 188.545 2290.77 177.677 2277.34 177.677H2187.01C2173.58 177.677 2162.69 188.545 2162.69 201.952ZM2308.66 358C2304.8 358 2301.66 354.866 2301.66 351V281.774C2301.66 277.908 2298.53 274.774 2294.66 274.774H2169.69C2165.83 274.774 2162.69 277.908 2162.69 281.774V351C2162.69 354.866 2159.56 358 2155.69 358H2128C2124.13 358 2121 354.866 2121 351V184.631C2121 184.621 2121.01 184.613 2121.02 184.613C2121.03 184.613 2121.04 184.604 2121.04 184.594C2121.01 184.025 2121 183.454 2121 182.879C2121 160.854 2138.89 143 2160.95 143C2161.53 143 2162.1 143.012 2162.67 143.036C2162.68 143.037 2162.69 143.028 2162.69 143.018C2162.69 143.008 2162.7 143 2162.71 143H2305.12C2305.13 143 2305.14 143.008 2305.14 143.019C2305.14 143.029 2305.14 143.037 2305.15 143.038C2326.41 143.955 2343.35 161.442 2343.35 182.879C2343.35 183.454 2343.34 184.025 2343.32 184.594C2343.32 184.604 2343.32 184.613 2343.33 184.613C2343.34 184.613 2343.35 184.621 2343.35 184.631V351C2343.35 354.866 2340.22 358 2336.35 358H2308.66Z" fill="#FFFFFF"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M1874.79 145.458C1873.46 143.898 1871.51 143 1869.46 143H1838C1834.13 143 1831 146.134 1831 150V351C1831 354.866 1834.13 358 1838 358H1865.69C1869.56 358 1872.69 354.866 1872.69 351V217.143C1872.69 210.676 1880.71 207.668 1884.96 212.539L2011.6 357.567C2011.64 357.614 2011.66 357.675 2011.66 357.739C2011.66 357.883 2011.78 358 2011.92 358H2011.98H2046.35C2050.22 358 2053.35 354.866 2053.35 351V150C2053.35 146.134 2050.22 143 2046.35 143H2018.66C2014.8 143 2011.66 146.134 2011.66 150V286.962C2011.66 293.469 2003.56 296.455 1999.34 291.504L1874.79 145.458Z" fill="#FFFFFF"/>
+<path d="M513.394 159.135C510.876 161.654 507.46 163.069 503.898 163.069H167.455C155.564 163.069 149.541 148.754 157.854 140.252L213.04 83.8108C215.567 81.2269 219.028 79.7703 222.642 79.7703H560.339C572.303 79.7703 578.294 94.2349 569.835 102.695L513.394 159.135Z" fill="#1DD79B"/>
+<path d="M513.394 415.56C510.876 418.078 507.46 419.493 503.898 419.493H167.455C155.564 419.493 149.541 405.178 157.854 396.676L213.04 340.235C215.567 337.651 219.028 336.194 222.642 336.194H560.339C572.303 336.194 578.294 350.659 569.835 359.119L513.394 415.56Z" fill="#1DD79B"/>
+<path d="M513.394 211.865C510.876 209.347 507.46 207.932 503.898 207.932L167.455 207.932C155.564 207.932 149.541 222.247 157.854 230.749L213.04 287.19C215.567 289.774 219.028 291.23 222.642 291.23L560.339 291.23C572.303 291.23 578.294 276.766 569.835 268.306L513.394 211.865Z" fill="#1DD79B"/>
+<path d="M2583.9 305V195.608H2655.13V208.328H2597.57V243.467H2647.5V256.187H2597.57V292.28H2655.13V305H2583.9ZM2780.03 305L2747.43 261.911H2746.16L2713.57 305H2697.98L2738.85 250.145L2698.62 195.608H2714.84L2746.64 237.743H2747.91L2779.87 195.608H2795.61L2755.38 249.668L2796.09 305H2780.03ZM2845.98 195.608H2894C2902.8 195.608 2909.48 197.039 2914.03 199.901C2918.59 202.763 2921.61 206.632 2923.1 211.508C2924.58 216.384 2925.32 222.691 2925.32 230.429C2925.32 237.849 2924.58 244.05 2923.1 249.032C2921.61 253.908 2918.54 257.83 2913.88 260.798C2909.32 263.766 2902.59 265.25 2893.68 265.25H2859.66V305H2845.98V195.608ZM2889.07 252.53C2895.96 252.53 2901 251.841 2904.18 250.463C2907.36 248.979 2909.42 246.753 2910.38 243.785C2911.33 240.817 2911.81 236.365 2911.81 230.429C2911.81 224.493 2911.33 220.041 2910.38 217.073C2909.53 214.105 2907.52 211.932 2904.34 210.554C2901.26 209.07 2896.28 208.328 2889.39 208.328H2859.66V252.53H2889.07ZM2979.12 305V195.608H2992.79V291.803H3043.83V305H2979.12ZM3135.27 306.272C3120.75 306.272 3110.47 304.841 3104.43 301.979C3098.38 299.117 3094.52 294.135 3092.82 287.033C3091.23 279.825 3090.43 267.582 3090.43 250.304C3090.43 233.026 3091.23 220.836 3092.82 213.734C3094.52 206.526 3098.38 201.491 3104.43 198.629C3110.47 195.767 3120.75 194.336 3135.27 194.336C3149.69 194.336 3159.92 195.767 3165.96 198.629C3172.11 201.491 3175.98 206.526 3177.57 213.734C3179.26 220.836 3180.11 233.026 3180.11 250.304C3180.11 267.582 3179.26 279.825 3177.57 287.033C3175.98 294.135 3172.11 299.117 3165.96 301.979C3159.92 304.841 3149.69 306.272 3135.27 306.272ZM3135.27 293.552C3146.08 293.552 3153.4 292.863 3157.21 291.485C3161.03 290.107 3163.52 286.662 3164.69 281.15C3165.85 275.638 3166.44 265.356 3166.44 250.304C3166.44 235.252 3165.85 224.97 3164.69 219.458C3163.52 213.946 3161.03 210.501 3157.21 209.123C3153.4 207.745 3146.08 207.056 3135.27 207.056C3124.46 207.056 3117.09 207.745 3113.17 209.123C3109.36 210.501 3106.86 213.946 3105.7 219.458C3104.53 224.97 3103.95 235.252 3103.95 250.304C3103.95 265.356 3104.53 275.638 3105.7 281.15C3106.86 286.662 3109.36 290.107 3113.17 291.485C3117.09 292.863 3124.46 293.552 3135.27 293.552ZM3305.37 305L3288.35 262.07H3285.65H3251.31V305H3237.63V195.608H3287.88C3296.57 195.608 3303.14 196.986 3307.59 199.742C3312.04 202.498 3314.96 206.208 3316.34 210.872C3317.72 215.536 3318.4 221.525 3318.4 228.839C3318.4 236.365 3317.29 242.937 3315.07 248.555C3312.84 254.067 3308.28 257.83 3301.39 259.844L3319.99 305H3305.37ZM3282.15 249.35C3288.94 249.35 3293.92 248.661 3297.1 247.283C3300.38 245.799 3302.45 243.679 3303.3 240.923C3304.25 238.167 3304.73 234.139 3304.73 228.839C3304.73 223.433 3304.31 219.352 3303.46 216.596C3302.61 213.84 3300.65 211.773 3297.58 210.395C3294.61 209.017 3289.84 208.328 3283.27 208.328H3251.31V249.35H3282.15ZM3375.43 305V195.608H3446.66V208.328H3389.1V243.467H3439.03V256.187H3389.1V292.28H3446.66V305H3375.43ZM3568.54 305L3551.52 262.07H3548.82H3514.48V305H3500.8V195.608H3551.05C3559.74 195.608 3566.31 196.986 3570.76 199.742C3575.21 202.498 3578.13 206.208 3579.51 210.872C3580.89 215.536 3581.57 221.525 3581.57 228.839C3581.57 236.365 3580.46 242.937 3578.24 248.555C3576.01 254.067 3571.45 257.83 3564.56 259.844L3583.16 305H3568.54ZM3545.32 249.35C3552.11 249.35 3557.09 248.661 3560.27 247.283C3563.55 245.799 3565.62 243.679 3566.47 240.923C3567.42 238.167 3567.9 234.139 3567.9 228.839C3567.9 223.433 3567.48 219.352 3566.63 216.596C3565.78 213.84 3563.82 211.773 3560.75 210.395C3557.78 209.017 3553.01 208.328 3546.44 208.328H3514.48V249.35H3545.32ZM3725.63 328.85C3718.95 320.9 3714.07 314.328 3711 309.134C3708.03 304.046 3705.8 297.633 3704.32 289.895C3702.94 282.157 3702.25 271.451 3702.25 257.777C3702.25 244.103 3702.94 233.397 3704.32 225.659C3705.8 217.815 3708.08 211.296 3711.16 206.102C3714.23 200.908 3719.05 194.495 3725.63 186.863H3735.33C3729.71 194.177 3725.63 200.166 3723.08 204.83C3720.54 209.388 3718.52 215.748 3717.04 223.91C3715.56 231.966 3714.81 243.255 3714.81 257.777C3714.81 272.405 3715.56 283.8 3717.04 291.962C3718.52 300.124 3720.49 306.484 3722.92 311.042C3725.47 315.6 3729.6 321.536 3735.33 328.85H3725.63ZM3783.76 195.608H3834.64C3845.03 195.608 3852.45 197.94 3856.9 202.604C3861.46 207.268 3863.74 214.105 3863.74 223.115C3863.74 230.429 3862.25 236.259 3859.28 240.605C3856.32 244.845 3851.55 247.601 3844.97 248.873V249.509C3852.5 250.887 3857.69 253.802 3860.56 258.254C3863.42 262.706 3864.85 268.695 3864.85 276.221C3864.85 285.125 3862.62 292.174 3858.17 297.368C3853.83 302.456 3845.82 305 3834.16 305H3783.76V195.608ZM3830.19 243.308C3836.97 243.308 3841.95 241.877 3845.13 239.015C3848.42 236.153 3850.06 231.754 3850.06 225.818C3850.06 221.366 3849.48 217.921 3848.31 215.483C3847.15 213.045 3845.13 211.243 3842.27 210.077C3839.52 208.911 3835.49 208.328 3830.19 208.328H3797.43V243.308H3830.19ZM3830.82 292.28C3836.12 292.28 3840.2 291.697 3843.07 290.531C3846.03 289.365 3848.1 287.51 3849.27 284.966C3850.54 282.316 3851.18 278.712 3851.18 274.154C3851.18 267.582 3849.64 262.918 3846.56 260.162C3843.49 257.406 3838.24 256.028 3830.82 256.028H3797.43V292.28H3830.82ZM3921.56 305V195.608H3992.79V208.328H3935.23V243.467H3985.16V256.187H3935.23V292.28H3992.79V305H3921.56ZM4070.46 305V208.805H4035.8V195.608H4118.64V208.805H4084.14V305H4070.46ZM4231.96 305L4220.67 275.903H4171.38L4160.09 305H4146.26L4187.6 195.608H4204.77L4246.11 305H4231.96ZM4196.35 210.395H4195.55L4175.52 263.024H4216.38L4196.35 210.395ZM4283.09 328.85C4288.82 321.536 4292.9 315.6 4295.34 311.042C4297.88 306.484 4299.9 300.124 4301.38 291.962C4302.86 283.8 4303.61 272.405 4303.61 257.777C4303.61 243.255 4302.86 231.966 4301.38 223.91C4299.9 215.748 4297.88 209.388 4295.34 204.83C4292.79 200.166 4288.71 194.177 4283.09 186.863H4292.79C4299.37 194.495 4304.19 200.908 4307.26 206.102C4310.34 211.296 4312.56 217.815 4313.94 225.659C4315.42 233.397 4316.17 244.103 4316.17 257.777C4316.17 271.451 4315.42 282.157 4313.94 289.895C4312.56 297.633 4310.34 304.046 4307.26 309.134C4304.29 314.328 4299.47 320.9 4292.79 328.85H4283.09Z" fill="#EEE"/>
+</svg>
diff --git a/explorer/src/index.tsx b/explorer/src/index.tsx
index b4bb6b11e6..b786227253 100644
--- a/explorer/src/index.tsx
+++ b/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";
diff --git a/explorer/src/scss/_solana-dark-overrides.scss b/explorer/src/scss/_solana-dark-overrides.scss
new file mode 100644
index 0000000000..e753c78c2e
--- /dev/null
+++ b/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;
+  }
+}
diff --git a/explorer/src/scss/_solana-variables-dark.scss b/explorer/src/scss/_solana-variables-dark.scss
new file mode 100644
index 0000000000..abb88e7bee
--- /dev/null
+++ b/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,
+);
diff --git a/explorer/src/scss/_solana-variables.scss b/explorer/src/scss/_solana-variables.scss
index 2ea0d090d8..f3bdd5ed2a 100644
--- a/explorer/src/scss/_solana-variables.scss
+++ b/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
 
diff --git a/explorer/src/scss/_solana.scss b/explorer/src/scss/_solana.scss
index ae748b9c06..9ff0cdaec3 100644
--- a/explorer/src/scss/_solana.scss
+++ b/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;
+}
diff --git a/explorer/src/scss/theme-dark.scss b/explorer/src/scss/theme-dark.scss
index ae6958f4c9..c88aa18db2 100644
--- a/explorer/src/scss/theme-dark.scss
+++ b/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';