Radish alpha
r
radicle.xyz
rad:z371PVmDHdjJucejRoRYJcDEvD5pp
Radicle website including documentation and guides
Radicle
Git
Commits › d9b06ec
Add light/dark mode toggle
dnlklmn committed 2 years ago
commit d9b06ec80294f03cd1b1b268c0ff4911a91e281b
parent ea9c85a
7 files changed +204 -49
modified _layouts/default.html
@@ -13,8 +13,8 @@
    <meta name="twitter:site" content="@radicle" />

    <meta name="twitter:creator" content="@radicle" />

    <link rel="shortcut icon" href="/assets/images/radicle.svg"/>
- 
    <link rel="stylesheet" href="{{ "/assets/css/fonts.css" | relative_url }}">

    <link rel="stylesheet" href="{{ "/assets/css/main.css" | relative_url }}">
+ 
    <link rel="stylesheet" href="{{ "/assets/css/fonts.css" | relative_url }}">

    <link rel="stylesheet" href="{{ "/assets/css/monokai.css" | relative_url }}">

  </head>

  <body>
@@ -26,6 +26,7 @@
      </div>

      <nav>

      </nav>
+ 
      <button class="toggle" id="toggle-theme"><!-- Set by script --></button>

    </header>

    <main>

      <h1>{{ page.title }}</h1>
@@ -33,7 +34,8 @@
      {{ content }}

    </main>

    <footer>
- 
      &copy; The Radicle Team
+ 
      <p>&copy; The Radicle Team</p>

    </footer>
+ 
    <script src="{{ "/assets/js/toggle-theme.js" | relative_url }}"></script>

  </body>

</html>
modified _layouts/guide.html
@@ -26,6 +26,7 @@
      </div>

      <nav>

      </nav>
+ 
      <button class="toggle" id="toggle-theme"><!-- Set by script --></button>

    </header>

    <main>

      <h1>{{ page.title }}</h1>
@@ -36,7 +37,8 @@
      {{ content }}

    </main>

    <footer>
- 
      &copy; The Radicle Team
+ 
      <p>&copy; The Radicle Team</p>

    </footer>
+ 
    <script src="{{ "/assets/js/toggle-theme.js" | relative_url }}"></script>

  </body>

</html>
modified assets/css/main.css
@@ -1,22 +1,36 @@
@charset "utf-8";



:root {
- 
  --color-bg-dark: #0a0d10;
- 
  --color-bg-light: #fff6fdaa;
- 
  --color-fg-dim-0: #444;
- 
  --color-fg-dim-1: #666;
- 
  --color-fg-dim-2: #999;
- 
  --color-fg-dim-3: #ccc;
- 
  --color-fg-dim-4: #eee;
- 
  --color-bg-dim-0: #f1f1f1;
- 
  --color-bg-dim-1: #fafafa;
- 
  --color-fg-subtle-pink: #4c3159;
- 
  --color-fg: #1a1a1a;

  --color-yellow: #ffff88;
- 
  --color-fg-highlight: #5555bb;

  --color-fg-highlight-secondary: #229944;
- 
  --color-border-highlight: #aaaaee;

  --color-bg-highlight: #efefff;
+ 
  --color-bg-default: #f5f5ff;
+ 
  --color-fg-contrast: #232563;
+ 
  --color-fg-low-contrast: #434583; /* TODO: tweak this */
+ 
  --color-fg-dim: #6a6a81;
+ 
  --color-fg-emphasized: #7070FF;
+ 
  --color-fg-match-background: #f5f5ff;
+ 
  --color-fill-secondary: #7070FF;
+ 
  --color-fill-separator: #dbdbff;
+ 
  --color-fill-ghost: #EBEBFF;
+ 
  --color-border-hint: #DBDBFF;
+ 
  --color-border-focus: #8585FF;
+ 
}
+
+ 
:root[data-theme="dark"] {
+ 
  --color-yellow: #ffff88;
+ 
  --color-bg-highlight: #14151a;
+ 
  --color-bg-default: #0a0d10;
+ 
  --color-fg-contrast: #f9f9fb;
+ 
  --color-fg-low-contrast: #d9d9db; /* TODO: tweak this */
+ 
  --color-fg-dim: #9b9bb1;
+ 
  --color-fg-emphasized: #7070FF;
+ 
  --color-fg-match-background: #0a0d10;
+ 
  --color-fill-secondary: #7070FF;
+ 
  --color-fill-separator: #24252d;
+ 
  --color-fill-ghost: #24252D;
+ 
  --color-border-hint: #24252D;
+ 
  --color-border-focus: #8585FF;

}



