Radish alpha
r
radicle.xyz
rad:z371PVmDHdjJucejRoRYJcDEvD5pp
Radicle website including documentation and guides
Radicle
Git
Patches › dcd607a2
css: Use `prefers-color-schema` media feature
Archived lorenz opened 9 days ago

Instead of our own theme toggle, which requires running JavaScript, use a media query to find out the user preference.

https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@media/prefers-color-scheme

Activity Changes +65 -82
10 files changed +65 -82 55f0752a → 152cfa95
modified _includes/footer.html
@@ -3,5 +3,5 @@
    <img id="logo" src="/assets/images/radicle.svg" width="32" height="32" style="margin-top: 4px"/>

  </a>

  <span><small>© <span class="desktop">2018–{{ 'now' | date: "%Y" }}</span> The Radicle Team</small></span>
- 
  <span><button class="toggle" id="toggle-theme"><!-- Set by script --></button></span>
+ 
  <span></span>

</footer>
modified _layouts/blog.html
@@ -15,7 +15,6 @@
      </div>

      <nav>

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

    </header>

    <main>

      <h1>{{ page.title }}</h1>
@@ -33,6 +32,5 @@
    <footer>

      <p>&copy; The Radicle Team</p>

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

  </body>

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

      <nav>

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

    </header>

    <main>

      <h1>{{ page.title }}</h1>
@@ -27,6 +26,5 @@
    <footer>

      <p>&copy; The Radicle Team</p>

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

  </body>

</html>
modified _layouts/index.html
@@ -33,7 +33,6 @@
    {{ content }}

  </main>

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

  <script>

    const copyButton = document.getElementById("install");

    const copyResult = document.getElementById("install-copy");
modified _layouts/page.html
@@ -10,6 +10,5 @@
    {{ content }}

  </main>

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

</body>

</html>
modified _layouts/post.html
@@ -23,6 +23,5 @@
      <p><strong>Join</strong> our community on 💬 <a href="https://radicle.zulipchat.com">Zulip</a> and discuss your ideas to improve Radicle.</p>

    </aside>

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

  </body>

</html>
modified assets/css/common.css
@@ -21,26 +21,28 @@
  --color-selection: var(--color-fg-contrast);

}
- 
:root[data-theme="dark"] {
- 
  --color-pink: #f999f9;
- 
  --color-yellow: #ffff99;
- 
  --color-secondary: #9999ff;
- 
  --color-fg-highlight: var(--color-yellow);
- 
  --color-fg-highlight-tertiary: #bbeeff;
- 
  --color-fg-highlight-secondary: #77dd77;
- 
  --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;
- 
  --color-selection: var(--color-bg-default);
+ 
@media (prefers-color-scheme: dark) {
+ 
  :root {
+ 
    --color-pink: #f999f9;
+ 
    --color-yellow: #ffff99;
+ 
    --color-secondary: #9999ff;
+ 
    --color-fg-highlight: var(--color-yellow);
+ 
    --color-fg-highlight-tertiary: #bbeeff;
+ 
    --color-fg-highlight-secondary: #77dd77;
+ 
    --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;
+ 
    --color-selection: var(--color-bg-default);
+ 
  }

}



::selection {
@@ -66,26 +68,4 @@ body {


body, html {

  height: 100%;
- 
}
-
- 
#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;
- 
  margin-top: 0.25rem;
- 
  margin-bottom: 0.25rem;
- 
}
- 
: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);
- 
}
+ 
}
 

\ No newline at end of file
modified assets/css/monokai.css
@@ -1,5 +1,7 @@
- 
:root[data-theme="dark"] .highlight .nl { color: var(--color-yellow) }
- 
:root[data-theme="dark"] .highlight .s2 { color: var(--color-fg-highlight-secondary) }
+ 
@media (prefers-color-scheme: dark) {
+ 
  .highlight .nl { color: var(--color-yellow) }
+ 
  .highlight .s2 { color: var(--color-fg-highlight-secondary) }
+ 
}



.highlight .nl { color: var(--color-fg-contrast) }

.highlight .s2 { color: var(--color-fg-highlight-secondary) }
@@ -73,7 +75,8 @@
/* Light Mode */



/* Light mode syntax highlighting improvements */
- 
:root:not([data-theme="dark"]) .highlight {
+ 
@media (prefers-color-scheme: light) {
+ 
  .highlight {

  /* Base text and background */

  .c { color: #6a737d; } /* Comment - GitHub style gray */

  .err { color: #cb2431; background-color: #ffeaea; } /* Error */
@@ -154,3 +157,4 @@
  .gd { color: #cb2431; background-color: #ffeaea; } /* Generic.Deleted */

  .gi { color: #22863a; background-color: #f0fff4; } /* Generic.Inserted */

}
+ 
}
modified assets/css/page.css
@@ -190,37 +190,67 @@ a:hover {
  cursor: pointer;

}

.button:hover, .button.filled,
- 
:root[data-theme="light"] .button {
+ 
.button {

  border-color: var(--color-pink);

  background-color: var(--color-pink);

  color: var(--color-bg-default);

}
+ 
@media (prefers-color-scheme: light) {
+ 
  .button {
+ 
    border-color: var(--color-pink);
+ 
    background-color: var(--color-pink);
+ 
    color: var(--color-bg-default);
+ 
  }
+ 
}
+ 


.button.secondary {

  color: var(--color-secondary);

  border: 1px dashed var(--color-secondary);

}



.button.secondary:hover, .button.secondary.filled,
- 
:root[data-theme="light"] .button.secondary {
+ 
.button.secondary {

  border-color: var(--color-secondary);

  background-color: var(--color-secondary);

  color: var(--color-bg-default);

}
+ 
@media (prefers-color-scheme: light) {
+ 
  .button.secondary {
+ 
    border-color: var(--color-secondary);
+ 
    background-color: var(--color-secondary);
+ 
    color: var(--color-bg-default);
+ 
  }
+ 
}
+ 


.button.small {

  padding: 0.25rem 0.75rem;

  margin: 0;

}
- 
.button.filled, :root[data-theme="light"] .button {
+ 
.button.filled {

  border-style: none;

}
- 
.button.filled:hover, :root[data-theme="light"] .button:hover {
+
+ 
@media (prefers-color-scheme: light) {
+ 
  .button {
+ 
    border-style: none;
+ 
  }
+ 
}
+
+ 
.button.filled:hover {

  background-color: var(--color-fg-low-contrast) !important;

  color: var(--color-bg-default) !important;

}
+ 
@media (prefers-color-scheme: light) {
+ 
  .button:hover {
+ 
    background-color: var(--color-fg-low-contrast) !important;
+ 
    color: var(--color-bg-default) !important;
+ 
  }
+ 
}
+ 


.hidden {

  display: none;

}
deleted assets/js/toggle-theme.js
@@ -1,24 +0,0 @@
- 
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);
-
- 
if (themeToggleBtn) {
- 
  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);
- 
}