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" href="/follow.xml"
title="Cory Dransfeldt's activity feed" title="Cory Dransfeldt's activity feed"
type="application/rss+xml"> 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"> <script type="application/ld+json">
{% jsonLd meta, type, tags %} {% jsonLd meta, type, tags %}
</script> </script>
@ -69,15 +61,6 @@
<body class="dark:text-white bg-white dark:bg-gray-900 font-sans text-gray-800"> <body class="dark:text-white bg-white dark:bg-gray-900 font-sans text-gray-800">
{{ content }} {{ content }}
<script> <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() { (function() {
const pagination = document.getElementById('pagination'); const pagination = document.getElementById('pagination');
if (pagination) { if (pagination) {
@ -95,4 +78,4 @@
})() })()
</script> </script>
</body> </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"> <li class="mr-6">
{% include "icons/tags.liquid" %} {% include "icons/tags.liquid" %}
</li> </li>
<li class="mr-6">
{% include "icons/rss.liquid" %}
</li>
<li> <li>
{% include "icons/toggle-theme.liquid" %} {% include "icons/rss.liquid" %}
</li> </li>
</ul> </ul>
</nav> </nav>

1
tailwind.config.js
View file

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