::selection {
@@ -28,16 +42,18 @@
}



html {
- 
  font-family: var(--font-family-default);
- 
  color: var(--color-fg);
+ 
  font-family: var(--font-family-default), sans-serif;
+ 
  color: var(--color-fg-contrast);

  min-width: 1280px;

}



body {

  margin: 0;
+ 
  height: 100vh;
+ 
  background-color: var(--color-bg-default);

}
- 
header, main, footer {
+ 
main, footer {

  display: grid;

  grid-column-gap: 2rem;

  grid-auto-flow: row;
@@ -57,18 +73,27 @@ main {
}



header, footer {
- 
  color: rgba(255, 255, 255, 0.8);

  font-weight: 300;

}



header {
- 
  background-color: var(--color-bg-dark);
- 
  height: 4rem;
- 
  align-items: stretch;
+ 
  display: flex;
+ 
  background-color: var(--color-bg-default);
+ 
  padding: 1rem 1.5rem;
+ 
  align-items: center;
+ 
  justify-content: space-between;

}



footer {
- 
  padding: 4rem 0;
+ 
  padding-bottom: 3rem;
+ 
  color: var(--color-fg-dim);
+ 
}
+
+ 
footer p {
+ 
  font-size: var(--font-size-tiny);
+ 
  display: block;
+ 
  text-align: left;
+ 
  grid-column: text;

}



nav {
@@ -110,7 +135,7 @@ h2 {
  font-weight: var(--font-weight-semibold);

  margin: 3.75rem 0 1.5rem;

  padding-bottom: 1rem;
- 
  border-bottom: 1px solid var(--color-fg-dim-4);
+ 
  border-bottom: 1px solid var(--color-fill-separator);

}



h3 {
@@ -132,12 +157,12 @@ h5 {
}



pre, code {
- 
  color: var(--color-fg-subtle-pink);
+ 
  color: var(--color-fg-low-contrast);

  font-family: var(--font-family-code);

}



pre {
- 
  background-color: var(--color-bg-light);
+ 
  background-color: var(--color-bg-highlight);

  overflow-x: scroll;

  font-size: 0.875rem;

  border-radius: 4px;
@@ -158,7 +183,7 @@ p code, ul code, ol code, aside code {
  padding: 1px 4px;

  border-radius: 2px;

  word-spacing: -2px;
- 
  background-color: var(--color-bg-light);
+ 
  background-color: var(--color-fill-separator);

}



strong code {
@@ -176,7 +201,7 @@ aside code {
table {

  font-size: 0.875rem;

  border-collapse: collapse;
- 
  background-color: var(--color-bg-dim-1);
+ 
  background-color: var(--color-bg-highlight);

}



table td:first-child {
@@ -186,18 +211,25 @@ table td:first-child {


table td {

  vertical-align: top;
- 
  border-bottom: 1px solid white;

  padding: 0.5rem;

}



table th {

  font-size: var(--font-size-small);

  font-weight: var(--font-weight-regular);
- 
  background-color: var(--color-bg-dim-0);
+ 
  background-color: var(--color-fill-separator);

  padding: 0.5rem;

  text-align: left;

}
+ 
table tr {
+ 
    border-bottom: 1px solid var(--color-fill-separator);
+ 
}
+
+ 
table tr:last-child {
+ 
    border-bottom: none;
+ 
}
+ 


table code {

  font-weight: normal;

}
@@ -214,17 +246,14 @@ blockquote + p {
}



blockquote {
- 
  color: var(--color-fg-dim-0);
+ 
  color: var(--color-fg-contrast);

  background: var(--color-bg-highlight);

  padding: 1rem;

  margin: 1rem 0;
- 
  border-left: 2px solid var(--color-border-highlight);
+ 
  border-left: 2px solid var(--color-border-focus);

}



.title {
- 
  grid-column: left;
- 
  display: grid;
- 
  grid-auto-flow: column;

  align-items: stretch;

  justify-self: start;

}
@@ -244,7 +273,7 @@ blockquote {


.subtitle {

  font-size: 1.125rem;
- 
  color: var(--color-fg-dim-1);
+ 
  color: var(--color-fg-dim);

  margin: 0 0 4rem;

}
@@ -264,7 +293,7 @@ main img.placeholder {
  height: 8rem;

  border: none !important;

  outline: none !important;
- 
  background: var(--color-fg-dim-4) !important;
+ 
  background: var(--color-bg-highlight) !important;

}



figure {
@@ -335,7 +364,7 @@ aside.diagram {
figcaption, aside {

  font-size: 0.75rem;

  line-height: 1.5;
- 
  color: var(--color-fg-dim-1);
+ 
  color: var(--color-fg-dim);

}



a {
@@ -344,10 +373,10 @@ a {
}



p a {
- 
  border-bottom: 1px solid var(--color-fg-dim-2);
+ 
  border-bottom: 1px solid var(--color-fg-dim);

}

p a:hover {
- 
  border-bottom-color: var(--color-fg-dim-1);
+ 
  border-bottom-color: var(--color-fg-contrast);

}



p, ol, ul, table, pre {
@@ -366,12 +395,12 @@ hr {
  grid-column: screen;

  width: 100%;

  border: none;
- 
  border-top: 1px solid var(--color-fg-dim-4);
+ 
  border-top: 1px solid var(--color-fill-separator);

  margin: 0;

}



span.highlight {
- 
  color: var(--color-fg-highlight);
+ 
  color: var(--color-fg-emphasized);

}



span.highlight-secondary {
@@ -379,15 +408,35 @@ span.highlight-secondary {
}



.button {
- 
  color: var(--color-fg-highlight);
+ 
  color: var(--color-fill-secondary);

  font-weight: normal;

  padding: 1rem 2rem;
- 
  border: 1px solid var(--color-fg-highlight);
+ 
  border: 1px solid var(--color-fill-secondary);

  border-radius: 4px;

}

.button:hover {

  color: white;
- 
  background-color: var(--color-fg-highlight);
+ 
  background-color: var(--color-fill-secondary);
+ 
}
+
+ 
#toggle-theme {
+ 
  border: none;
+ 
  color: var(--color-fg-contrast);
+ 
  padding: 0;
+ 
  width: fit-content;
+ 
  height: fit-content;
+ 
  border-radius: 0.25rem;
+ 
  cursor: pointer;
+ 
  background-color: transparent;
+ 
  background-size: contain;
+ 
  width: 1.75rem;
+ 
  height: 1.75rem;
+ 
}
+ 
:root[data-theme=light] #toggle-theme {
+ 
  background-image: url(/assets/images/sun.svg);
+ 
}
+ 
:root[data-theme=dark] #toggle-theme {
+ 
  background-image: url(/assets/images/moon.svg);

}



.toc {
@@ -429,7 +478,7 @@ span.highlight-secondary {
  margin-left: 1rem;

}

.toc-h3 > a, .toc-h4 > a, .tok-h5 > a {
- 
  color: var(--color-fg-dim-1);
+ 
  color: var(--color-fg-dim);

}



.poem {
modified assets/css/monokai.css
@@ -1,2 +1,5 @@
- 
.highlight .nl { color: #555 }
- 
.highlight .s2 { color: #555 }
+ 
:root[data-theme="dark"] .highlight .nl { color: var(--color-yellow) }
+ 
:root[data-theme="dark"] .highlight .s2 { color: var(--color-fg-highlight-secondary) }
+
+ 
.highlight .nl { color: var(--color-fg-contrast) }
+ 
.highlight .s2 { color: var(--color-fg-highlight-secondary) }
added assets/images/moon.svg
@@ -0,0 +1,20 @@
+ 
<svg width="80" height="80" viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg">
+ 
<path d="M72 64L72 56L64 56L64 64L72 64Z" fill="#29C8C6"/>
+ 
<path d="M64 72L64 64L56 64L56 72L64 72Z" fill="#29C8C6"/>
+ 
<path d="M72 24L72 16L64 16L64 24L72 24Z" fill="#2BF3F1"/>
+ 
<path d="M24 32L24 24L16 24L16 32L24 32Z" fill="#2BF3F1"/>
+ 
<path d="M24 40L24 32L16 32L16 40L24 40Z" fill="#2BF3F1"/>
+ 
<path d="M24 48L24 40L16 40L16 48L24 48Z" fill="#2BF3F1"/>
+ 
<path d="M56 24L56 16L48 16L48 24L56 24Z" fill="#2BF3F1"/>
+ 
<path d="M56 64L56 56L48 56L48 64L56 64Z" fill="#2BF3F1"/>
+ 
<path d="M24 56L24 48L16 48L16 56L24 56Z" fill="#2BF3F1"/>
+ 
<path d="M32 8L56 8L56 16L48 16L48 64L56 64L56 72L32 72L32 64L24 64L24 16L32 16L32 8Z" fill="#2BF3F1"/>
+ 
<path d="M24 32L32 32L32 24L24 24L24 32Z" fill="#E8FF29"/>
+ 
<path d="M40 24L40 32L48 32L48 24L40 24Z" fill="#E8FF29"/>
+ 
<path d="M32 48L32 56L40 56L40 48L32 48Z" fill="#A141C3"/>
+ 
<path d="M64 16L64 8L56 8L56 16L64 16Z" fill="#2BF3F1"/>
+ 
<path d="M56 72L56 64L32 64L32 72L56 72Z" fill="#29C8C6"/>
+ 
<path d="M56 64L56 56L24 56L24 64L56 64Z" fill="#29C8C6"/>
+ 
<path d="M24 56L24 48L16 48L16 56L24 56Z" fill="#29C8C6"/>
+ 
<path d="M48 56L48 48L40 48L40 56L48 56Z" fill="#29C8C6"/>
+ 
</svg>
added assets/images/sun.svg
@@ -0,0 +1,57 @@
+ 
<svg width="264" height="264" viewBox="0 0 264 264" fill="none" xmlns="http://www.w3.org/2000/svg">
+ 
  <g shape-rendering="crispEdges">
+ 
    <rect x="120" y="0" width="24" height="24" fill="#EF7D57"/>
+ 
    <rect x="24" y="24" width="24" height="24" fill="#EF7D57"/>
+ 
    <rect x="120" y="24" width="24" height="24" fill="#FFCD75"/>
+ 
    <rect x="216" y="24" width="24" height="24" fill="#EF7D57"/>
+ 
    <rect x="48" y="48" width="24" height="24" fill="#FFCD75"/>
+ 
    <rect x="96" y="48" width="24" height="24" fill="#EF7D57"/>
+ 
    <rect x="120" y="48" width="24" height="24" fill="#FFCD75"/>
+ 
    <rect x="144" y="48" width="24" height="24" fill="#EF7D57"/>
+ 
    <rect x="192" y="48" width="24" height="24" fill="#FFCD75"/>
+ 
    <rect x="72" y="72" width="24" height="24" fill="#EF7D57"/>
+ 
    <rect x="96" y="72" width="24" height="24" fill="#FFCD75"/>
+ 
    <rect x="120" y="72" width="24" height="24" fill="#EF7D57"/>
+ 
    <rect x="144" y="72" width="24" height="24" fill="#FFCD75"/>
+ 
    <rect x="168" y="72" width="24" height="24" fill="#EF7D57"/>
+ 
    <rect x="48" y="96" width="24" height="24" fill="#EF7D57"/>
+ 
    <rect x="72" y="96" width="24" height="24" fill="#FFCD75"/>
+ 
    <rect x="96" y="96" width="24" height="24" fill="#FFCD75"/>
+ 
    <rect x="120" y="96" width="24" height="24" fill="#FFCD75"/>
+ 
    <rect x="144" y="96" width="24" height="24" fill="#FFCD75"/>
+ 
    <rect x="168" y="96" width="24" height="24" fill="#FFCD75"/>
+ 
    <rect x="192" y="96" width="24" height="24" fill="#EF7D57"/>
+ 
    <rect x="0" y="120" width="24" height="24" fill="#EF7D57"/>
+ 
    <rect x="24" y="120" width="24" height="24" fill="#FFCD75"/>
+ 
    <rect x="48" y="120" width="24" height="24" fill="#FFCD75"/>
+ 
    <rect x="72" y="120" width="24" height="24" fill="#1A1C2C"/>
+ 
    <rect x="96" y="120" width="24" height="24" fill="#F4F4F4"/>
+ 
    <rect x="120" y="120" width="24" height="24" fill="#FFCD75"/>
+ 
    <rect x="144" y="120" width="24" height="24" fill="#1A1C2C"/>
+ 
    <rect x="168" y="120" width="24" height="24" fill="#F4F4F4"/>
+ 
    <rect x="192" y="120" width="24" height="24" fill="#FFCD75"/>
+ 
    <rect x="216" y="120" width="24" height="24" fill="#FFCD75"/>
+ 
    <rect x="240" y="120" width="24" height="24" fill="#EF7D57"/>
+ 
    <rect x="48" y="144" width="24" height="24" fill="#EF7D57"/>
+ 
    <rect x="72" y="144" width="24" height="24" fill="#FFCD75"/>
+ 
    <rect x="96" y="144" width="24" height="24" fill="#FFCD75"/>
+ 
    <rect x="120" y="144" width="24" height="24" fill="#FFCD75"/>
+ 
    <rect x="144" y="144" width="24" height="24" fill="#FFCD75"/>
+ 
    <rect x="168" y="144" width="24" height="24" fill="#FFCD75"/>
+ 
    <rect x="192" y="144" width="24" height="24" fill="#EF7D57"/>
+ 
    <rect x="72" y="168" width="24" height="24" fill="#EF7D57"/>
+ 
    <rect x="96" y="168" width="24" height="24" fill="#FFCD75"/>
+ 
    <rect x="120" y="168" width="24" height="24" fill="#EF7D57"/>
+ 
    <rect x="144" y="168" width="24" height="24" fill="#FFCD75"/>
+ 
    <rect x="168" y="168" width="24" height="24" fill="#EF7D57"/>
+ 
    <rect x="48" y="192" width="24" height="24" fill="#FFCD75"/>
+ 
    <rect x="96" y="192" width="24" height="24" fill="#EF7D57"/>
+ 
    <rect x="120" y="192" width="24" height="24" fill="#FFCD75"/>
+ 
    <rect x="144" y="192" width="24" height="24" fill="#EF7D57"/>
+ 
    <rect x="192" y="192" width="24" height="24" fill="#FFCD75"/>
+ 
    <rect x="24" y="216" width="24" height="24" fill="#EF7D57"/>
+ 
    <rect x="120" y="216" width="24" height="24" fill="#FFCD75"/>
+ 
    <rect x="216" y="216" width="24" height="24" fill="#EF7D57"/>
+ 
    <rect x="120" y="240" width="24" height="24" fill="#EF7D57"/>
+ 
  </g>
+ 
</svg>
added assets/js/toggle-theme.js
@@ -0,0 +1,22 @@
+ 
const rootElement = document.documentElement;
+ 
const themeToggleBtn = document.getElementById("toggle-theme");
+ 
const storedTheme = localStorage.getItem("theme");
+ 
const defaultTheme = window.matchMedia
+ 
  && window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+
+ 
setTheme(storedTheme || defaultTheme);
+
+ 
themeToggleBtn.addEventListener("click", () => {
+ 
  const currentTheme = rootElement.dataset.theme;
+
+ 
  if (currentTheme === "dark") {
+ 
    setTheme("light");
+ 
  } else {
+ 
    setTheme("dark");
+ 
  }
+ 
});
+
+ 
function setTheme(theme) {
+ 
  rootElement.dataset.theme = theme;
+ 
  localStorage.setItem("theme", theme);
+ 
}