Merge pull request #8 from jbowdre/theme_selection

Theme selection
This commit is contained in:
John Bowdre 2024-08-15 16:17:00 -05:00 committed by GitHub
commit d7e19b0a5c
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
9 changed files with 205 additions and 26 deletions

View file

@ -126,17 +126,17 @@ opacity: 1;
Insert prompt indicators on interactive shells. Insert prompt indicators on interactive shells.
*/ */
.cmd::before { .cmd::before {
color: var(--base07); color: var(--user-prompt);
content: "$ "; content: "$ ";
} }
.cmd_root::before { .cmd_root::before {
color: var(--base08); color: var(--root-prompt);
content: "# "; content: "# ";
} }
.cmd_pwsh::before { .cmd_pwsh::before {
color: var(--base07); color: var(--user-prompt);
content: "PS> "; content: "PS> ";
} }

40
assets/js/set-theme.js Normal file
View file

@ -0,0 +1,40 @@
const toggleButton = document.getElementById('themeToggle');
const htmlElement = document.documentElement;
function setTheme(theme) {
htmlElement.setAttribute('data-theme', theme);
localStorage.setItem('theme', theme);
updateToggleButton(theme);
}
function updateToggleButton(theme) {
toggleButton.setAttribute('aria-checked', theme === 'dark');
}
function getPreferredTheme() {
const storedTheme = localStorage.getItem('theme');
if (storedTheme) {
return storedTheme;
}
return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
}
// Ensure the toggle button state is correct on load
document.addEventListener('DOMContentLoaded', () => {
updateToggleButton(getPreferredTheme());
});
// Listen for toggle button clicks
toggleButton.addEventListener('click', () => {
const currentTheme = htmlElement.getAttribute('data-theme') || getPreferredTheme();
const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
setTheme(newTheme);
});
// Listen for system preference changes
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (e) => {
if (!localStorage.getItem('theme')) {
const newTheme = e.matches ? 'dark' : 'light';
setTheme(newTheme);
}
});

View file

@ -1,7 +1,7 @@
{{ with .Site.Params.about }} {{ with .Site.Params.about }}
<div class="aside__about"> <div class="aside__about">
{{ with .logo }}<img class="about__logo" src="{{ . | absURL }}" alt="Logo">{{ end }} {{ with .logo }}<img class="about__logo" src="{{ . | absURL }}" alt="Logo">{{ end }}
<h1 class="about__title">{{ .title }}&nbsp;<a href="/feed.xml" aria-label="RSS"><i class="fa-solid fa-square-rss"></i></a>&nbsp;</h1> <h1 class="about__title">{{ .title }}&nbsp;<a href="/feed.xml" aria-label="RSS"><i class="fa-solid fa-square-rss"></i></a></h1>
{{ partial "tagline.html" . }} {{ partial "tagline.html" . }}
<br> <br>
<a href="/about/"><i class="fa-regular fa-user"></i></a>&nbsp;<a href="/about/">{{ site.Params.Author.name }}</a> <a href="/about/"><i class="fa-regular fa-user"></i></a>&nbsp;<a href="/about/">{{ site.Params.Author.name }}</a>

View file

@ -15,3 +15,7 @@
{{ $jsCopy := resources.Get "js/code-copy-button.js" | minify }} {{ $jsCopy := resources.Get "js/code-copy-button.js" | minify }}
<script src="{{ $jsCopy.RelPermalink }}" async></script> <script src="{{ $jsCopy.RelPermalink }}" async></script>
{{ end }} {{ end }}
<!-- theme switch -->
{{ $themeToggle := resources.Get "js/set-theme.js" | minify }}
<script src="{{ $themeToggle.RelPermalink }}"></script>

View file

