forks
/
amnezia-wg-easy
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge pull request #686 from wg-easy/auto-darkmode 

Add auto dark mode and remove toggle
This commit is contained in:
Peter Lewis 2023-12-21 16:06:06 +00:00 committed by GitHub
parent ae15e1a563 f3e926eabc
commit b9ccbb6353
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 1 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
src/www/index.html
View File

@ -6,13 +6,7 @@
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = {
darkMode: 'class',
}
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')
darkMode: 'media',
}
</script>
<!-- <link href="./css/vendor/tailwind.min.css" rel="stylesheet"> -->
@ -32,22 +26,6 @@
<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-if="authenticated === true">