diff --git a/package.json b/package.json index 7c069c97..ef30dc04 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "coryd.dev", - "version": "6.5.14", + "version": "6.6.0", "description": "The source for my personal site. Built using 11ty and hosted on Netlify.", "type": "module", "scripts": { diff --git a/src/_includes/base.liquid b/src/_includes/base.liquid index 7a9e0d61..e3232cb4 100644 --- a/src/_includes/base.liquid +++ b/src/_includes/base.liquid @@ -13,9 +13,7 @@ @@ -82,28 +80,10 @@ {% endif %} - + - - {% capture theme %} - {% render "../assets/scripts/theme.js" %} - {% endcapture %} - - {{ content }} - {% capture js %} - {% render "../assets/scripts/theme-handler.js" %} - {% endcapture %} - - + {{ content }} \ No newline at end of file diff --git a/src/_includes/partials/nav/theme.liquid b/src/_includes/partials/nav/theme.liquid index 5de2a914..f2038d0e 100644 --- a/src/_includes/partials/nav/theme.liquid +++ b/src/_includes/partials/nav/theme.liquid @@ -1,11 +1,17 @@ -
  • - - {% tablericon "placeholder" "Toggle theme placeholder" %} - - - {% tablericon "sun" "Toggle light theme" %} - - - {% tablericon "moon" "Toggle dark theme" %} - + + +
  • +
    • \ No newline at end of file diff --git a/src/assets/scripts/components/theme-toggle.js b/src/assets/scripts/components/theme-toggle.js new file mode 100644 index 00000000..d552531c --- /dev/null +++ b/src/assets/scripts/components/theme-toggle.js @@ -0,0 +1,61 @@ +const themeToggleTemplate = document.createElement('template') + +themeToggleTemplate.innerHTML = ` + +` + +themeToggleTemplate.id = "theme-toggle-template" + +if (!document.getElementById(themeToggleTemplate.id)) document.body.appendChild(themeToggleTemplate) + +class ThemeToggle extends HTMLElement { + static register(tagName) { + if ("customElements" in window) customElements.define(tagName || "theme-toggle", ThemeToggle) + } + + async connectedCallback() { + this.append(this.template) + const btn = this.querySelector('.theme__toggle') + const setTheme = (isOnLoad) => { + 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 (isOnLoad) { + if (currentTheme === 'dark') { + document.body.classList.add('theme__dark') + } else if (currentTheme === 'light') { + document.body.classList.add('theme__light') + } else if (prefersDarkScheme) { + document.body.classList.add('theme__dark') + } else if (!prefersDarkScheme) { + document.body.classList.add('theme__light') + } + } + if (prefersDarkScheme) { + theme = document.body.classList.contains('theme__light') ? 'light' : 'dark' + } else { + theme = document.body.classList.contains('theme__dark') ? 'dark' : 'light' + } + localStorage?.setItem('theme', theme) + } + + setTheme(true); + + btn.addEventListener('click', () => { + document.body.classList.toggle('theme__light') + document.body.classList.toggle('theme__dark') + setTheme() + }) + } + + get template() { + return document.getElementById(themeToggleTemplate.id).content.cloneNode(true) + } +} + +ThemeToggle.register() \ No newline at end of file diff --git a/src/assets/scripts/theme-handler.js b/src/assets/scripts/theme-handler.js deleted file mode 100644 index e7667eef..00000000 --- a/src/assets/scripts/theme-handler.js +++ /dev/null @@ -1,20 +0,0 @@ -;(async function() { - const btn = document.querySelector('.theme__toggle'); - btn.addEventListener('click', () => { - document.body.classList.toggle('theme__light'); - document.body.classList.toggle('theme__dark'); - - 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 (prefersDarkScheme) { - theme = document.body.classList.contains('theme__light') ? 'light' : 'dark'; - } else { - theme = document.body.classList.contains('theme__dark') ? 'dark' : 'light'; - } - localStorage?.setItem('theme', theme); - }); -})() \ No newline at end of file diff --git a/src/assets/scripts/theme.js b/src/assets/scripts/theme.js deleted file mode 100644 index 55538ecd..00000000 --- a/src/assets/scripts/theme.js +++ /dev/null @@ -1,24 +0,0 @@ -;(function() { - 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.add('theme__dark'); - } else if (currentTheme === 'light') { - document.body.classList.add('theme__light'); - } else if (prefersDarkScheme) { - document.body.classList.add('theme__dark'); - } else if (!prefersDarkScheme) { - document.body.classList.add('theme__light'); - } - - if (prefersDarkScheme) { - theme = document.body.classList.contains('theme__light') ? 'light' : 'dark'; - } else { - theme = document.body.classList.contains('theme__dark') ? 'dark' : 'light'; - } - localStorage?.setItem('theme', theme); -})() \ No newline at end of file