nycki/nycki.net
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

light theme toggle
All checks were successful
/ build (push) Successful in 31s
Details

Browse source
This commit is contained in:
Nycki 2025-03-21 16:43:06 -07:00
parent ddf258e55d
commit 1f69eefb39
5 changed files with 83 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
content/_includes/base.njk
View file

@ -14,6 +14,7 @@
<link rel="stylesheet" href="/xkcd.css">
<link rel="stylesheet" href="/index.css">
<link rel="stylesheet" href="{% getBundleFileUrl 'css' %}">
<script defer src="/light-toggle.js"></script>
</head>
<body>
<a href="#skip" class="visually-hidden">Skip to main content</a>
@ -36,6 +37,7 @@
<li><a href="/characters">characters</a></li>
<li><a href="/cookbook">cookbook</a></li>
<li><a href="/stickers">stickers</a></li>
<li><a href="#" class="theme-toggle">toggle theme</a></li>
</ul>
</nav>
</header>

2
content/_includes/home.njk
View file

@ -6,7 +6,7 @@ layout: base.njk
h2 ~ h2 {
border: none;
padding-top: 20px;
border-top: 12px double var(--xkcd-magenta);
border-top: 12px double var(--accent-color);
}
{% endcss %}

47
content/index.css
View file

@ -1,20 +1,41 @@
/* Defaults */
html {
--font-family: -apple-system, system-ui, sans-serif;
--font-family-monospace: Consolas, Menlo, Monaco, Andale Mono WT, Andale Mono, Lucida Console, Lucida Sans Typewriter, DejaVu Sans Mono, Bitstream Vera Sans Mono, Liberation Mono, Nimbus Mono L, Courier New, Courier, monospace;
@font-face {
font-family: comic-mono;
src: url(ComicMono.woff);
}
/* Theme colors */
/* Defaults */
html {
--xkcd-light-grey: #d8dcd6;
--xkcd-steel-blue: #5a7d9a;
--xkcd-magenta: #c20078;
--font-family-monospace: comic-mono Consolas monospace;
--font-family: comic-mono Consolas sans-serif;
--syntax-tab-size: 2;
--background-color: black;
--background-color: var(--xkcd-very-dark-brown);
--text-color: var(--xkcd-light-grey);
--text-color-link: var(--xkcd-steel-blue);
--accent-color: var(--xkcd-bronze);
}
--syntax-tab-size: 2;
@media(prefers-color-scheme: light) {
html {
--background-color: var(--xkcd-eggshell);
--text-color: var(--xkcd-dark-grey);
--text-color-link: var(--xkcd-teal);
--accent-color: var(--xkcd-red-orange);
}
}
[theme='dark'] {
--background-color: var(--xkcd-very-dark-brown);
--text-color: var(--xkcd-light-grey);
--text-color-link: var(--xkcd-steel-blue);
--accent-color: var(--xkcd-bronze);
}
[theme='light'] {
--background-color: var(--xkcd-eggshell);
--text-color: var(--xkcd-dark-grey);
--text-color-link: var(--xkcd-teal);
--accent-color: var(--xkcd-red-orange);
}
/* Global stylesheet */
@ -27,7 +48,7 @@ body {
max-width: 100ch;
padding: 0 1rem;
margin: 0 auto 2rem;
font-family: var(--font-family);
font-family: comic-mono;
color: var(--text-color);
background-color: var(--background-color);
}
@ -197,14 +218,14 @@ a[href].header-anchor:focus,
h1 {
padding-bottom: 20px;
border-bottom: 12px double var(--xkcd-magenta);
border-bottom: 12px double var(--accent-color);
}
article {
overflow: auto;
padding-bottom: 20px;
margin-bottom: 20px;
border-bottom: 12px double var(--xkcd-magenta);
border-bottom: 12px double var(--accent-color);
}
img {

BIN
static/ComicMono.woff Normal file
View file

Binary file not shown.

46
static/light-toggle.js Normal file
View file

@ -0,0 +1,46 @@
function themeToggle() {
const oldValue = localStorage.getItem('theme');
let newValue;
if (oldValue == 'light') {
newValue = 'dark';
} else if (oldValue == 'dark') {
newValue = 'light';
}
localStorage.setItem('theme', newValue);
themeRefresh();
}
function themeClear() {
localStorage.setItem('theme', '');
themeRefresh();
}
function themeRefresh(newValue) {
if (newValue !== undefined) {
localStorage.setItem('theme', newValue);
}
const theme = localStorage.getItem('theme')
const el = document.getElementsByTagName('html')[0];
if (theme == 'light') {
el.setAttribute('theme', 'light');
} else if (theme == 'dark') {
el.setAttribute('theme', 'dark');
} else {
el.setAttribute('theme', '');
}
}
function main() {
const buttonToggle = document.getElementsByClassName('theme-toggle');
for (const el of buttonToggle) {
el.onclick = themeToggle;
}
const buttonClear = document.getElementsByTagName('theme-clear');
for (const el of buttonClear) {
el.onclick = themeClear;
}
themeRefresh();
}
main();