cdransf/coryd.dev-eleventy
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: persistent theme toggle; color revisions

Browse source
This commit is contained in:
Cory Dransfeldt 2024-02-15 13:11:18 -08:00
parent cbb71f017b
commit 06777d78af
No known key found for this signature in database
4 changed files with 48 additions and 22 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
package.json
View file

@ -1,6 +1,6 @@
{ {
"name": "coryd.dev", "name": "coryd.dev",
"version": "5.7.1", "version": "5.8.0",
"description": "The source for my personal site. Built using 11ty and hosted on Netlify.", "description": "The source for my personal site. Built using 11ty and hosted on Netlify.",
"type": "module", "type": "module",
"scripts": { "scripts": {

10
src/assets/scripts/index.js
View file

@ -52,15 +52,19 @@ if (window.location.hostname !== 'localhost') {
document.body.classList.toggle('theme__dark'); document.body.classList.toggle('theme__dark');
} else if (currentTheme === 'light') { } else if (currentTheme === 'light') {
document.body.classList.toggle('theme__light'); document.body.classList.toggle('theme__light');
} else if (prefersDarkScheme) {
document.body.classList.toggle('theme__dark');
} else if (!prefersDarkScheme) {
document.body.classList.toggle('theme__light');
} }
btn.addEventListener('click', () => { btn.addEventListener('click', () => {
console.log(prefersDarkScheme) document.body.classList.toggle('theme__light');
document.body.classList.toggle('theme__dark');
if (prefersDarkScheme) { if (prefersDarkScheme) {
document.body.classList.toggle('theme__light');
theme = document.body.classList.contains('theme__light') ? 'light' : 'dark'; theme = document.body.classList.contains('theme__light') ? 'light' : 'dark';
} else { } else {
document.body.classList.toggle('theme__dark');
theme = document.body.classList.contains('theme__dark') ? 'dark' : 'light'; theme = document.body.classList.contains('theme__dark') ? 'dark' : 'light';
} }
localStorage?.setItem('theme', theme); localStorage?.setItem('theme', theme);

13
src/assets/styles/index.css
View file

@ -9,12 +9,12 @@ html {
} }
::-moz-selection { ::-moz-selection {
color: var(--white); color: var(--color-lightest);
background: var(--selection-color); background: var(--selection-color);
} }
::selection { ::selection {
color: var(--white); color: var(--color-lightest);
background: var(--selection-color); background: var(--selection-color);
} }
@ -489,10 +489,13 @@ footer nav {
/* theme toggle */ /* theme toggle */
.theme__toggle, .theme__toggle,
.theme__toggle svg{ .theme__toggle svg {
cursor: pointer; cursor: pointer;
} }
.theme__toggle > .light svg { stroke: var(--sun) !important; }
.theme__toggle > .dark svg { stroke: var(--moon) !important; }
.theme__dark .theme__toggle > .light { .theme__dark .theme__toggle > .light {
display: inline; display: inline;
} }
@ -501,11 +504,11 @@ footer nav {
display: none; display: none;
} }
.theme__toggle > .light { .theme__light .theme__toggle > .light {
display: none; display: none;
} }
.theme__toggle > .dark { .theme__light .theme__toggle > .dark {
display: inline; display: inline;
} }

45
src/assets/styles/partials/vars.css
View file

@ -27,9 +27,15 @@
--white: #fff; --white: #fff;
--black: #000; --black: #000;
--gray-light: var(--gray-200);
--gray-lighter: var(--gray-50);
--gray-lightest: #fbfbfb;
--gray-dark: var(--gray-700);
--blue-dark: #091222;
/* theme */ /* theme */
--color-lightest: var(--white); --color-lightest: var(--gray-lightest);
--color-darkest: var(--black); --color-darkest: var(--blue-dark);
--text-color: var(--color-darkest); --text-color: var(--color-darkest);
--background-color: var(--color-lightest); --background-color: var(--color-lightest);
--text-color-inverted: var(--color-lightest); --text-color-inverted: var(--color-lightest);
@ -37,9 +43,6 @@
--accent-color: var(--blue-600); --accent-color: var(--blue-600);
--accent-color-hover: var(--blue-800); --accent-color-hover: var(--blue-800);
--selection-color: var(--accent-color); --selection-color: var(--accent-color);
--gray-light: var(--gray-200);
--gray-lighter: var(--gray-50);
--gray-dark: var(--gray-700);
--brand-github: #333; --brand-github: #333;
--brand-hey: #5522fa; --brand-hey: #5522fa;
@ -50,6 +53,8 @@
--brand-buy-me-a-coffee: #ffdd00; --brand-buy-me-a-coffee: #ffdd00;
--brand-rss: #f26522; --brand-rss: #f26522;
--webrings: #ec8fd0; --webrings: #ec8fd0;
--moon: #655ad2;
--sun: #f9d71c;
/* fonts */ /* fonts */
--font-sans: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif; --font-sans: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif;
@ -100,10 +105,10 @@
/* dark theme */ /* dark theme */
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
:root { :root {
--text-color: var(--white); --text-color: var(--color-lightest);
--background-color: var(--black); --background-color: var(--color-darkest);
--text-color-inverted: var(--black); --text-color-inverted: var(--color-darkest);
--background-color-inverted: var(--white); --background-color-inverted: var(--color-lightest);
--accent-color: var(--blue-400); --accent-color: var(--blue-400);
--accent-color-hover: var(--blue-200); --accent-color-hover: var(--blue-200);
--gray-light: var(--gray-900); --gray-light: var(--gray-900);
@ -113,11 +118,25 @@
} }
} }
:root body.theme__light {
--text-color: var(--color-darkest);
--background-color: var(--color-lightest);
--text-color-inverted: var(--color-lightest);
--background-color-inverted: var(--color-darkest);
--accent-color: var(--blue-600);
--accent-color-hover: var(--blue-800);
--selection-color: var(--accent-color);
--gray-light: var(--gray-200);
--gray-lighter: var(--gray-50);
--gray-dark: var(--gray-700);
--brand-github: #333;
}
:root body.theme__dark { :root body.theme__dark {
--text-color: var(--white); --text-color: var(--color-lightest);
--background-color: var(--black); --background-color: var(--color-darkest);
--text-color-inverted: var(--black); --text-color-inverted: var(--color-darkest);
--background-color-inverted: var(--white); --background-color-inverted: var(--color-lightest);
--accent-color: var(--blue-400); --accent-color: var(--blue-400);
--accent-color-hover: var(--blue-200); --accent-color-hover: var(--blue-200);
--gray-light: var(--gray-900); --gray-light: var(--gray-900);