@ -21,8 +21,20 @@
{{ partialCached "favicon" . }} {{ partialCached "favicon" . }}
{{ partial "opengraph" . }} {{ partial "opengraph" . }}
<!-- load theme preference asap -->
<script>
(function() {
var savedTheme = localStorage.getItem('theme');
if (savedTheme) {
document.documentElement.setAttribute('data-theme', savedTheme);
} else if (window.matchMedia && window.matchMedia('(prefers-color-scheme: light)').matches) {
document.documentElement.setAttribute('data-theme', 'light');
}
})();
</script>
<!-- FontAwesome <https://fontawesome.com/> --> <!-- FontAwesome <https://fontawesome.com/> -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css" integrity="sha512-1sCRPdkRXhBV2PBLUdRb4tMg1w2YPf37qatUFeS7zlBy7jJI8Lf4VHwWfZZfpXtYSLy85pkm9GaYVYMfw5BC1A==" crossorigin="anonymous" /> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css" integrity="sha512-Kc323vGBEqzTmouAECnVceyQqyqdsSiqLQISBL29aUW4U/M7pSPA/gEUZQqv1cwx4OnYxTxve5UMg5GT6L4JJg==" crossorigin="anonymous" />
<!-- ForkAwesome <https://forkaweso.me/> --> <!-- ForkAwesome <https://forkaweso.me/> -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fork-awesome@1.2.0/css/fork-awesome.min.css" integrity="sha256-XoaMnoYC5TH6/+ihMEnospgm0J1PM/nioxbOUdnM8HY=" crossorigin="anonymous"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fork-awesome@1.2.0/css/fork-awesome.min.css" integrity="sha256-XoaMnoYC5TH6/+ihMEnospgm0J1PM/nioxbOUdnM8HY=" crossorigin="anonymous">

View file

@ -7,4 +7,8 @@
{{ end }} {{ end }}
</ul> </ul>
</nav> </nav>
<button id="themeToggle" class="theme-toggle" aria-label="Toggle light/dark theme" title="Toggle light/dark theme">
<svg class="theme-toggle__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<path d="M448 256c0-106-86-192-192-192l0 384c106 0 192-86 192-192zM0 256a256 256 0 1 1 512 0A256 256 0 1 1 0 256z"/>
</svg>
</button>

View file

