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

feat: respect system theme for appearance

Browse source
This commit is contained in:
Cory Dransfeldt 2023-07-02 22:00:04 -07:00
parent b45a643ce0
commit 91ad1fcdeb
No known key found for this signature in database
4 changed files with 2 additions and 35 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
src/_includes/base.liquid
View file

@ -53,14 +53,6 @@
href="/follow.xml"
title="Cory Dransfeldt's activity feed"
type="application/rss+xml">
<script>
const isDarkMode = () => localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches);
if (isDarkMode()) {
document.documentElement.classList.add('dark')
} else {
document.documentElement.classList.remove('dark')
}
</script>
<script type="application/ld+json">
{% jsonLd meta, type, tags %}
</script>
@ -69,15 +61,6 @@
<body class="dark:text-white bg-white dark:bg-gray-900 font-sans text-gray-800">
{{ content }}
<script>
document.getElementById("toggleDarkMode").addEventListener("click", function() {
if (isDarkMode()) {
localStorage.theme = 'light'
document.documentElement.classList.remove('dark')
} else {
localStorage.theme = 'dark'
document.documentElement.classList.add('dark')
}
});
(function() {
const pagination = document.getElementById('pagination');
if (pagination) {
@ -95,4 +78,4 @@
})()
</script>
</body>
</html>
</html>

12
src/_includes/icons/toggle-theme.liquid
View file

@ -1,12 +0,0 @@
<div id="toggleDarkMode" class="cursor-pointer">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
class="inline w-6 h-6 outline-current text-gray-700 hover:text-purple-500 dark:text-gray-200 dark:hover:text-purple-500 toggle-light">
<path stroke-linecap="round" stroke-linejoin="round"
d="M12 3v2.25m6.364.386l-1.591 1.591M21 12h-2.25m-.386 6.364l-1.591-1.591M12 18.75V21m-4.773-4.227l-1.591 1.591M5.25 12H3m4.227-4.773L5.636 5.636M15.75 12a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0z"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
class="inline w-6 h-6 outline-current text-gray-700 hover:text-purple-500 dark:text-gray-200 dark:hover:text-purple-500 toggle-dark">
<path stroke-linecap="round" stroke-linejoin="round"
d="M21.752 15.002A9.718 9.718 0 0118 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 003 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 009.002-5.998z"/>
</svg>
</div>

5
src/_includes/nav.liquid
View file

@ -9,11 +9,8 @@
<li class="mr-6">
{% include "icons/tags.liquid" %}
</li>
<li class="mr-6">
{% include "icons/rss.liquid" %}
</li>
<li>
{% include "icons/toggle-theme.liquid" %}
{% include "icons/rss.liquid" %}
</li>
</ul>
</nav>

1
tailwind.config.js
View file

@ -1,7 +1,6 @@
const defaultTheme = require('tailwindcss/defaultTheme')
module.exports = {
darkMode: 'class',
theme: {
extend: {
spacing: {