From bb0068a4e9224f76be2db00ff271d39c18d98c6f Mon Sep 17 00:00:00 2001 From: Cory Dransfeldt Date: Mon, 12 Feb 2024 10:32:39 -0800 Subject: [PATCH] feat: light/dark theme toggle --- package.json | 2 +- src/_data/nav.js | 2 +- src/_includes/partials/nav/link.liquid | 4 ++-- src/_includes/partials/nav/menu.liquid | 3 ++- src/_includes/partials/nav/theme.liquid | 8 +++++++ src/assets/scripts/index.js | 29 ++++++++++++++++++++++++- src/assets/styles/index.css | 26 +++++++++++++++++++++- src/assets/styles/partials/vars.css | 13 +++++++++++ 8 files changed, 80 insertions(+), 7 deletions(-) create mode 100644 src/_includes/partials/nav/theme.liquid diff --git a/package.json b/package.json index 724d7a7f..3dd30f8b 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "coryd.dev", - "version": "5.6.1", + "version": "5.7.0", "description": "The source for my personal site. Built using 11ty and hosted on Netlify.", "type": "module", "scripts": { diff --git a/src/_data/nav.js b/src/_data/nav.js index 00f9f463..d90ece86 100644 --- a/src/_data/nav.js +++ b/src/_data/nav.js @@ -12,7 +12,7 @@ export default async function () { { name: 'About' }, { name: 'Links', icon: 'link' }, { name: 'Tags', icon: 'tags' }, - { name: 'Search', icon: 'search' }, + { name: 'Search', icon: 'search', class: 'client-side' }, { name: 'Feeds', icon: 'rss' }, { name: 'Mastodon', icon: 'brand-mastodon' }, ], diff --git a/src/_includes/partials/nav/link.liquid b/src/_includes/partials/nav/link.liquid index d5cb53aa..955592b6 100644 --- a/src/_includes/partials/nav/link.liquid +++ b/src/_includes/partials/nav/link.liquid @@ -1,6 +1,6 @@ {%- capture pageUrl %}/{{ link | downcase }}/{% endcapture -%} {% if pageUrl contains page.fileSlug and page.fileSlug %} - + {% if icon %} {% tablericon icon link %} {% else %} @@ -9,7 +9,7 @@ {% else %} {% if icon %} - + {% tablericon icon link %} {% else %} diff --git a/src/_includes/partials/nav/menu.liquid b/src/_includes/partials/nav/menu.liquid index b73d4f7b..ad66210d 100644 --- a/src/_includes/partials/nav/menu.liquid +++ b/src/_includes/partials/nav/menu.liquid @@ -2,8 +2,9 @@ diff --git a/src/_includes/partials/nav/theme.liquid b/src/_includes/partials/nav/theme.liquid new file mode 100644 index 00000000..27bd12f2 --- /dev/null +++ b/src/_includes/partials/nav/theme.liquid @@ -0,0 +1,8 @@ +
  • + + {% tablericon "sun" "Toggle light theme" %} + + + {% tablericon "moon" "Toggle dark theme" %} + +
    • \ No newline at end of file diff --git a/src/assets/scripts/index.js b/src/assets/scripts/index.js index e5b09c56..13dc3f59 100644 --- a/src/assets/scripts/index.js +++ b/src/assets/scripts/index.js @@ -1,5 +1,5 @@ if (window.location.hostname !== 'localhost') { - ;(async function () { + ;(async function() { const nowPlaying = document.getElementById('now-playing') if (nowPlaying) { @@ -39,3 +39,30 @@ if (window.location.hostname !== 'localhost') { } })() } + +;(async function() { + const btn = document.querySelector('.theme__toggle'); + const prefersDarkScheme = window.matchMedia('(prefers-color-scheme: dark)').matches; + const currentTheme = localStorage?.getItem('theme'); + let theme; + + if (!currentTheme) localStorage?.setItem('theme', (prefersDarkScheme ? 'dark' : 'light')) + + if (currentTheme === 'dark') { + document.body.classList.toggle('theme__dark'); + } else if (currentTheme === 'light') { + document.body.classList.toggle('theme__light'); + } + + btn.addEventListener('click', () => { + console.log(prefersDarkScheme) + if (prefersDarkScheme) { + document.body.classList.toggle('theme__light'); + theme = document.body.classList.contains('theme__light') ? 'light' : 'dark'; + } else { + document.body.classList.toggle('theme__dark'); + theme = document.body.classList.contains('theme__dark') ? 'dark' : 'light'; + } + localStorage?.setItem('theme', theme); + }); +})() \ No newline at end of file diff --git a/src/assets/styles/index.css b/src/assets/styles/index.css index 19214d28..9f349fcf 100644 --- a/src/assets/styles/index.css +++ b/src/assets/styles/index.css @@ -195,7 +195,9 @@ nav svg { :is(a:hover, a:active, a:focus) svg, a svg:hover, a svg:active, -a svg:focus { +a svg:focus, +.theme__toggle:hover, +.theme__toggle svg:hover { stroke-width: var(--stroke-width-bold); } @@ -485,6 +487,28 @@ footer nav { justify-content: center; } +/* theme toggle */ +.theme__toggle, +.theme__toggle svg{ + cursor: pointer; +} + +.theme__dark .theme__toggle > .light { + display: inline; +} + +.theme__dark .theme__toggle > .dark { + display: none; +} + +.theme__toggle > .light { + display: none; +} + +.theme__toggle > .dark { + display: inline; +} + /* screens: md */ @media screen and (min-width: 768px) { .main__title { diff --git a/src/assets/styles/partials/vars.css b/src/assets/styles/partials/vars.css index eeb273e7..d3fbe26c 100644 --- a/src/assets/styles/partials/vars.css +++ b/src/assets/styles/partials/vars.css @@ -113,6 +113,19 @@ } } +:root body.theme__dark { + --text-color: var(--white); + --background-color: var(--black); + --text-color-inverted: var(--black); + --background-color-inverted: var(--white); + --accent-color: var(--blue-400); + --accent-color-hover: var(--blue-200); + --gray-light: var(--gray-900); + --gray-lighter: var(--gray-950); + --gray-dark: var(--gray-300); + --brand-github: #f5f5f5; +} + @media (prefers-reduced-motion) { :root { --transition-duration-default: 0.01ms;