@ -1,9 +1,113 @@
/* color and font overrides */ /* define fonts */
:root { :root {
--code: var(--base06);
--font-monospace: 'Berkeley Mono', 'IBM Plex Mono', 'Cascadia Mono', 'Roboto Mono', 'Source Code Pro', 'Fira Mono', 'Courier New', monospace; --font-monospace: 'Berkeley Mono', 'IBM Plex Mono', 'Cascadia Mono', 'Roboto Mono', 'Source Code Pro', 'Fira Mono', 'Courier New', monospace;
} }
/* dark/light theming */
:root{
/* Default dark theme */
--bg: var(--dark-base00);
--code: var(--dark-base06);
--fg: var(--dark-base05);
--highlight: var(--dark-base0A);
--hover: var(--dark-base0C);
--inner-bg: var(--dark-base02);
--link: var(--dark-base0D);
--logo-text: var(--dark-base09);
--logo: var(--dark-base0B);
--muted: var(--dark-base03);
--off-bg: var(--dark-base01);
--off-fg: var(--dark-base04);
--root-prompt: var(--dark-base08);
--user-prompt: var(--dark-base07);
}
:root[data-theme="light"] {
--bg: var(--light-base00);
--off-bg: var(--light-base01);
--inner-bg: var(--light-base02);
--muted: var(--light-base03);
--off-fg: var(--light-base04);
--fg: var(--light-base05);
--code: var(--light-base06);
--user-prompt: var(--light-base07);
--root-prompt: var(--light-base08);
--logo-text: var(--light-base09);
--highlight: var(--light-base0A);
--logo: var(--light-base0B);
--hover: var(--light-base0C);
--link: var(--light-base0D);
}
@media (prefers-color-scheme: light) {
:root:not([data-theme="dark"]) {
--bg: var(--light-base00);
--off-bg: var(--light-base01);
--inner-bg: var(--light-base02);
--muted: var(--light-base03);
--off-fg: var(--light-base04);
--fg: var(--light-base05);
--code: var(--light-base06);
--user-prompt: var(--light-base07);
--root-prompt: var(--light-base08);
--logo-text: var(--light-base09);
--highlight: var(--light-base0A);
--logo: var(--light-base0B);
--hover: var(--light-base0C);
--link: var(--light-base0D);
}
}
body {
transition: background-color 0.3s ease, color 0.3s ease;
}
.theme-toggle {
position: absolute;
top: 1rem;
right: 1rem;
background: none;
border: none;
cursor: pointer;
padding: 0;
width: 2rem;
height: 2rem;
z-index: 1000;
transition: opacity 0.3s ease;
}
.theme-toggle:hover {
opacity: 0.7;
}
.theme-toggle:focus {
outline: none;
}
.theme-toggle:focus-visible {
outline: 2px solid var(--hover);
outline-offset: 2px;
}
.theme-toggle__icon {
width: 100%;
height: 100%;
transition: transform 0.3s ease, fill 0.3s ease;
fill: var(--off-fg);
}
.theme-toggle:hover .theme-toggle__icon {
fill: var(--hover);
}
[data-theme="dark"] .theme-toggle__icon {
transform: rotate(180deg);
}
.page__nav ul {
padding-right: 3rem;
}
/* load preferred font */ /* load preferred font */
@font-face { @font-face {
font-family: 'Berkeley Mono'; font-family: 'Berkeley Mono';
@ -30,7 +134,7 @@
/* logo tweaks */ /* logo tweaks */
.page__logo { .page__logo {
color: var(--off-fg); color: var(--logo-text);
} }
.page__logo-inner { .page__logo-inner {

View file

@ -2,20 +2,35 @@
*/ */
:root { :root {
--base00: #090909; /* bg */ /* dark theme colors */
--base01: #1c1c1c; /* off-bg */ --dark-base00: #090909; /* bg */
--base02: #292929; /* inner-bg */ --dark-base01: #1c1c1c; /* off-bg */
--base03: #6d6c6c; /* muted */ --dark-base02: #292929; /* inner-bg */
--base04: #abaaaa; /* off-fg */ --dark-base03: #6d6c6c; /* muted */
--base05: #d8d8d8; /* fg */ --dark-base04: #abaaaa; /* off-fg */
--base06: #75f558; /* code */ --dark-base05: #d8d8d8; /* fg */
--base07: #5f8700; /* user prompt */ --dark-base06: #75f558; /* code */
--base08: #ab4642; /* root prompt */ --dark-base07: #5f8700; /* user prompt */
--base09: #dc9656; --dark-base08: #ab4642; /* root prompt */
--base0A: #f7ca88; /* highlight */ --dark-base09: #abaaaa; /* logo text */
--base0B: #682523; /* logo */ --dark-base0A: #f7ca88; /* highlight */
--base0C: #ab2321; /* hover */ --dark-base0B: #682523; /* logo */
--base0D: #d36060; /* link */ --dark-base0C: #ab2321; /* hover */
--base0E: #ba8baf; --dark-base0D: #d36060; /* link */
--base0F: #a16946;
/* light theme colors */
--light-base00: #ffffff; /* bg */
--light-base01: #f0f0f0; /* off-bg */
--light-base02: #dbdbdb; /* inner-bg */
--light-base03: #909090; /* muted */
--light-base04: #707070; /* off-fg */
--light-base05: #303030; /* fg */
--light-base06: #2a8f1f; /* code */
--light-base07: #3f5900; /* user prompt */
--light-base08: #c23d3d; /* root prompt */
--light-base09: #f0f0f0; /* logo-text */
--light-base0A: #d4a960; /* highlight */
--light-base0B: #af3a37; /* logo */
--light-base0C: #c62a28; /* hover */
--light-base0D: #a04545; /* link */
} }

View file

@ -11,7 +11,7 @@ module.exports = {
// Which theme you want to use. You can find all of the themes at // Which theme you want to use. You can find all of the themes at
// https://torchlight.dev/docs/themes. // https://torchlight.dev/docs/themes.
theme: 'synthwave-84', theme: 'material-theme-lighter',
// The Host of the API. // The Host of the API.
host: 'https://api.torchlight.dev', host: 'https://api.torchlight.dev',