Browse Source
Update index.html
Switch to using `media` for dark mode.
pull/686/head
Peter Lewis
1 year ago
committed by
GitHub
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with
1 additions and
23 deletions
-
src/www/index.html
|
|
@ -6,13 +6,7 @@ |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<script> |
|
|
<script> |
|
|
tailwind.config = { |
|
|
tailwind.config = { |
|
|
darkMode: 'class', |
|
|
darkMode: 'media', |
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) { |
|
|
|
|
|
document.documentElement.classList.add('dark') |
|
|
|
|
|
} else { |
|
|
|
|
|
document.documentElement.classList.remove('dark') |
|
|
|
|
|
} |
|
|
} |
|
|
</script> |
|
|
</script> |
|
|
<!-- <link href="./css/vendor/tailwind.min.css" rel="stylesheet"> --> |
|
|
<!-- <link href="./css/vendor/tailwind.min.css" rel="stylesheet"> --> |
|
|
@ -32,22 +26,6 @@ |
|
|
|
|
|
|
|
|
<div id="app"> |
|
|
<div id="app"> |
|
|
|
|
|
|
|
|
<div class="flex justify-end"> |
|
|
|
|
|
<button v-cloak id="theme-toggle" @click="toggleTheme" |
|
|
|
|
|
class="mt-5 mr-5 text-gray-500 dark:text-neutral-200 bg-gray-200 dark:bg-neutral-700 hover:bg-gray-300 dark:hover:bg-neutral-600 focus:outline-none rounded-lg text-sm p-2.5 transition"> |
|
|
|
|
|
<svg id="theme-toggle-dark-icon" :class="{ hidden: isDark }" class="w-5 h-5" fill="currentColor" |
|
|
|
|
|
viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"> |
|
|
|
|
|
<path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"></path> |
|
|
|
|
|
</svg> |
|
|
|
|
|
<svg id="theme-toggle-light-icon" :class="{ hidden: !isDark }" class="w-5 h-5" fill="currentColor" |
|
|
|
|
|
viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"> |
|
|
|
|
|
<path fill-rule="evenodd" clip-rule="evenodd" |
|
|
|
|
|
d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z"> |
|
|
|
|
|
</path> |
|
|
|
|
|
</svg> |
|
|
|
|
|
</button> |
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
<div v-cloak class="container mx-auto max-w-3xl px-5 md:px-0"> |
|
|
<div v-cloak class="container mx-auto max-w-3xl px-5 md:px-0"> |
|
|
|
|
|
|
|
|
<div v-if="authenticated === true"> |
|
|
<div v-if="authenticated === true"> |
|
|
|
