Adds dark mode support#18
Conversation
Deploying tools-passkeys-dev with
|
| Latest commit: |
4a14180
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://8bd63e04.tools-passkeys-dev.pages.dev |
| Branch Preview URL: | https://feat-dark-mode.tools-passkeys-dev.pages.dev |
| </ul> | ||
| </div> | ||
| <div class="ms-auto d-flex align-items-center ps-3"> | ||
| <style> |
There was a problem hiding this comment.
<style> tags always go in <head>. Though honestly because of the complexity of this site I'd suggest these styles end up in a .css file, either an existing one or a new one.
| show-data-types="false" | ||
| show-size="false" | ||
| theme='{"base00": "#FFFFFF","base01": "#E0E0E0","base02": "#C5C8C6","base03": "#B4B7B4","base04": "#969896","base05": "#373B41","base06": "#282A2E","base07": "#1D1F21","base08": "#CC342B","base09": "#D63384","base0A": "#FBA922","base0B": "#198844","base0C": "#3971ED","base0D": "#FFBF3B","base0E": "#4F559C","base0F": "#3971ED"}' | ||
| theme='{"base00": "var(--bs-body-bg)","base01": "var(--bs-tertiary-bg)","base02": "var(--bs-border-color)","base03": "var(--bs-secondary-color)","base04": "var(--bs-secondary-color)","base05": "var(--bs-body-color)","base06": "var(--bs-body-color)","base07": "var(--bs-body-color)","base08": "#CC342B","base09": "#D63384","base0A": "#FBA922","base0B": "#198844","base0C": "#3971ED","base0D": "#FFBF3B","base0E": "#4F559C","base0F": "#3971ED"}' |
There was a problem hiding this comment.
Huh, did these colors influence the colors that AI picked for dark mode? I wasn't expecting to see so many substitutions for this color scheme that was otherwise only picked to differentiate code in the JSON viewer. I guess if you're otherwise fine with the appearance of the site in dark mode this is fine.
| <style> | ||
| .theme-toggle-group { | ||
| background: var(--bs-secondary-bg); | ||
| padding: 2px; | ||
| border-radius: 50px; | ||
| display: flex; | ||
| gap: 2px; | ||
| } | ||
| .theme-toggle-btn { | ||
| border: none; | ||
| background: none; | ||
| width: 22px; | ||
| height: 22px; | ||
| border-radius: 50%; | ||
| display: flex; | ||
| align-items: center; | ||
| justify-content: center; | ||
| color: var(--bs-secondary-color); | ||
| transition: all 0.2s ease; | ||
| padding: 0; | ||
| font-size: 0.75rem; | ||
| } | ||
| .theme-toggle-btn:hover { | ||
| color: var(--bs-body-color); | ||
| } | ||
| .theme-toggle-btn.active { | ||
| background: var(--bs-primary); | ||
| color: white !important; | ||
| } | ||
| </style> | ||
| <div class="theme-toggle-group" role="group" aria-label="Theme toggle"> | ||
| <button class="theme-toggle-btn" data-bs-theme-value="light" title="Light mode"> | ||
| <i class="bi bi-sun-fill"></i> | ||
| </button> | ||
| <button class="theme-toggle-btn" data-bs-theme-value="auto" title="Follow system"> | ||
| <i class="bi bi-circle-half"></i> | ||
| </button> | ||
| <button class="theme-toggle-btn" data-bs-theme-value="dark" title="Dark mode"> | ||
| <i class="bi bi-moon-stars-fill"></i> | ||
| </button> | ||
| </div> |
There was a problem hiding this comment.
Why does this theme picker exist twice? This is the same picker that's currently defined in header.njk above. Me thinks the picker should get split out into its own component if it needs to be used in two different places.
There was a problem hiding this comment.
Does the fact that the theme picker got duplicated to here mean that index.njk needs to use the header component? 🤔
There was a problem hiding this comment.
Oh, I see why now, the individual tools have a header bar that the picker goes into:
I don't have a real problem with the location of the picker, but I do think it should still get de-duped for use in both places so we don't end up with behavioral and visual drift over time.
2 participants
Closes #1