Radish alpha
r
radicle-explorer
Radicle web interface
Radicle
Git (anonymous pull)
Log in to clone via SSH
Commits ›
Add theme switching button
Rūdolfs Ošiņš committed 3 years ago
commit b35d46752f3a6f0b251a72adce7e2d840f6a5bc6
parent 7a393066224d434bd6e26960cd57af152fc3cfa3
56 files changed +703 -290
modified 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" />
added 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;
+ 
}
added 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);
+ 
}
modified 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%;
modified public/typography.css
@@ -61,7 +61,7 @@ p {
}



.txt-missing {
- 
  color: var(--color-foreground-faded);
+ 
  color: var(--color-foreground-5);

  font-style: italic;

}
modified 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 {
modified 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>
modified 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>
modified 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 />
modified 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>
modified 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;
modified 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);
modified 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);
added 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}
modified 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 {
modified 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 {
modified 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" />
modified 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
modified 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>
modified 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>
modified 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;
modified 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>
modified 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>
modified 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);
modified 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;
modified 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 {
modified 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>
modified 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 {
added 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>
modified 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>
modified 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);
modified 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 {
modified 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>
modified 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">
modified 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>
modified 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 {
modified 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,
modified 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);
modified 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>
modified 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) {
modified 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 {
modified 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 {
modified 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;
modified 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;
modified 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);
modified 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>
modified 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;
modified 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>
modified 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;
modified 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>
modified 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;
modified 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 {
modified 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 {
modified 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);
modified 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);

  }
modified 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}`,