diff --git a/index.html b/index.html
index d6559be2f..0e52164c1 100644
--- a/index.html
+++ b/index.html
@@ -16,6 +16,8 @@
     <meta property="og:image:height" content="240" />
     <meta property="og:type" content="website" />
     <link rel="stylesheet" type="text/css" href="/typography.css" />
+    <link rel="stylesheet" type="text/css" href="/colors.css" />
+    <link rel="stylesheet" type="text/css" href="/elevations.css" />
     <link rel="stylesheet" type="text/css" href="/index.css" />
     <link rel="icon" href="/favicon.svg" type="image/svg+xml" />
     <link rel="icon" href="/favicon.ico" />
diff --git a/public/colors.css b/public/colors.css
new file mode 100644
index 000000000..fe14664eb
--- /dev/null
+++ b/public/colors.css
@@ -0,0 +1,119 @@
+:root {
+  --color-primary: #ff55ff;
+  --color-primary-1: #ff55ff09;
+  --color-primary-2: #ff55ff11;
+  --color-primary-3: #ff55ff22;
+  --color-primary-4: #ff55ff33;
+  --color-primary-5: #ff55ff77;
+  --color-primary-6: hsl(300, 100%, 90%);
+
+  --color-secondary: #5555ff;
+  --color-secondary-1: #5555ff09;
+  --color-secondary-2: #5555ff11;
+  --color-secondary-3: #5555ff22;
+  --color-secondary-4: #5555ff33;
+  --color-secondary-5: #5555ff77;
+  --color-secondary-6: hsl(240, 100%, 90%);
+
+  --color-tertiary: #55ffff;
+  --color-tertiary-1: #55ffff09;
+  --color-tertiary-2: #55ffff11;
+  --color-tertiary-3: #55ffff22;
+  --color-tertiary-4: #55ffff33;
+  --color-tertiary-5: #55ffff77;
+  --color-tertiary-6: #abf9f9;
+
+  --color-caution: #ffff99;
+  --color-caution-1: #ffff9909;
+  --color-caution-2: #ffff9911;
+  --color-caution-3: #ffff9922;
+  --color-caution-4: #ffff9933;
+  --color-caution-5: #ffff9977;
+  --color-caution-6: hsl(60, 100%, 90%);
+
+  --color-positive: #53db53;
+  --color-positive-1: #53db5309;
+  --color-positive-2: #53db5311;
+  --color-positive-3: #53db5322;
+  --color-positive-4: #53db5333;
+  --color-positive-5: #53db5377;
+  --color-positive-6: hsl(120, 100%, 90%);
+
+  --color-negative: #ff5555;
+  --color-negative-1: #ff555509;
+  --color-negative-2: #ff555511;
+  --color-negative-3: #ff555522;
+  --color-negative-4: #ff555533;
+  --color-negative-5: #ff555577;
+  --color-negative-6: hsl(0, 100%, 90%);
+
+  --color-foreground: #ffffff;
+  --color-foreground-1: #121a21;
+  --color-foreground-2: #181f28;
+  --color-foreground-3: #212832;
+  --color-foreground-4: #2b313d;
+  --color-foreground-5: #585c6f;
+  --color-foreground-6: #c2c3d4;
+
+  --color-background: #0b131a;
+}
+
+[data-theme="light"] {
+  --color-primary: #ff55ff;
+  --color-primary-1: #ff55ff30;
+  --color-primary-2: #ff55ff45;
+  --color-primary-3: #ff55ff60;
+  --color-primary-4: #ff55ff80;
+  --color-primary-5: #ff55ffaa;
+  --color-primary-6: hsl(300, 40%, 30%);
+
+  --color-secondary: #5555ff;
+  --color-secondary-1: #5555ff10;
+  --color-secondary-2: #5555ff20;
+  --color-secondary-3: #5555ff60;
+  --color-secondary-4: #5555ff80;
+  --color-secondary-5: #5555ffaa;
+  --color-secondary-6: hsl(240, 40%, 30%);
+
+  --color-tertiary: #2ed4c1;
+  --color-tertiary-1: #2ed4c120;
+  --color-tertiary-2: #2ed4c140;
+  --color-tertiary-3: #2ed4c160;
+  --color-tertiary-4: #2ed4c180;
+  --color-tertiary-5: #2ed4c1aa;
+  --color-tertiary-6: #005050;
+
+  --color-caution: hsl(60, 100%, 30%);
+  --color-caution-1: #d3d34d20;
+  --color-caution-2: #d3d34d40;
+  --color-caution-3: #d3d34d60;
+  --color-caution-4: #d3d34d80;
+  --color-caution-5: #d3d34daa;
+  --color-caution-6: hsl(60, 82%, 22%);
+
+  --color-positive: #53db53;
+  --color-positive-1: #53db5320;
+  --color-positive-2: #53db5340;
+  --color-positive-3: #53db5360;
+  --color-positive-4: #53db5380;
+  --color-positive-5: #53db53aa;
+  --color-positive-6: hsl(120, 40%, 30%);
+
+  --color-negative: #ff5555;
+  --color-negative-1: #ff555520;
+  --color-negative-2: #ff555540;
+  --color-negative-3: #ff555560;
+  --color-negative-4: #ff555580;
+  --color-negative-5: #ff5555aa;
+  --color-negative-6: hsl(0, 40%, 30%);
+
+  --color-foreground: #1a1a2c;
+  --color-foreground-1: #ebecf8;
+  --color-foreground-2: #e3e3f3;
+  --color-foreground-3: #d2d2e8;
+  --color-foreground-4: #9b9bc0;
+  --color-foreground-5: #6f6f8a;
+  --color-foreground-6: #42425a;
+
+  --color-background: #f3f6fd;
+}
diff --git a/public/elevations.css b/public/elevations.css
new file mode 100644
index 000000000..e7a3ab5f4
--- /dev/null
+++ b/public/elevations.css
@@ -0,0 +1,11 @@
+:root {
+  --elevation-low: 0px 16px 32px 32px #00000070;
+  --elevation-high: 0px 8px 64px var(--color-secondary-5);
+  --elevation-high-negative: 0px 8px 64px var(--color-negative-5);
+}
+
+[data-theme="light"] {
+  --elevation-low: 0px 16px 32px 16px #00000020;
+  --elevation-high: 0px 8px 64px var(--color-secondary-5);
+  --elevation-high-negative: 0px 8px 64px var(--color-negative-5);
+}
diff --git a/public/index.css b/public/index.css
index f6466295e..2d19d042f 100644
--- a/public/index.css
+++ b/public/index.css
@@ -4,74 +4,9 @@
 }
 
 :root {
-  --color-primary: #ff55ff;
-  --color-primary-1: #382847;
-  --color-primary-2: #62326d;
-  --color-primary-5: #dd44dd;
-  --color-primary-6: #ffd4ff;
-  --color-primary-faded: #ff55ff77;
-  --color-primary-background: #ff55ff11;
-  --color-primary-background-lighter: #ff55ff22;
-  --color-secondary: #5555ff;
-  --color-secondary-background: #5555ff11;
-  --color-secondary-background-darker: #5555ff09;
-  --color-secondary-faded: #5555ff77;
-  --color-secondary-darker: #4343cc;
-  --color-secondary-1: #212847;
-  --color-secondary-2: #2c326d;
-  --color-secondary-6: #e3e3ff;
-  --color-tertiary: #55ffff;
-  --color-tertiary-faded: #ade4e4;
-  --color-tertiary-background: #55ffff11;
-  --color-tertiary-1: #214047;
-  --color-tertiary-2: #2c326d;
-  --color-tertiary-6: #e3e3ff;
-  --color-light: #add0e4;
-  --color-yellow: #ffff99;
-  --color-yellow-background: #ffff9911;
-  --color-yellow-background-solid: #222929;
-  --color-yellow-background-lighter: #ffff9922;
-  --color-positive: #53db53;
-  --color-positive-background: #53db5311;
-  --color-positive-1: #11332b;
-  --color-positive-2: #2c6837;
-  --color-positive-6: #e3ffe3;
-  --color-caution: #ffc555;
-  --color-caution-1: #2f312d;
-  --color-caution-2: #524a34;
-  --color-caution-6: #ffefcf;
-  --color-negative: #ff5555;
-  --color-negative-background: #ff555511;
-  --color-negative-1: #35202b;
-  --color-negative-2: #623237;
-  --color-negative-6: #ffd4d4;
-  --color-foreground: #ffffff;
-  --color-foreground-90: #ddddee;
-  --color-foreground-80: #aaaab6;
-  --color-foreground-70: #9999aa;
-  --color-foreground-faded: #777788;
-  --color-foreground-subtle: #444455;
-  --color-foreground-subtler: #333344;
-  --color-foreground-even-subtler: #292936;
-  --color-foreground-background: #121a21;
-  --color-foreground-background-subtle: #10171e;
-  --color-foreground-background-lighter: #151f24;
-  --color-foreground-1: #242e38;
-  --color-foreground-2: #29343d;
-  --color-foreground-3: #333e47;
-  --color-foreground-4: #5e6d7a;
-  --color-foreground-5: #8594a1;
-  --color-foreground-6: #d3dee8;
-  --color-background: #0b131a;
-  --color-shadow: rgba(0, 0, 0, 0.2);
-  --color-glow: #5555ff22;
-  --color-glow-error: #ff555522;
-  --color-scrollbar: var(--color-foreground-subtler);
-
   --border-radius: 0.75rem;
   --border-radius-small: 0.5rem;
   --border-radius-round: 10rem;
-  --box-shadow-color: var(--color-secondary-2);
 
   --content-max-width: 1920px;
   --content-min-width: 480px;
@@ -81,6 +16,22 @@
   --button-regular-height: 2.5rem;
   --button-small-height: 2rem;
   --button-tiny-height: 1.5rem;
+
+  --glow: var(--color-secondary-3);
+  --glow-error: var(--color-negative-3);
+  --header-gradient: linear-gradient(
+    180deg,
+    var(--color-secondary-3) 0%,
+    transparent 100%
+  );
+}
+
+[data-theme="light"] {
+  --header-gradient: linear-gradient(
+    180deg,
+    var(--color-secondary-2) 0%,
+    transparent 100%
+  );
 }
 
 html {
@@ -95,12 +46,12 @@ body {
   height: 100%;
   margin: 0;
   padding: 0;
-  color: white;
+  color: var(--color-foreground);
   text-align: left;
   background-color: var(--color-background);
   scrollbar-width: thin;
   scrollbar-height: thin;
-  scrollbar-color: var(--color-scrollbar) transparent;
+  scrollbar-color: var(--color-foreground-4) transparent;
 }
 
 @media (max-width: 720px) {
@@ -135,7 +86,7 @@ body {
 }
 *:hover::-webkit-scrollbar-thumb,
 body::-webkit-scrollbar-thumb {
-  background-color: var(--color-scrollbar);
+  background-color: var(--color-foreground-4);
 }
 
 .error::selection,
@@ -153,9 +104,9 @@ a {
   text-decoration: none;
 }
 a.link {
-  color: #d0d0d0;
+  color: var(--color-foreground-6);
   text-decoration: none;
-  border-bottom: 1px dashed #444;
+  border-bottom: 1px dashed var(--color-foreground-5);
 }
 a.link:hover {
   color: var(--color-foreground);
@@ -163,11 +114,11 @@ a.link:hover {
 }
 a.link.primary {
   color: var(--color-primary);
-  border-bottom-color: var(--color-primary-faded);
+  border-bottom-color: var(--color-primary-5);
 }
 a.link.primary:hover {
-  color: var(--color-primary-faded);
-  border-bottom-color: var(--color-primary-faded);
+  color: var(--color-primary-5);
+  border-bottom-color: var(--color-primary-5);
 }
 a.address {
   border-bottom-color: transparent;
@@ -208,10 +159,9 @@ label.input {
 .error {
   color: var(--color-negative) !important;
   border-color: var(--color-negative) !important;
-  --box-shadow-color: var(--color-negative-2) !important;
 }
 .error-message {
-  background-color: var(--color-negative-background);
+  background-color: var(--color-negative-2);
   word-wrap: break-word;
   text-overflow: ellipsis;
   overflow-x: hidden;
@@ -223,11 +173,7 @@ label.input {
   color: var(--color-secondary);
 }
 .faded {
-  color: var(--color-foreground-faded);
-}
-.yellow {
-  color: var(--color-yellow);
-  background: var(--color-yellow-background-solid);
+  color: var(--color-foreground-5);
 }
 .off-centered {
   height: 100%;
diff --git a/public/typography.css b/public/typography.css
index 7bb984eb8..17b2dbde1 100644
--- a/public/typography.css
+++ b/public/typography.css
@@ -61,7 +61,7 @@ p {
 }
 
 .txt-missing {
-  color: var(--color-foreground-faded);
+  color: var(--color-foreground-5);
   font-style: italic;
 }
 
diff --git a/src/Address.svelte b/src/Address.svelte
index 21953deac..230188bf4 100644
--- a/src/Address.svelte
+++ b/src/Address.svelte
@@ -65,13 +65,13 @@
     height: 100%;
   }
   .address a {
-    color: var(--color-foreground-90);
+    color: var(--color-foreground-6);
   }
   .address a:hover {
     color: var(--color-foreground);
   }
   .highlight {
-    color: var(--color-foreground-90);
+    color: var(--color-foreground-6);
     font-weight: var(--font-weight-bold);
   }
   .wrapper {
diff --git a/src/App.svelte b/src/App.svelte
index 3742210b7..a5f428cb6 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -15,6 +15,7 @@
   import Loading from "@app/Loading.svelte";
   import Modal from "@app/Modal.svelte";
   import LinearGradient from "@app/LinearGradient.svelte";
+  import ColorPalette from "./ColorPalette.svelte";
 
   const loadConfig = getConfig().then(async cfg => {
     if ($state.connection === Connection.Connected) {
@@ -47,7 +48,7 @@
     height: 100%;
     display: flex;
     flex-direction: column;
-    background: linear-gradient(180deg, #181a38 0%, transparent 100%);
+    background: var(--header-gradient);
     background-repeat: no-repeat;
     background-size: 100% 6rem;
   }
@@ -80,6 +81,7 @@
       <Loading center />
     </div>
   {:then config}
+    <ColorPalette />
     <Header session={$session} {config} />
     <div class="wrapper">
       <Router>
diff --git a/src/Authorship.svelte b/src/Authorship.svelte
index 9f3e10c77..a5254cd4e 100644
--- a/src/Authorship.svelte
+++ b/src/Authorship.svelte
@@ -32,14 +32,14 @@
     padding: 0.125rem 0;
   }
   .caption {
-    color: var(--color-foreground-faded);
+    color: var(--color-foreground-5);
   }
   .highlight {
-    color: var(--color-foreground-90);
+    color: var(--color-foreground-6);
     font-weight: var(--font-weight-bold);
   }
   .date {
-    color: var(--color-foreground-80);
+    color: var(--color-foreground-6);
   }
 </style>
 
diff --git a/src/Avatar.svelte b/src/Avatar.svelte
index 5f704bec8..d0525c732 100644
--- a/src/Avatar.svelte
+++ b/src/Avatar.svelte
@@ -6,7 +6,6 @@
   export let source: string;
   export let inline = false;
   export let grayscale = false;
-  export let glowOnHover = false;
 
   function handleMissingFile() {
     console.warn("Not able to locate", source);
@@ -41,9 +40,6 @@
     background-size: cover;
     background-repeat: no-repeat;
   }
-  .avatar.glowOnHover:hover {
-    box-shadow: 0 0 3rem var(--color-secondary);
-  }
   .grayscale {
     filter: grayscale();
   }
@@ -62,5 +58,4 @@
   class="avatar"
   on:error={handleMissingFile}
   class:inline
-  class:grayscale
-  class:glowOnHover />
+  class:grayscale />
diff --git a/src/Badge.svelte b/src/Badge.svelte
index 03256be2f..ea0cad990 100644
--- a/src/Badge.svelte
+++ b/src/Badge.svelte
@@ -18,28 +18,29 @@
     display: flex;
   }
   .foreground {
-    color: var(--color-foreground-faded);
-    background: var(--color-foreground-background);
+    color: var(--color-foreground-6);
+    background: var(--color-foreground-2);
   }
   .positive {
-    color: var(--color-positive);
-    background-color: var(--color-positive-1);
+    color: var(--color-positive-6);
+    background-color: var(--color-positive-3);
   }
   .negative {
     color: var(--color-negative);
-    background-color: var(--color-negative-1);
+    background-color: var(--color-negative-4);
   }
   .primary {
     color: var(--color-primary);
-    background: var(--color-primary-background);
+    background: linear-gradient(var(--color-primary-3), var(--color-primary-3)),
+      linear-gradient(var(--color-background), var(--color-background));
   }
   .tertiary {
-    color: var(--color-tertiary);
-    background: var(--color-tertiary-background);
+    color: var(--color-tertiary-6);
+    background: var(--color-tertiary-1);
   }
   .caution {
-    color: var(--color-yellow);
-    background: var(--color-yellow-background);
+    color: var(--color-caution);
+    background: var(--color-caution-2);
   }
 </style>
 
diff --git a/src/BlockTimer.svelte b/src/BlockTimer.svelte
index 195a192ad..dc6851ebd 100644
--- a/src/BlockTimer.svelte
+++ b/src/BlockTimer.svelte
@@ -18,7 +18,7 @@
     height: 0.5rem;
     width: 100%;
     border-radius: var(--border-radius-small);
-    background-color: var(--color-secondary-background);
+    background-color: var(--color-secondary-2);
   }
   .loader {
     height: 0.5rem;
diff --git a/src/Button.svelte b/src/Button.svelte
index 1fd920c1e..2652b6c0d 100644
--- a/src/Button.svelte
+++ b/src/Button.svelte
@@ -17,7 +17,7 @@
   button {
     background: transparent;
     border-radius: var(--border-radius-round);
-    border: 1px solid var(--color-foreground-6);
+    border: 1px solid var(--color-foreground);
     cursor: pointer;
     font-family: var(--font-family-sans-serif);
     font-feature-settings: "ss01", "ss02", "cv01", "cv03";
@@ -34,11 +34,11 @@
     color: var(--color-background);
   }
   .foreground {
-    color: var(--color-foreground-6);
+    color: var(--color-foreground);
   }
   .foreground[disabled] {
-    color: var(--color-foreground-faded);
-    border-color: var(--color-foreground-faded);
+    color: var(--color-foreground-5);
+    border-color: var(--color-foreground-5);
   }
   .foreground:not([disabled]):hover {
     background-color: var(--color-foreground);
@@ -49,8 +49,8 @@
     border-color: var(--color-primary);
   }
   .primary[disabled] {
-    color: var(--color-primary-faded);
-    border-color: var(--color-primary-faded);
+    color: var(--color-primary-5);
+    border-color: var(--color-primary-5);
   }
   .primary:not([disabled]):hover {
     background-color: var(--color-primary);
@@ -61,8 +61,8 @@
     border-color: var(--color-secondary);
   }
   .secondary[disabled] {
-    color: var(--color-secondary-faded);
-    border-color: var(--color-secondary-faded);
+    color: var(--color-secondary-5);
+    border-color: var(--color-secondary-5);
   }
   .secondary:not([disabled]):hover {
     background-color: var(--color-secondary);
@@ -73,19 +73,19 @@
     border-color: var(--color-negative);
   }
   .negative[disabled] {
-    color: var(--color-negative-faded);
-    border-color: var(--color-negative-faded);
+    color: var(--color-negative-5);
+    border-color: var(--color-negative-5);
   }
   .negative:not([disabled]):hover {
     background-color: var(--color-negative);
   }
 
   .text {
-    color: var(--color-foreground-6);
+    color: var(--color-foreground);
     border: none;
   }
   .text[disabled] {
-    color: var(--color-foreground-4);
+    color: var(--color-foreground-5);
   }
   .text:not([disabled]):hover {
     background-color: var(--color-foreground);
diff --git a/src/Clipboard.svelte b/src/Clipboard.svelte
index a850a18a1..6e0ab9490 100644
--- a/src/Clipboard.svelte
+++ b/src/Clipboard.svelte
@@ -28,10 +28,10 @@
     height: 1.5rem;
   }
   .clipboard:hover :global(svg) {
-    fill: var(--color-foreground-90);
+    fill: var(--color-foreground);
   }
   .clipboard:active :global(svg) {
-    fill: var(--color-positive);
+    fill: var(--color-foreground-6);
   }
   .clipboard:hover {
     border-radius: var(--border-radius);
diff --git a/src/ColorPalette.svelte b/src/ColorPalette.svelte
new file mode 100644
index 000000000..885ee6042
--- /dev/null
+++ b/src/ColorPalette.svelte
@@ -0,0 +1,189 @@
+<script lang="ts">
+  function extractCssVariables(variableName: string) {
+    return Array.from(document.styleSheets)
+      .filter(
+        sheet =>
+          sheet.href === null || sheet.href.startsWith(window.location.origin),
+      )
+      .reduce<string[]>(
+        (acc, sheet) =>
+          (acc = [
+            ...acc,
+            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+            // @ts-ignore
+            ...Array.from(sheet.cssRules).reduce(
+              (def, rule) =>
+                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                // @ts-ignore
+                (def =
+                  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                  // @ts-ignore
+                  rule.selectorText === ":root"
+                    ? [
+                        ...def,
+                        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                        // @ts-ignore
+                        ...Array.from(rule.style).filter(name =>
+                          // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                          // @ts-ignore
+                          name.startsWith(variableName),
+                        ),
+                      ]
+                    : def),
+              [],
+            ),
+          ]),
+        [],
+      );
+  }
+
+  // rg "\--color-\w*(-\d)*" -o --no-line-number --no-filename -g "\!public/colors.css" -g "\!src/ColorPalette.svelte" | sort | uniq | jq -sRM 'split("\n")[:-1]'
+  const usedColors = [
+    "--color-background",
+    "--color-caution",
+    "--color-caution-2",
+    "--color-caution-3",
+    "--color-caution-6",
+    "--color-foreground",
+    "--color-foreground-1",
+    "--color-foreground-2",
+    "--color-foreground-3",
+    "--color-foreground-4",
+    "--color-foreground-5",
+    "--color-foreground-6",
+    "--color-negative",
+    "--color-negative-1",
+    "--color-negative-2",
+    "--color-negative-3",
+    "--color-negative-4",
+    "--color-negative-5",
+    "--color-negative-6",
+    "--color-positive",
+    "--color-positive-1",
+    "--color-positive-2",
+    "--color-positive-3",
+    "--color-positive-6",
+    "--color-primary",
+    "--color-primary-3",
+    "--color-primary-5",
+    "--color-secondary",
+    "--color-secondary-1",
+    "--color-secondary-2",
+    "--color-secondary-3",
+    "--color-secondary-5",
+    "--color-secondary-6",
+    "--color-tertiary",
+    "--color-tertiary-1",
+    "--color-tertiary-2",
+    "--color-tertiary-6",
+  ];
+
+  const colors = extractCssVariables("--color");
+  const colorGroups = [
+    ...new Set(
+      colors.map(color => {
+        const match = color.match(/--color-(\w*)-?/);
+        if (match) {
+          return match[1];
+        } else {
+          return "";
+        }
+      }),
+    ),
+  ];
+
+  let show = false;
+  let checkers = false;
+
+  const onKeydown = (event: KeyboardEvent) => {
+    const hasInputTarget =
+      event.target &&
+      ((event.target as HTMLInputElement).type === "text" ||
+        (event.target as HTMLTextAreaElement).type === "textarea");
+
+    if (
+      hasInputTarget ||
+      event.repeat ||
+      event.altKey ||
+      event.metaKey ||
+      event.ctrlKey
+    ) {
+      return false;
+    }
+
+    if (event.key === "d") {
+      show = !show;
+    }
+  };
+
+  function clickOutside(ev: MouseEvent) {
+    if (thisComponent && !thisComponent.contains(ev.target as HTMLDivElement)) {
+      show = !show;
+    }
+  }
+
+  let thisComponent: HTMLDivElement;
+</script>
+
+<style>
+  .container {
+    position: fixed;
+    background: var(--color-background);
+    padding: 2rem;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    box-shadow: var(--elevation-low);
+    border-radius: 1rem;
+    z-index: 100;
+    min-width: 46rem;
+  }
+
+  .checkers {
+    background: repeating-conic-gradient(#88888833 0% 25%, transparent 0% 50%)
+      50% / 20px 20px;
+    border-radius: 1rem;
+  }
+
+  .color {
+    width: 4rem;
+    height: 4rem;
+    border-radius: 0.5rem;
+    outline-style: solid !important;
+    outline-color: #88888899 !important;
+    outline-offset: 0.5rem;
+    margin: 1rem;
+  }
+
+  .unused {
+    outline-style: dotted !important;
+    outline-color: #55555555 !important;
+  }
+</style>
+
+<svelte:window on:keydown={onKeydown} on:click={clickOutside} />
+
+{#if show}
+  <div
+    bind:this={thisComponent}
+    class="container"
+    on:click={() => (checkers = !checkers)}>
+    <div class:checkers>
+      {#each colorGroups as colorGroup}
+        <div>
+          {#each colors.filter(color => {
+            return color.match(`--color-${colorGroup}`);
+          }) as color}
+            <div style="display: inline-flex;">
+              <div
+                class:unused={!usedColors.includes(color)}
+                title={color}
+                class="color"
+                style={`background-color: var(${color});`} />
+            </div>
+          {/each}
+        </div>
+      {/each}
+    </div>
+  </div>
+{/if}
diff --git a/src/Comment.svelte b/src/Comment.svelte
index 67080c7eb..d97fc763c 100644
--- a/src/Comment.svelte
+++ b/src/Comment.svelte
@@ -56,7 +56,7 @@
   }
   .card {
     flex: 1;
-    border: 1px solid var(--color-foreground-3);
+    border: 1px solid var(--color-foreground-4);
     border-radius: var(--border-radius);
   }
   .card-header {
diff --git a/src/Dropdown.svelte b/src/Dropdown.svelte
index ef869b03f..854f38073 100644
--- a/src/Dropdown.svelte
+++ b/src/Dropdown.svelte
@@ -18,11 +18,11 @@
 
 <style>
   .dropdown {
-    background-color: var(--color-foreground-background);
+    background-color: var(--color-foreground-1);
     margin-top: 0.5rem;
     padding: 0.5rem 0;
     position: absolute;
-    box-shadow: 16px 16px 32px 32px var(--color-shadow);
+    box-shadow: var(--elevation-low);
     z-index: 10;
     border-radius: var(--border-radius-small);
   }
@@ -37,7 +37,7 @@
   }
   .dropdown-item:hover,
   .selected {
-    background-color: var(--color-foreground-background-lighter);
+    background-color: var(--color-foreground-2);
   }
   @media (max-width: 720px) {
     .dropdown {
diff --git a/src/Header.svelte b/src/Header.svelte
index 20d2a6a2f..9b148d0ed 100644
--- a/src/Header.svelte
+++ b/src/Header.svelte
@@ -16,6 +16,7 @@
   import MobileNavbar from "./MobileNavbar.svelte";
   import SeedDropdown from "./SeedDropdown.svelte";
   import Button from "@app/Button.svelte";
+  import ThemeToggle from "./ThemeToggle.svelte";
 
   export let session: Session | null;
   export let config: Config;
@@ -40,22 +41,22 @@
     padding: 1.5rem;
     height: 5.5rem;
   }
-  header .left,
-  header .right {
+  .left,
+  .right {
     display: flex;
     align-items: center;
     height: var(--button-regular-height);
+    gap: 1rem;
   }
-  header .nav {
+  .nav {
     display: inline-block;
     height: 100%;
     margin-left: 1.5rem;
     white-space: nowrap;
   }
-  header .nav .seeds-container {
+  .nav .seeds-container {
     display: inline-block;
   }
-
   .logo {
     display: flex;
     height: var(--button-regular-height);
@@ -78,27 +79,25 @@
   .search {
     height: var(--button-regular-height);
     width: 16rem;
-    margin-left: 1.5rem;
+    margin-left: 0.5rem;
     display: inline-block;
   }
   .connect {
     display: inline-block;
-    margin-left: 2rem;
   }
   .network {
-    color: var(--color-tertiary);
-    background-color: var(--color-tertiary-background);
+    color: var(--color-tertiary-6);
+    background-color: var(--color-tertiary-1);
     line-height: 1.5em;
     padding: 0rem 1rem;
     height: var(--button-regular-height);
     display: flex;
     align-items: center;
     border-radius: var(--border-radius-round);
-    margin-left: 2rem;
   }
   .network.unavailable {
-    color: #888;
-    background-color: #ffffff11;
+    color: var(--color-foreground-5);
+    background-color: var(--color-foreground-3);
   }
   .network:last-child {
     margin-right: 0;
@@ -108,13 +107,12 @@
     padding: 0.5rem 0.5rem;
     cursor: pointer;
     user-select: none;
-    color: var(--color-foreground-6);
+    color: var(--color-foreground);
   }
   .register:hover {
     color: var(--color-foreground);
   }
   .balance {
-    margin: 0 2rem;
     white-space: nowrap;
   }
 
@@ -122,9 +120,13 @@
     display: none;
   }
   @media (max-width: 720px) {
+    header .right {
+      gap: 1rem;
+    }
     .network,
     .search,
     header .nav,
+    .register,
     .balance {
       display: none;
     }
@@ -132,7 +134,6 @@
       display: flex;
       justify-content: center;
       align-items: center;
-      margin-left: 10px;
       height: 42px;
       width: 42px;
       z-index: 2;
@@ -178,7 +179,6 @@
   </div>
 
   <div class="right">
-    <a use:link class="register" href="/registrations">Register</a>
     {#if config && config.network.name === "rinkeby"}
       <span class="network">Rinkeby</span>
     {:else if config && config.network.name === "homestead"}
@@ -186,6 +186,7 @@
     {:else}
       <span class="network unavailable">No Network</span>
     {/if}
+    <a use:link class="register" href="/registrations">Register</a>
 
     {#if address}
       <span class="balance">
@@ -223,6 +224,7 @@
         <Connect buttonVariant="foreground" {config} />
       </span>
     {/if}
+    <ThemeToggle />
     <div class="toggle" on:click={toggleNavbar}>
       <span style="transform: scale(1.2);">
         <Icon name="ellipsis" />
diff --git a/src/Icon.svelte b/src/Icon.svelte
index f13e4953e..2c01e4442 100644
--- a/src/Icon.svelte
+++ b/src/Icon.svelte
@@ -8,6 +8,8 @@
     | "ellipsis"
     | "fork"
     | "github"
+    | "moon"
+    | "sun"
     | "twitter"
     | "url";
 </script>
@@ -122,6 +124,28 @@
     13.9693 16.5706 13.9693 17.339C13.9693 18.4368 13.9593 19.3186 13.9593
     19.5852C13.9593 19.8006 14.0993 20.0569 14.5093 19.9749C17.71 18.8989 20
     15.8227 20 12.2031C20 7.67295 16.418 4 12 4" />
+  {:else if name === "moon"}
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M15.75 1.5C16.1642 1.5
+    16.5 1.83579 16.5 2.25V3H17.25C17.6642 3 18 3.33579 18 3.75C18 4.16421
+    17.6642 4.5 17.25 4.5H16.5V5.25C16.5 5.66421 16.1642 6 15.75 6C15.3358 6 15
+    5.66421 15 5.25V4.5H14.25C13.8358 4.5 13.5 4.16421 13.5 3.75C13.5 3.33579
+    13.8358 3 14.25 3H15V2.25C15 1.83579 15.3358 1.5 15.75 1.5ZM10.2246
+    3.15456C10.4159 3.34623 10.489 3.62613 10.4159 3.88688C9.65641 6.59529
+    10.4385 9.58344 12.4276 11.5724C14.4166 13.5615 17.4047 14.3436 20.1131
+    13.5841C20.3739 13.511 20.6538 13.5841 20.8454 13.7754C21.0371 13.9667
+    21.1108 14.2465 21.0382 14.5074C19.1394 21.3293 10.2649 23.5102 5.37735
+    18.6226C0.393755 13.639 2.70287 4.85168 9.49264 2.96184C9.75353 2.88923
+    10.0333 2.96289 10.2246 3.15456ZM8.69851 4.84862C3.95753 7.06376 2.57424
+    13.6982 6.43801 17.562C10.2273 21.3512 16.9232 20.041 19.1499
+    15.3017C16.3194 15.6466 13.4079 14.6741 11.3669 12.6331C9.32556 10.5918
+    8.35305 7.67963 8.69851 4.84862ZM20.25 5.25C20.6642 5.25 21 5.58579 21
+    6V7.5H22.5C22.9142 7.5 23.25 7.83579 23.25 8.25C23.25 8.66421 22.9142 9
+    22.5 9H21V10.5C21 10.9142 20.6642 11.25 20.25 11.25C19.8358 11.25 19.5
+    10.9142 19.5 10.5V9H18C17.5858 9 17.25 8.66421 17.25 8.25C17.25 7.83579
+    17.5858 7.5 18 7.5H19.5V6C19.5 5.58579 19.8358 5.25 20.25 5.25Z" />
   {:else if name === "url"}
     <path
       d="M18.7566 11.2493L15.7531 14.2518C14.0953 15.9107 11.4059 15.9107
@@ -141,6 +165,40 @@
     12.7506C3.58542 14.4094 3.58542 17.0978 5.24374 18.7566C6.90207 20.4145
     9.59097 20.4145 11.2493 18.7566L13.5251 16.4809C12.6158 16.6146 11.6822
     16.5234 10.8164 16.1865Z" />
+  {:else if name === "sun"}
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M12 0.75C12.4142 0.75
+    12.75 1.08579 12.75 1.5V3.375C12.75 3.78921 12.4142 4.125 12 4.125C11.5858
+    4.125 11.25 3.78921 11.25 3.375V1.5C11.25 1.08579 11.5858 0.75 12
+    0.75ZM4.04467 4.04467C4.33756 3.75178 4.81244 3.75178 5.10533
+    4.04467L6.42721 5.36655C6.7201 5.65944 6.7201 6.13431 6.42721
+    6.42721C6.13431 6.7201 5.65944 6.7201 5.36655 6.42721L4.04467
+    5.10533C3.75178 4.81244 3.75178 4.33756 4.04467 4.04467ZM19.9553
+    4.04467C20.2482 4.33756 20.2482 4.81244 19.9553 5.10533L18.6335
+    6.42721C18.3406 6.7201 17.8657 6.7201 17.5728 6.42721C17.2799 6.13431
+    17.2799 5.65944 17.5728 5.36655L18.8947 4.04467C19.1876 3.75178 19.6624
+    3.75178 19.9553 4.04467ZM12 7.125C9.30761 7.125 7.125 9.30761 7.125
+    12C7.125 14.6924 9.30761 16.875 12 16.875C14.6924 16.875 16.875 14.6924
+    16.875 12C16.875 9.30761 14.6924 7.125 12 7.125ZM5.625 12C5.625 8.47918
+    8.47918 5.625 12 5.625C15.5208 5.625 18.375 8.47918 18.375 12C18.375
+    15.5208 15.5208 18.375 12 18.375C8.47918 18.375 5.625 15.5208 5.625
+    12ZM0.75 12C0.75 11.5858 1.08579 11.25 1.5 11.25H3.375C3.78921 11.25 4.125
+    11.5858 4.125 12C4.125 12.4142 3.78921 12.75 3.375 12.75H1.5C1.08579 12.75
+    0.75 12.4142 0.75 12ZM19.875 12C19.875 11.5858 20.2108 11.25 20.625
+    11.25H22.5C22.9142 11.25 23.25 11.5858 23.25 12C23.25 12.4142 22.9142 12.75
+    22.5 12.75H20.625C20.2108 12.75 19.875 12.4142 19.875 12ZM6.42721
+    17.5728C6.7201 17.8657 6.7201 18.3406 6.42721 18.6335L5.10533
+    19.9553C4.81244 20.2482 4.33756 20.2482 4.04467 19.9553C3.75178 19.6624
+    3.75178 19.1876 4.04467 18.8947L5.36655 17.5728C5.65944 17.2799 6.13431
+    17.2799 6.42721 17.5728ZM17.5728 17.5728C17.8657 17.2799 18.3406 17.2799
+    18.6335 17.5728L19.9553 18.8947C20.2482 19.1876 20.2482 19.6624 19.9553
+    19.9553C19.6624 20.2482 19.1876 20.2482 18.8947 19.9553L17.5728
+    18.6335C17.2799 18.3406 17.2799 17.8657 17.5728 17.5728ZM12 19.875C12.4142
+    19.875 12.75 20.2108 12.75 20.625V22.5C12.75 22.9142 12.4142 23.25 12
+    23.25C11.5858 23.25 11.25 22.9142 11.25 22.5V20.625C11.25 20.2108 11.5858
+    19.875 12 19.875Z" />
   {:else if name === "twitter"}
     <path
       d="M19.9687 7.54849C19.3697 7.81214 18.7351 7.98617 18.0853
diff --git a/src/Input.svelte b/src/Input.svelte
index d19f7bd08..ebab8285e 100644
--- a/src/Input.svelte
+++ b/src/Input.svelte
@@ -5,11 +5,10 @@
   export let name: string;
   export let value: string;
   export let small = false;
-  export let clipboard = false;
 </script>
 
 <style>
-  main {
+  .wrapper {
     display: flex;
     align-items: center;
   }
@@ -22,6 +21,9 @@
     -webkit-mask: linear-gradient(90deg, transparent 0%, #fff 50%);
     mask: linear-gradient(90deg, transparent 0%, #fff 50%);
     border-radius: 0 var(--border-radius-small) var(--border-radius-small) 0;
+    color: var(--color-caution-6);
+    background: linear-gradient(var(--color-caution-2), var(--color-caution-2)),
+      linear-gradient(var(--color-background), var(--color-background));
   }
   input {
     font-size: var(--font-size-tiny);
@@ -33,17 +35,18 @@
     height: 2rem;
     text-overflow: ellipsis !important;
     border-radius: var(--border-radius-small);
+    color: var(--color-caution-6);
+    background: linear-gradient(var(--color-caution-2), var(--color-caution-2)),
+      linear-gradient(var(--color-background), var(--color-background));
   }
-  main:hover .clipboard {
+  .wrapper:hover .clipboard {
     visibility: visible;
   }
 </style>
 
-<main>
-  <input class={$$props.class} readonly={clipboard} {name} {value} />
-  {#if clipboard}
-    <span class="clipboard {$$props.class}">
-      <Clipboard text={value} {small} on:copied={closeFocused} />
-    </span>
-  {/if}
-</main>
+<div class="wrapper">
+  <input readonly {name} {value} />
+  <span class="clipboard">
+    <Clipboard text={value} {small} on:copied={closeFocused} />
+  </span>
+</div>
diff --git a/src/Loading.svelte b/src/Loading.svelte
index 73957a3e5..e194400cf 100644
--- a/src/Loading.svelte
+++ b/src/Loading.svelte
@@ -2,7 +2,6 @@
   import { onDestroy } from "svelte";
 
   export let small = false;
-  export let color = "secondary";
   export let center = false;
   export let fadeIn = false;
   export let margins = false;
@@ -46,7 +45,7 @@
   .spinner > div {
     width: 18px;
     height: 18px;
-    background-color: #5555ff;
+    background-color: var(--color-secondary);
     border-radius: var(--border-radius-round);
     display: inline-block;
     -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
@@ -157,10 +156,10 @@
       class:center
       class:margins
       class:condensed>
-      <div class="bounce1" style="background-color: var(--color-{color})" />
+      <div class="bounce1" style="background-color: var(--color-secondary)" />
       {#if !condensed}
-        <div class="bounce2" style="background-color: var(--color-{color})" />
-        <div class="bounce3" style="background-color: var(--color-{color})" />
+        <div class="bounce2" style="background-color: var(--color-secondary)" />
+        <div class="bounce3" style="background-color: var(--color-secondary)" />
       {/if}
     </div>
   </div>
diff --git a/src/Markdown.svelte b/src/Markdown.svelte
index 6692d4333..1a4b96639 100644
--- a/src/Markdown.svelte
+++ b/src/Markdown.svelte
@@ -67,8 +67,8 @@
   .front-matter {
     font-size: var(--font-size-tiny);
     font-family: var(--font-family-monospace);
-    color: var(--color-foreground-90);
-    border: 1px dashed var(--color-foreground-subtle);
+    color: var(--color-foreground);
+    border: 1px dashed var(--color-foreground-4);
     padding: 0.5rem;
     margin-bottom: 1.5rem;
   }
@@ -96,7 +96,7 @@
     font-weight: var(--font-weight-medium);
     padding: 1rem 0 0.5rem 0;
     margin: 0 0 0.75rem;
-    border-bottom: 1px solid var(--color-foreground-subtle);
+    border-bottom: 1px solid var(--color-foreground-4);
   }
 
   .markdown :global(h2) {
@@ -104,7 +104,7 @@
     font-weight: var(--font-weight-normal);
     padding: 0.25rem 0;
     margin: 2rem 0 0.5rem;
-    border-bottom: 1px dashed var(--color-foreground-subtle);
+    border-bottom: 1px dashed var(--color-foreground-4);
   }
 
   .markdown :global(h3) {
@@ -163,7 +163,7 @@
   .markdown :global(code) {
     font-family: var(--font-family-monospace);
     font-size: var(--font-size-regular);
-    color: var(--color-light);
+    color: var(--color-secondary-6);
   }
 
   .markdown :global(pre code) {
@@ -174,7 +174,7 @@
   .markdown :global(pre) {
     font-family: var(--font-family-monospace);
     font-size: var(--font-size-regular);
-    background-color: var(--color-foreground-background);
+    background-color: var(--color-foreground-2);
     padding: 1rem !important;
     border-radius: var(--border-radius-small);
     margin: 1rem 0;
@@ -194,7 +194,7 @@
   }
   .markdown :global(a) {
     text-decoration: none;
-    border-bottom: 1px solid var(--color-foreground-90);
+    border-bottom: 1px solid var(--color-foreground-6);
   }
   .markdown :global(a.no-underline) {
     border-bottom: none;
@@ -206,7 +206,7 @@
     overflow: hidden;
     background: transparent;
     border: 0;
-    border-bottom: 1px solid var(--color-foreground-faded);
+    border-bottom: 1px solid var(--color-foreground-4);
   }
 
   .markdown :global(ol) {
@@ -225,17 +225,17 @@
     border-collapse: collapse;
     border-radius: 0.5rem;
     border-style: hidden;
-    box-shadow: 0 0 0 1px var(--color-foreground-subtle);
+    box-shadow: 0 0 0 1px var(--color-foreground-4);
     overflow: hidden;
   }
   .markdown :global(td) {
     text-align: left;
     text-overflow: ellipsis;
-    border: 1px solid var(--color-foreground-subtle);
+    border: 1px solid var(--color-foreground-4);
     padding: 0.5rem 1rem;
   }
   .markdown :global(tr:nth-child(even)) {
-    background-color: var(--color-foreground-even-subtler);
+    background-color: var(--color-foreground-2);
   }
   .markdown :global(th) {
     text-align: center;
diff --git a/src/Message.svelte b/src/Message.svelte
index b41af4327..9f1b35f22 100644
--- a/src/Message.svelte
+++ b/src/Message.svelte
@@ -9,7 +9,7 @@
   .message-error {
     color: var(--color-negative);
     border-radius: var(--border-radius);
-    background-color: var(--color-glow-error);
+    background-color: var(--glow-error);
   }
 </style>
 
diff --git a/src/MobileNavbar.svelte b/src/MobileNavbar.svelte
index 92e7d24d8..79ab3a347 100644
--- a/src/MobileNavbar.svelte
+++ b/src/MobileNavbar.svelte
@@ -66,7 +66,6 @@
         <Search size={20} on:search={() => dispatch("select")} />
       </div>
       <div>
-        <a use:link on:click={() => dispatch("select")} href="/orgs">Orgs</a>
         <a use:link on:click={() => dispatch("select")} href="/registrations">
           Register
         </a>
diff --git a/src/Modal.svelte b/src/Modal.svelte
index 78f963547..94a75fece 100644
--- a/src/Modal.svelte
+++ b/src/Modal.svelte
@@ -25,18 +25,21 @@
   }
   .modal-overlay {
     z-index: 200;
-    background-color: rgba(0, 0, 0, 0.75);
+    background-color: #00000075;
   }
   .modal {
     padding: 2rem 3rem;
     border: 1px solid var(--color-secondary);
     font-family: var(--font-family-sans-serif);
     background: var(--color-background);
-    box-shadow: 8px 8px 64px var(--box-shadow-color);
+    box-shadow: var(--elevation-high);
     min-width: 480px;
     max-width: 760px;
     text-align: center;
   }
+  .modal.error {
+    box-shadow: var(--elevation-high-negative);
+  }
   .modal.error .modal-title,
   .modal.error .modal-subtitle,
   .modal.error .modal-body,
@@ -49,10 +52,10 @@
   .modal.modal-subtle {
     border: none;
     box-shadow: none;
-    background: radial-gradient(var(--color-glow) 0%, transparent 70%);
+    background: radial-gradient(var(--glow) 0%, transparent 70%);
   }
   .modal.modal-subtle.error {
-    background: radial-gradient(var(--color-glow-error) 0%, transparent 70%);
+    background: radial-gradient(var(--glow-error) 0%, transparent 70%);
   }
   .modal-title {
     color: var(--color-foreground);
diff --git a/src/Placeholder.svelte b/src/Placeholder.svelte
index e08287e79..9b3da4ae3 100644
--- a/src/Placeholder.svelte
+++ b/src/Placeholder.svelte
@@ -7,8 +7,8 @@
     text-align: center;
     border-radius: var(--border-radius-small);
     padding-bottom: 2rem;
-    color: var(--color-foreground-faded) !important;
-    background-color: var(--color-foreground-background);
+    color: var(--color-foreground-5) !important;
+    background-color: var(--color-foreground-1);
   }
   .placeholder header {
     padding: 1rem 0;
diff --git a/src/RadicleUrn.svelte b/src/RadicleUrn.svelte
index 8cc5963ab..6acda1a5a 100644
--- a/src/RadicleUrn.svelte
+++ b/src/RadicleUrn.svelte
@@ -21,7 +21,7 @@
     display: inline-flex;
     font-size: var(--font-size-regular);
     line-height: 2rem;
-    color: var(--color-foreground-90);
+    color: var(--color-foreground-6);
     vertical-align: middle;
   }
   .icon {
diff --git a/src/ReactionSelector.svelte b/src/ReactionSelector.svelte
index a2e0e570e..f1f9b5315 100644
--- a/src/ReactionSelector.svelte
+++ b/src/ReactionSelector.svelte
@@ -16,7 +16,7 @@
     align-items: center;
     justify-content: center;
     position: relative;
-    color: var(--color-foreground-faded);
+    color: var(--color-foreground-5);
     border-radius: var(--border-radius);
     height: 1rem;
     width: 1rem;
@@ -29,7 +29,7 @@
   .modal {
     position: absolute;
     left: 1.5rem;
-    background-color: var(--color-foreground-background);
+    background-color: var(--color-foreground-1);
     border-radius: var(--border-radius);
   }
   .modal > div {
@@ -44,7 +44,7 @@
     border-bottom-left-radius: var(--border-radius-small);
   }
   .modal > div:hover {
-    background-color: var(--color-foreground-subtle);
+    background-color: var(--color-foreground-2);
   }
 </style>
 
diff --git a/src/SeedAddress.svelte b/src/SeedAddress.svelte
index dd02b37cb..4c1c15ba6 100644
--- a/src/SeedAddress.svelte
+++ b/src/SeedAddress.svelte
@@ -18,7 +18,7 @@
     display: inline-flex;
     font-size: var(--font-size-regular);
     line-height: 2rem;
-    color: var(--color-foreground-90);
+    color: var(--color-foreground-6);
     vertical-align: middle;
   }
   .seed-icon {
diff --git a/src/ThemeToggle.svelte b/src/ThemeToggle.svelte
new file mode 100644
index 000000000..d53e60cb8
--- /dev/null
+++ b/src/ThemeToggle.svelte
@@ -0,0 +1,62 @@
+<script lang="ts" context="module">
+  export type Theme = "dark" | "light";
+
+  import { writable } from "svelte/store";
+
+  export const theme = writable<Theme>(loadTheme());
+
+  function storeTheme(theme: Theme): void {
+    window.localStorage.setItem("theme", theme);
+  }
+
+  function loadTheme(): Theme {
+    const storedTheme = window.localStorage.getItem("theme");
+
+    if (storedTheme === null) {
+      return "dark";
+    } else {
+      return storedTheme as Theme;
+    }
+  }
+</script>
+
+<script lang="ts">
+  import Icon from "@app/Icon.svelte";
+
+  $: document.documentElement.setAttribute("data-theme", $theme);
+</script>
+
+<style>
+  .theme-button {
+    border-radius: 50%;
+    border: 1px solid var(--color-foreground);
+    color: var(--color-foreground);
+    cursor: pointer;
+    display: flex;
+    height: 40px;
+    width: 40px;
+    justify-content: center;
+    align-items: center;
+    user-select: none;
+  }
+
+  .theme-button:hover {
+    color: var(--color-background);
+    background-color: var(--color-foreground);
+    border-color: transparent;
+  }
+</style>
+
+<div
+  class="theme-button"
+  role="button"
+  on:click={() => {
+    theme.set($theme === "dark" ? "light" : "dark");
+    storeTheme($theme);
+  }}>
+  {#if $theme === "dark"}
+    <Icon name="sun" />
+  {:else}
+    <Icon name="moon" />
+  {/if}
+</div>
diff --git a/src/ToggleButton.svelte b/src/ToggleButton.svelte
index eaba787ad..e211ae6f1 100644
--- a/src/ToggleButton.svelte
+++ b/src/ToggleButton.svelte
@@ -32,7 +32,7 @@
   }
   button {
     border-radius: var(--border-radius-small);
-    color: var(--color-foreground-80);
+    color: var(--color-foreground-6);
     cursor: pointer;
     font-family: var(--font-family-monospace);
     font-size: var(--font-size-tiny);
@@ -46,12 +46,12 @@
   button.active {
     cursor: pointer;
     color: var(--color-foreground);
-    background-color: var(--color-foreground-background);
+    background-color: var(--color-foreground-1);
   }
   button[disabled],
   button[disabled]:hover {
     cursor: not-allowed;
-    color: var(--color-foreground-80);
+    color: var(--color-foreground-6);
   }
 </style>
 
diff --git a/src/base/home/Index.svelte b/src/base/home/Index.svelte
index a383cf2ce..95ca9a1ee 100644
--- a/src/base/home/Index.svelte
+++ b/src/base/home/Index.svelte
@@ -41,7 +41,7 @@
     max-width: 74rem;
   }
   .blurb {
-    color: var(--color-foreground-90);
+    color: var(--color-foreground);
     padding: 0rem;
     max-width: 70%;
     font-size: var(--font-size-medium);
diff --git a/src/base/projects/Blob.svelte b/src/base/projects/Blob.svelte
index 798e52aa5..0062a2913 100644
--- a/src/base/projects/Blob.svelte
+++ b/src/base/projects/Blob.svelte
@@ -31,7 +31,7 @@
     padding: 0 0.5rem 0 1rem;
     color: var(--color-foreground);
     border-width: 1px 1px 0 1px;
-    border-color: var(--color-foreground-subtle);
+    border-color: var(--color-foreground-3);
     border-style: solid;
     border-top-left-radius: var(--border-radius-small);
     border-top-right-radius: var(--border-radius-small);
@@ -48,7 +48,7 @@
   .last-commit {
     padding: 0.5rem;
     color: var(--color-secondary);
-    background-color: var(--color-secondary-background);
+    background-color: var(--color-secondary-2);
     font-size: var(--font-size-tiny);
     border-radius: var(--border-radius-small);
     overflow-x: hidden;
@@ -62,7 +62,7 @@
   }
 
   .line-numbers {
-    color: var(--color-foreground-subtle);
+    color: var(--color-foreground-4);
     font-family: var(--font-family-sans-serif);
     text-align: right;
     user-select: none;
@@ -73,7 +73,7 @@
   }
   .line-number:hover,
   .line-number.highlighted {
-    color: var(--color-foreground-90);
+    color: var(--color-foreground-6);
   }
 
   .code {
@@ -84,7 +84,7 @@
   .container {
     position: relative;
     display: flex;
-    border: 1px solid var(--color-foreground-subtle);
+    border: 1px solid var(--color-foreground-3);
     border-top-style: dashed;
     border-bottom-left-radius: var(--border-radius-small);
     border-bottom-right-radius: var(--border-radius-small);
@@ -97,8 +97,8 @@
     align-items: center;
     width: 100%;
     height: 16rem;
-    background-color: var(--color-foreground-background);
-    color: var(--color-foreground-90);
+    background-color: var(--color-foreground-1);
+    color: var(--color-foreground-6);
     font-family: var(--font-family-monospace);
   }
   .binary > * {
@@ -110,7 +110,7 @@
     width: 100%;
     height: 1.5rem;
     top: 1rem;
-    background-color: var(--color-yellow-background-lighter);
+    background-color: var(--color-caution-3);
   }
 
   .no-scrollbar {
diff --git a/src/base/projects/BranchSelector.svelte b/src/base/projects/BranchSelector.svelte
index 84f6b409c..6be3c9161 100644
--- a/src/base/projects/BranchSelector.svelte
+++ b/src/base/projects/BranchSelector.svelte
@@ -42,7 +42,7 @@
     cursor: pointer;
     padding: 0.5rem 0.75rem;
     color: var(--color-secondary);
-    background-color: var(--color-secondary-background);
+    background-color: var(--color-secondary-2);
     border-radius: var(--border-radius-small) 0 0 var(--border-radius-small);
     user-select: none;
   }
@@ -50,12 +50,12 @@
     cursor: not-allowed;
   }
   .branch:hover:not(.not-allowed) {
-    background-color: var(--color-foreground-background-lighter);
+    background-color: var(--color-foreground-2);
   }
   .commit .hash {
     display: inline-block;
     color: var(--color-secondary);
-    background-color: var(--color-secondary-background-darker);
+    background-color: var(--color-secondary-1);
     padding: 0.5rem 0.75rem;
     border-radius: 0 var(--border-radius-small) var(--border-radius-small) 0;
   }
@@ -65,7 +65,7 @@
   .stat {
     font-family: var(--font-family-monospace);
     padding: 0.5rem 0.75rem;
-    background: var(--color-foreground-background);
+    background: var(--color-foreground-1);
   }
 </style>
 
diff --git a/src/base/projects/Browser.svelte b/src/base/projects/Browser.svelte
index 1e4d0cef4..7d97e59b8 100644
--- a/src/base/projects/Browser.svelte
+++ b/src/base/projects/Browser.svelte
@@ -1,10 +1,13 @@
 <script lang="ts">
   import type { Readable } from "svelte/store";
   import type * as proj from "@app/project";
+  import type { Theme } from "@app/ThemeToggle.svelte";
+
   import Loading from "@app/Loading.svelte";
   import Placeholder from "@app/Placeholder.svelte";
   import * as utils from "@app/utils";
   import Button from "@app/Button.svelte";
+  import { theme } from "@app/ThemeToggle.svelte";
 
   import Tree from "./Tree.svelte";
   import Blob from "./Blob.svelte";
@@ -17,7 +20,7 @@
 
   type State =
     | { status: Status.Loading; path: string }
-    | { status: Status.Loaded; path: string; blob: proj.Blob };
+    | { status: Status.Loaded; path: string; blob: proj.Blob; theme: Theme };
 
   export let project: proj.Project;
   export let tree: proj.Tree;
@@ -33,8 +36,12 @@
   // Whether the mobile file tree is visible.
   let mobileFileTree = false;
 
-  const loadBlob = async (path: string): Promise<proj.Blob> => {
-    if (state.status === Status.Loaded && state.path === path) {
+  const loadBlob = async (path: string, theme: Theme): Promise<proj.Blob> => {
+    if (
+      state.status === Status.Loaded &&
+      state.path === path &&
+      state.theme === theme
+    ) {
       return state.blob;
     }
 
@@ -42,10 +49,16 @@
     const promise =
       path === "/"
         ? project.getReadme(commit)
-        : project.getBlob(commit, path, { highlight: !isMarkdownPath });
+        : project.getBlob(
+            commit,
+            path,
+            isMarkdownPath
+              ? { highlight: false }
+              : { highlight: true, theme: `base16-ocean.${theme}` },
+          );
 
     state = { status: Status.Loading, path };
-    state = { status: Status.Loaded, path, blob: await promise };
+    state = { status: Status.Loaded, path, blob: await promise, theme };
 
     return state.blob;
   };
@@ -56,11 +69,11 @@
     return project.getBlob(commit, finalPath, { highlight: false });
   };
 
-  const onSelect = async ({ detail: newPath }: { detail: string }) => {
+  const onSelect = async (newPath: string, theme: Theme) => {
     // Ensure we don't spend any time in a "loading" state. This means
     // the loading spinner won't be shown, and instead the blob will be
     // displayed once loaded.
-    const blob = await loadBlob(newPath);
+    const blob = await loadBlob(newPath, theme);
     getBlob = new Promise(resolve => resolve(blob));
 
     // Close mobile tree if user navigates to other file
@@ -79,7 +92,7 @@
     mobileFileTree = !mobileFileTree;
   };
 
-  $: getBlob = loadBlob(path);
+  $: getBlob = loadBlob(path, $theme);
   $: loadingPath = state.status === Status.Loading ? state.path : null;
 </script>
 
@@ -171,7 +184,14 @@
     {#if tree.entries.length > 0}
       <div class="column-left" class:column-left-visible={mobileFileTree}>
         <div class="source-tree">
-          <Tree {tree} {path} {fetchTree} {loadingPath} on:select={onSelect} />
+          <Tree
+            {tree}
+            {path}
+            {fetchTree}
+            {loadingPath}
+            on:select={e => {
+              onSelect(e.detail, $theme);
+            }} />
         </div>
       </div>
       <div class="column-right">
diff --git a/src/base/projects/CloneButton.svelte b/src/base/projects/CloneButton.svelte
index 1a1f8a518..5684bbe19 100644
--- a/src/base/projects/CloneButton.svelte
+++ b/src/base/projects/CloneButton.svelte
@@ -9,9 +9,9 @@
 
 <style>
   .clone-button {
-    background-color: var(--color-yellow-background);
+    background-color: var(--color-caution-2);
     border-radius: var(--border-radius-small);
-    color: var(--color-yellow);
+    color: var(--color-caution-6);
     cursor: pointer;
     font-family: var(--font-family-monospace);
     min-width: max-content;
@@ -19,12 +19,12 @@
     user-select: none;
   }
   .clone-button:hover {
-    background-color: var(--color-foreground-background-lighter);
+    background-color: var(--color-caution-3);
   }
   .dropdown {
-    background-color: var(--color-foreground-background);
+    background-color: var(--color-foreground-1);
     border-radius: var(--border-radius-small);
-    box-shadow: 16px 16px 32px 32px var(--color-shadow);
+    box-shadow: var(--elevation-low);
     margin-top: 0.5rem;
     padding: 1rem;
     position: absolute;
@@ -40,7 +40,7 @@
     }
   }
   label {
-    color: var(--color-foreground-faded);
+    color: var(--color-foreground-6);
     display: block;
     font-size: var(--font-size-tiny);
     padding: 0.5rem 0.5rem 0 0.25rem;
@@ -53,9 +53,7 @@
     <div class="dropdown">
       <Input
         name="rad-clone-url"
-        value="rad clone rad://{seedHost}/{utils.parseRadicleId(urn)}"
-        class="yellow"
-        clipboard />
+        value="rad clone rad://{seedHost}/{utils.parseRadicleId(urn)}" />
       <label for="rad-clone-url">
         Use the <a
           target="_blank"
@@ -68,9 +66,7 @@
       <br />
       <Input
         name="git-clone-url"
-        value="https://{seedHost}/{utils.parseRadicleId(urn)}.git"
-        class="yellow"
-        clipboard />
+        value="https://{seedHost}/{utils.parseRadicleId(urn)}.git" />
       <label for="git-clone-url">
         Use Git to clone this repository from the URL above.
       </label>
diff --git a/src/base/projects/Commit.svelte b/src/base/projects/Commit.svelte
index 74b151e93..ae997411f 100644
--- a/src/base/projects/Commit.svelte
+++ b/src/base/projects/Commit.svelte
@@ -25,7 +25,7 @@
   }
   header {
     padding: 1rem;
-    background: var(--color-foreground-background-subtle);
+    background: var(--color-foreground-1);
     border-radius: var(--border-radius);
     margin-bottom: 1.5rem;
   }
@@ -39,7 +39,7 @@
     margin: 0.5rem 0 1rem 0;
   }
   .sha1 {
-    color: var(--color-foreground-80);
+    color: var(--color-foreground-5);
     font-size: var(--font-size-small);
   }
   .authorship {
diff --git a/src/base/projects/Commit/CommitAuthorship.svelte b/src/base/projects/Commit/CommitAuthorship.svelte
index 87f9b6365..39a3731d2 100644
--- a/src/base/projects/Commit/CommitAuthorship.svelte
+++ b/src/base/projects/Commit/CommitAuthorship.svelte
@@ -11,7 +11,7 @@
   .authorship {
     display: flex;
     align-items: center;
-    color: var(--color-foreground-faded);
+    color: var(--color-foreground-5);
     padding: 0.125rem 0;
   }
   .authorship .author,
diff --git a/src/base/projects/Commit/CommitTeaser.svelte b/src/base/projects/Commit/CommitTeaser.svelte
index 2034d3f60..6b3e246b3 100644
--- a/src/base/projects/Commit/CommitTeaser.svelte
+++ b/src/base/projects/Commit/CommitTeaser.svelte
@@ -23,11 +23,11 @@
     padding: 0 1.5rem;
   }
   .commit-teaser {
-    background-color: var(--color-foreground-background);
+    background-color: var(--color-foreground-1);
     padding: 0.75rem 0rem;
   }
   .commit-teaser:hover {
-    background-color: var(--color-foreground-background-lighter);
+    background-color: var(--color-foreground-2);
   }
   .commit-teaser:first-child {
     border-top-left-radius: var(--border-radius-small);
diff --git a/src/base/projects/Commit/CommitVerifiedBadge.svelte b/src/base/projects/Commit/CommitVerifiedBadge.svelte
index bfc62317c..29e84b18a 100644
--- a/src/base/projects/Commit/CommitVerifiedBadge.svelte
+++ b/src/base/projects/Commit/CommitVerifiedBadge.svelte
@@ -24,9 +24,9 @@
     position: absolute;
   }
   .popup {
-    background-color: var(--color-foreground-background);
+    background-color: var(--color-foreground-1);
     border-radius: var(--border-radius-small);
-    box-shadow: 16px 16px 32px 32px var(--color-shadow);
+    box-shadow: var(--elevation-low);
     color: var(--color-foreground);
     font-size: var(--font-size-tiny);
     left: -10rem;
@@ -45,12 +45,13 @@
     color: var(--color-tertiary);
   }
   .committer {
-    border-top: 1px dashed var(--color-foreground-subtle);
+    border-top: 1px dashed var(--color-foreground-4);
     padding: 0.75rem;
   }
   .peer {
     padding-top: 0.5rem;
     word-break: break-all;
+    color: var(--color-foreground-5);
   }
 </style>
 
@@ -75,7 +76,7 @@
           <CommitAuthorship {commit} showAuthor={false} showTime={false} />
           {#if commit.context.committer}
             <div class="peer">
-              <span class="faded">{commit.context.committer.peer.id}</span>
+              {commit.context.committer.peer.id}
             </div>
           {/if}
         </div>
diff --git a/src/base/projects/Header.svelte b/src/base/projects/Header.svelte
index ea7f1ae82..0c017bba2 100644
--- a/src/base/projects/Header.svelte
+++ b/src/base/projects/Header.svelte
@@ -56,23 +56,23 @@
     cursor: pointer;
   }
   .clickable:hover {
-    background-color: var(--color-foreground-background-lighter);
+    background-color: var(--color-foreground-2);
   }
   .not-allowed {
     cursor: not-allowed;
   }
   .not-allowed.widget {
-    color: var(--color-foreground-faded);
+    color: var(--color-foreground-5);
   }
   .stat {
     font-family: var(--font-family-monospace);
     padding: 0.5rem 0.75rem;
     height: 2.125rem;
-    background: var(--color-foreground-background);
+    background: var(--color-foreground-1);
   }
   .stat.active {
     color: var(--color-background);
-    background: var(--color-foreground-90);
+    background: var(--color-foreground);
   }
 
   @media (max-width: 960px) {
diff --git a/src/base/projects/History.svelte b/src/base/projects/History.svelte
index 1ebeb9fc4..d33cf3262 100644
--- a/src/base/projects/History.svelte
+++ b/src/base/projects/History.svelte
@@ -44,20 +44,20 @@
     font-size: var(--font-size-small);
   }
   .commit-group header {
-    color: var(--color-foreground-faded);
+    color: var(--color-foreground-6);
   }
   .commit-group-headers {
     margin-bottom: 2rem;
   }
 
   .commit {
-    background-color: var(--color-foreground-background);
+    background-color: var(--color-foreground-1);
   }
   .commit:not(:last-child) {
     border-bottom: 1px dashed var(--color-background);
   }
   .commit:hover {
-    background-color: var(--color-foreground-background-lighter);
+    background-color: var(--color-foreground-2);
     cursor: pointer;
   }
   .commit:first-child {
diff --git a/src/base/projects/Issue.svelte b/src/base/projects/Issue.svelte
index 340493237..7dbf23df8 100644
--- a/src/base/projects/Issue.svelte
+++ b/src/base/projects/Issue.svelte
@@ -22,7 +22,7 @@
 <style>
   header {
     padding: 1rem;
-    background: var(--color-foreground-background-subtle);
+    background: var(--color-foreground-1);
     border-radius: var(--border-radius);
     margin-bottom: 2rem;
   }
@@ -44,23 +44,23 @@
   }
   .metadata-section {
     margin-bottom: 1rem;
-    border-bottom: 1px dashed var(--color-foreground-subtle);
+    border-bottom: 1px dashed var(--color-foreground-4);
   }
   .metadata-section-header {
     font-size: var(--font-size-small);
     margin-bottom: 0.75rem;
-    color: var(--color-foreground-faded);
+    color: var(--color-foreground-5);
   }
   .metadata-section-body {
     margin-bottom: 1.25rem;
   }
   .metadata-section-empty {
-    color: var(--color-foreground-90);
+    color: var(--color-foreground-6);
   }
   .label {
     border-radius: var(--border-radius);
     color: var(--color-tertiary);
-    background-color: var(--color-tertiary-background);
+    background-color: var(--color-tertiary-2);
     padding: 0.25rem 0.75rem;
     margin-right: 0.5rem;
     font-size: var(--font-size-small);
@@ -84,7 +84,7 @@
   .id {
     font-size: var(--font-size-tiny);
     margin-left: 0.75rem;
-    color: var(--color-foreground-faded);
+    color: var(--color-foreground-5);
   }
   .summary-state {
     padding: 0.5rem 1rem;
@@ -92,9 +92,10 @@
   }
   .open {
     color: var(--color-positive);
-    background-color: var(--color-positive-background);
+    background-color: var(--color-positive-2);
   }
   .closed {
+    color: var(--color-negative);
     background-color: var(--color-negative-2);
   }
   .replies {
diff --git a/src/base/projects/Issue/IssueTeaser.svelte b/src/base/projects/Issue/IssueTeaser.svelte
index ea6cab5e7..c19484d0b 100644
--- a/src/base/projects/Issue/IssueTeaser.svelte
+++ b/src/base/projects/Issue/IssueTeaser.svelte
@@ -30,15 +30,15 @@
     display: flex;
     align-items: center;
     justify-content: space-between;
-    background-color: var(--color-foreground-background);
+    background-color: var(--color-foreground-1);
     padding: 0.75rem 0;
   }
   .issue-teaser:hover {
-    background-color: var(--color-foreground-background-lighter);
+    background-color: var(--color-foreground-2);
     cursor: pointer;
   }
   .issue-id {
-    color: var(--color-foreground-faded);
+    color: var(--color-foreground-5);
     font-size: var(--font-size-tiny);
     font-family: var(--font-family-monospace);
     margin-left: 0.5rem;
@@ -55,7 +55,7 @@
     flex-basis: 5rem;
   }
   .comment-count {
-    color: var(--color-foreground-70);
+    color: var(--color-foreground-4);
     font-weight: var(--font-weight-bold);
   }
   .comment-count .emoji {
@@ -74,7 +74,7 @@
     background-color: var(--color-positive);
   }
   .closed {
-    background-color: var(--color-negative-2);
+    background-color: var(--color-negative);
   }
   .summary {
     display: flex;
diff --git a/src/base/projects/Patch.svelte b/src/base/projects/Patch.svelte
index 77d3c43d3..3f4818692 100644
--- a/src/base/projects/Patch.svelte
+++ b/src/base/projects/Patch.svelte
@@ -42,7 +42,7 @@
 <style>
   header {
     padding: 1rem;
-    background: var(--color-foreground-background-subtle);
+    background: var(--color-foreground-1);
     border-radius: var(--border-radius);
   }
   .patch {
@@ -65,22 +65,23 @@
   }
   .id {
     font-size: var(--font-size-tiny);
-    color: var(--color-foreground-faded);
+    color: var(--color-foreground-5);
   }
   .summary-state {
     padding: 0.5rem 1rem;
     border-radius: 1.25rem;
   }
   .proposed {
-    color: var(--color-positive);
-    background-color: var(--color-positive-background);
+    color: var(--color-positive-6);
+    background-color: var(--color-positive-1);
   }
   .draft {
-    color: var(--color-positive);
-    background-color: var(--color-positive-background);
+    color: var(--color-positive-6);
+    background-color: var(--color-positive-1);
   }
   .archived {
-    background-color: var(--color-negative-2);
+    color: var(--color-negative-6);
+    background-color: var(--color-negative-1);
   }
   .flex {
     display: flex;
diff --git a/src/base/projects/Patch/PatchSideBar.svelte b/src/base/projects/Patch/PatchSideBar.svelte
index 1c2acb22c..73de5f4d1 100644
--- a/src/base/projects/Patch/PatchSideBar.svelte
+++ b/src/base/projects/Patch/PatchSideBar.svelte
@@ -14,23 +14,23 @@
   }
   .metadata-section {
     margin-bottom: 1rem;
-    border-bottom: 1px dashed var(--color-foreground-subtle);
+    border-bottom: 1px dashed var(--color-foreground-4);
   }
   .metadata-section-header {
     font-size: var(--font-size-small);
     margin-bottom: 0.75rem;
-    color: var(--color-foreground-faded);
+    color: var(--color-foreground-5);
   }
   .metadata-section-body {
     margin-bottom: 1.25rem;
   }
   .metadata-section-empty {
-    color: var(--color-foreground-90);
+    color: var(--color-foreground-6);
   }
   .label {
     border-radius: var(--border-radius);
     color: var(--color-tertiary);
-    background-color: var(--color-tertiary-background);
+    background-color: var(--color-tertiary-2);
     padding: 0.25rem 0.75rem;
     margin-right: 0.5rem;
     font-size: var(--font-size-small);
diff --git a/src/base/projects/Patch/PatchTabBar.svelte b/src/base/projects/Patch/PatchTabBar.svelte
index 16cbe6bbb..267c56923 100644
--- a/src/base/projects/Patch/PatchTabBar.svelte
+++ b/src/base/projects/Patch/PatchTabBar.svelte
@@ -55,7 +55,7 @@
   .revision-toggle {
     border-radius: var(--border-radius-small);
     border: none;
-    color: var(--color-foreground-80);
+    color: var(--color-foreground-6);
     font-family: var(--font-family-monospace);
     font-size: var(--font-size-tiny);
     height: var(--button-tiny-height);
@@ -63,12 +63,12 @@
     background-color: var(--color-background);
   }
   .revision-toggle:hover {
-    background-color: var(--color-foreground-background);
+    background-color: var(--color-foreground-1);
     color: var(--color-foreground);
     cursor: pointer;
   }
   .revision-toggle:disabled {
-    color: var(--color-foreground-faded);
+    color: var(--color-foreground-5);
   }
 </style>
 
diff --git a/src/base/projects/Patch/PatchTeaser.svelte b/src/base/projects/Patch/PatchTeaser.svelte
index 130a059e8..ae76d7384 100644
--- a/src/base/projects/Patch/PatchTeaser.svelte
+++ b/src/base/projects/Patch/PatchTeaser.svelte
@@ -30,15 +30,15 @@
     display: flex;
     align-items: center;
     justify-content: space-between;
-    background-color: var(--color-foreground-background);
+    background-color: var(--color-foreground-1);
     padding: 0.75rem 0;
   }
   .patch-teaser:hover {
-    background-color: var(--color-foreground-background-lighter);
+    background-color: var(--color-foreground-2);
     cursor: pointer;
   }
   .patch-id {
-    color: var(--color-foreground-faded);
+    color: var(--color-foreground-5);
     font-size: var(--font-size-tiny);
     font-family: var(--font-family-monospace);
     margin-left: 0.5rem;
@@ -55,7 +55,7 @@
     flex-basis: 5rem;
   }
   .comment-count {
-    color: var(--color-foreground-70);
+    color: var(--color-foreground-4);
     font-weight: var(--font-weight-bold);
   }
   .comment-count .emoji {
@@ -74,7 +74,7 @@
     background-color: var(--color-positive);
   }
   .closed {
-    background-color: var(--color-negative-2);
+    background-color: var(--color-negative);
   }
   .summary {
     display: flex;
diff --git a/src/base/projects/PeerSelector.svelte b/src/base/projects/PeerSelector.svelte
index e54ba2cca..a4b1d5cac 100644
--- a/src/base/projects/PeerSelector.svelte
+++ b/src/base/projects/PeerSelector.svelte
@@ -62,7 +62,7 @@
     cursor: pointer;
     padding: 0.5rem;
     color: var(--color-secondary);
-    background-color: var(--color-secondary-background);
+    background-color: var(--color-secondary-2);
     border-radius: var(--border-radius-small);
     user-select: none;
   }
@@ -73,7 +73,7 @@
     margin: 0 0.5rem;
   }
   .peer:hover {
-    background-color: var(--color-foreground-background-lighter);
+    background-color: var(--color-foreground-2);
   }
   .stat {
     display: flex;
@@ -81,7 +81,7 @@
     font-family: var(--font-family-monospace);
     padding: 0.5rem;
     height: 2.125rem;
-    background: var(--color-foreground-background);
+    background: var(--color-foreground-1);
   }
 </style>
 
diff --git a/src/base/projects/ProjectMeta.svelte b/src/base/projects/ProjectMeta.svelte
index b7d4c74e9..650006f82 100644
--- a/src/base/projects/ProjectMeta.svelte
+++ b/src/base/projects/ProjectMeta.svelte
@@ -30,12 +30,12 @@
     margin-bottom: 0.5rem;
   }
   .title .divider {
-    color: var(--color-foreground-subtle);
+    color: var(--color-foreground-4);
     margin: 0 0.5rem;
     font-weight: var(--font-weight-normal);
   }
   .title .peer-id {
-    color: var(--color-foreground-subtle);
+    color: var(--color-foreground-5);
     font-weight: var(--font-weight-normal);
     display: flex;
     align-items: center;
@@ -48,7 +48,7 @@
   .urn {
     font-family: var(--font-family-monospace);
     font-size: var(--font-size-tiny);
-    color: var(--color-foreground-faded);
+    color: var(--color-foreground-5);
     overflow-wrap: anywhere;
     display: flex;
     justify-content: left;
diff --git a/src/base/projects/Readme.svelte b/src/base/projects/Readme.svelte
index 164d11ecf..d34c1fc88 100644
--- a/src/base/projects/Readme.svelte
+++ b/src/base/projects/Readme.svelte
@@ -10,7 +10,7 @@
   article {
     padding: 2rem;
     max-width: 64rem;
-    background: var(--color-foreground-background-subtle);
+    background: var(--color-foreground-1);
     border-radius: var(--border-radius);
   }
 </style>
diff --git a/src/base/projects/SourceBrowser/FileDiff.svelte b/src/base/projects/SourceBrowser/FileDiff.svelte
index c08c69689..0200eb96f 100644
--- a/src/base/projects/SourceBrowser/FileDiff.svelte
+++ b/src/base/projects/SourceBrowser/FileDiff.svelte
@@ -19,7 +19,7 @@
 
 <style>
   .changeset-file {
-    border: 1px solid var(--color-foreground-3);
+    border: 1px solid var(--color-foreground-4);
     border-radius: var(--border-radius-small);
     min-width: var(--content-min-width);
     margin-bottom: 2rem;
@@ -35,7 +35,7 @@
     padding: 1rem;
   }
   main {
-    border-top: 1px dashed var(--color-foreground-3);
+    border-top: 1px dashed var(--color-foreground-4);
   }
   .changeset-file main {
     overflow-x: auto;
@@ -53,9 +53,9 @@
   }
   .binary {
     padding: 1rem;
-    color: var(--color-foreground-level-4);
+    color: var(--color-foreground-5);
     text-align: center;
-    background-color: var(--color-foreground-1);
+    background-color: var(--color-foreground-2);
   }
   table.diff {
     font-family: var(--font-family-monospace);
@@ -77,12 +77,12 @@
   }
   td.diff-line-number[data-type="+"],
   td.diff-line-type[data-type="+"] {
-    background-color: var(--color-positive-background);
+    background-color: var(--color-positive-2);
     color: var(--color-positive-6);
   }
   td.diff-line-number[data-type="-"],
   td.diff-line-type[data-type="-"] {
-    background-color: var(--color-negative-background);
+    background-color: var(--color-negative-2);
     color: var(--color-negative-6);
   }
   td.diff-line-number.left {
@@ -103,10 +103,10 @@
   }
   td.diff-expand-header {
     padding-left: 0.5rem;
-    color: var(--color-foreground-4);
+    color: var(--color-foreground-5);
   }
   td.diff-line-number {
-    color: var(--color-foreground-4);
+    color: var(--color-foreground-5);
   }
   .browse {
     display: flex;
diff --git a/src/base/projects/Tree/File.svelte b/src/base/projects/Tree/File.svelte
index 43fcf6778..2f89b3839 100644
--- a/src/base/projects/Tree/File.svelte
+++ b/src/base/projects/Tree/File.svelte
@@ -8,7 +8,7 @@
 
 <style>
   .file {
-    color: var(--color-foreground-90);
+    color: var(--color-foreground-6);
     border-radius: var(--border-radius-small);
     cursor: pointer;
     display: flex;
@@ -20,12 +20,12 @@
   }
 
   .file:hover {
-    background-color: var(--color-foreground-background);
+    background-color: var(--color-foreground-1);
   }
 
   .file.active {
     color: var(--color-foreground) !important;
-    background-color: var(--color-foreground-background);
+    background-color: var(--color-foreground-1);
   }
 
   .spinner {
diff --git a/src/base/projects/Tree/Folder.svelte b/src/base/projects/Tree/Folder.svelte
index cf44efcb7..b6bc22e7c 100644
--- a/src/base/projects/Tree/Folder.svelte
+++ b/src/base/projects/Tree/Folder.svelte
@@ -35,19 +35,19 @@
     cursor: pointer;
     padding: 0.25rem;
     margin: 0.125rem 0;
-    color: var(--color-foreground-level-6);
+    color: var(--color-foreground-6);
     user-select: none;
     line-height: 1.5rem;
     white-space: nowrap;
   }
   .folder:hover {
-    background-color: var(--color-foreground-background);
+    background-color: var(--color-foreground-1);
     border-radius: var(--border-radius-small);
   }
 
   .folder-name {
     margin-left: 0.25rem;
-    color: var(--color-light);
+    color: var(--color-secondary-6);
   }
 
   .container {
diff --git a/src/base/projects/Widget.svelte b/src/base/projects/Widget.svelte
index 14316e66c..e30b7d07c 100644
--- a/src/base/projects/Widget.svelte
+++ b/src/base/projects/Widget.svelte
@@ -24,7 +24,7 @@
     flex-direction: row;
     justify-content: space-between;
     padding: 1rem;
-    border: 1px solid var(--color-secondary-faded);
+    border: 1px solid var(--color-secondary-5);
     border-radius: var(--border-radius-small);
     min-width: 36rem;
     cursor: pointer;
@@ -57,7 +57,7 @@
     white-space: nowrap;
   }
   article.project-faded {
-    border: 1px dashed var(--color-foreground-subtle);
+    border: 1px dashed var(--color-foreground-4);
     cursor: not-allowed;
   }
   .activity {
@@ -66,12 +66,13 @@
   }
   article:hover {
     border-color: var(--color-secondary);
+    background-color: var(--color-secondary-1);
   }
   article:hover .activity {
     display: none !important;
   }
   article.project-faded:hover {
-    border-color: var(--color-foreground-faded);
+    border-color: var(--color-foreground-5);
   }
   article .id {
     font-size: var(--font-size-regular);
@@ -98,7 +99,7 @@
   }
   article .id .urn {
     visibility: hidden;
-    color: var(--color-foreground-faded);
+    color: var(--color-foreground-5);
     font-weight: var(--font-weight-normal);
     font-family: var(--font-family-monospace);
     font-size: var(--font-size-tiny);
diff --git a/src/base/seeds/View.svelte b/src/base/seeds/View.svelte
index 94093a7f6..5d90977d1 100644
--- a/src/base/seeds/View.svelte
+++ b/src/base/seeds/View.svelte
@@ -62,13 +62,13 @@
     align-items: center;
   }
   .signed-in {
-    color: var(--color-foreground-faded);
+    color: var(--color-foreground-5);
     margin-right: 0.5rem;
   }
   .session-info {
     display: flex;
     flex-direction: row;
-    background: var(--color-secondary-background);
+    background: var(--color-secondary-2);
     padding: 0.25rem 0.5rem;
     border-radius: var(--border-radius);
   }
diff --git a/src/project.ts b/src/project.ts
index ec9317bf4..cdb19f95b 100644
--- a/src/project.ts
+++ b/src/project.ts
@@ -398,7 +398,9 @@ export class Project implements ProjectInfo {
   async getBlob(
     commit: string,
     path: string,
-    options: { highlight: boolean },
+    options:
+      | { highlight: false }
+      | { highlight: true; theme: "base16-ocean.dark" | "base16-ocean.light" },
   ): Promise<Blob> {
     return new Request(
       `projects/${this.urn}/blob/${commit}/${path}`,