update
This commit is contained in:
+8
-6
@@ -3,7 +3,7 @@
|
||||
<head>
|
||||
<%- include('partials/head') %>
|
||||
</head>
|
||||
<body class="min-h-screen transition-colors duration-300 bg-gray-50 dark:bg-gray-900" id="body">
|
||||
<body class="min-h-screen transition-colors duration-300 bg-gray-50 dark:bg-gray-900 text-gray-900 dark:text-gray-100" id="body">
|
||||
<%- include('partials/header', { hideSettings: true }) %>
|
||||
|
||||
<%
|
||||
@@ -191,23 +191,25 @@
|
||||
|
||||
<script>
|
||||
(function () {
|
||||
const body = document.getElementById('body');
|
||||
// The `dark` class lives on <html> so Tailwind's `.dark .dark:*`
|
||||
// selectors also style the <body> itself.
|
||||
const root = document.documentElement;
|
||||
const dm = localStorage.getItem('darkMode');
|
||||
if (dm === 'enabled' || (!dm && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
|
||||
body.classList.add('dark');
|
||||
root.classList.add('dark');
|
||||
}
|
||||
const toggle = document.getElementById('darkModeToggle');
|
||||
const sun = document.getElementById('sunIcon');
|
||||
const moon = document.getElementById('moonIcon');
|
||||
function sync() {
|
||||
const d = body.classList.contains('dark');
|
||||
const d = root.classList.contains('dark');
|
||||
if (sun) sun.classList.toggle('hidden', d);
|
||||
if (moon) moon.classList.toggle('hidden', !d);
|
||||
}
|
||||
sync();
|
||||
if (toggle) toggle.addEventListener('click', () => {
|
||||
body.classList.toggle('dark');
|
||||
localStorage.setItem('darkMode', body.classList.contains('dark') ? 'enabled' : 'disabled');
|
||||
root.classList.toggle('dark');
|
||||
localStorage.setItem('darkMode', root.classList.contains('dark') ? 'enabled' : 'disabled');
|
||||
sync();
|
||||
});
|
||||
const cy = document.getElementById('currentYear');
|
||||
|
||||
Reference in New Issue
Block a user