aljaz/sendstr-web
1
0
Fork 0
mirror of https://github.com/aljazceru/sendstr-web.git synced 2025-12-17 22:44:28 +01:00
Code Issues Packages Projects Releases Wiki Activity

Changed dark mode switch.

Browse Source
This commit is contained in:
Arne Pedersen
2023-01-01 19:59:53 +01:00
parent d9d1d88a0d
commit be77266d17
1 changed files with 11 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
src/pages/settings/index.tsx
View File

@@ -34,48 +34,24 @@ export default function Settings() {
const ThemeToggle = () => { const ThemeToggle = () => {
if (!mounted) return null if (!mounted) return null
let content: JSX.Element
const currentTheme = theme === "system" ? systemTheme : theme const currentTheme = theme === "system" ? systemTheme : theme
const isDark = currentTheme === "dark" const isDark = currentTheme === "dark"
const toggleHandler = () => setTheme(isDark ? "light" : "dark") const toggleHandler = () => setTheme(isDark ? "light" : "dark")
if (isDark) {
content = (
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="currentColor"
className="w-6 h-6"
>
<title>Theme toggle</title>
<path
fillRule="evenodd"
d="M9.528 1.718a.75.75 0 01.162.819A8.97 8.97 0 009 6a9 9 0 009 9 8.97 8.97 0 003.463-.69.75.75 0 01.981.98 10.503 10.503 0 01-9.694 6.46c-5.799 0-10.5-4.701-10.5-10.5 0-4.368 2.667-8.112 6.46-9.694a.75.75 0 01.818.162z"
clipRule="evenodd"
/>
</svg>
)
} else {
content = (
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="currentColor"
className="w-6 h-6"
>
<title>Theme toggle</title>
<path d="M12 2.25a.75.75 0 01.75.75v2.25a.75.75 0 01-1.5 0V3a.75.75 0 01.75-.75zM7.5 12a4.5 4.5 0 119 0 4.5 4.5 0 01-9 0zM18.894 6.166a.75.75 0 00-1.06-1.06l-1.591 1.59a.75.75 0 101.06 1.061l1.591-1.59zM21.75 12a.75.75 0 01-.75.75h-2.25a.75.75 0 010-1.5H21a.75.75 0 01.75.75zM17.834 18.894a.75.75 0 001.06-1.06l-1.59-1.591a.75.75 0 10-1.061 1.06l1.59 1.591zM12 18a.75.75 0 01.75.75V21a.75.75 0 01-1.5 0v-2.25A.75.75 0 0112 18zM7.758 17.303a.75.75 0 00-1.061-1.06l-1.591 1.59a.75.75 0 001.06 1.061l1.591-1.59zM6 12a.75.75 0 01-.75.75H3a.75.75 0 010-1.5h2.25A.75.75 0 016 12zM6.697 7.757a.75.75 0 001.06-1.06l-1.59-1.591a.75.75 0 00-1.061 1.06l1.59 1.591z" />
</svg>
)
}
return ( return (
<div onClick={toggleHandler} className="cursor-pointer"> <div onClick={toggleHandler} className="cursor-pointer">
<h2 className="text-2xl pb-5">Light mode</h2> <h2 className="text-2xl pb-5">Theme</h2>
<div className="flex justify-between primary-hover"> <div className="flex justify-between">
<p className="lg:text-lg">Toggle</p> <p className="lg:text-lg">Dark mode</p>
{content} <div className="flex justify-center">
<div>
<div className="inline-flex relative items-center cursor-pointer">
<input type="checkbox" value="" className="sr-only peer" checked={isDark} />
<div className="w-11 h-6 bg-gray-300 peer-focus:outline-none peer-focus:ring-4 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-primary"></div>
</div>
</div>
</div>
</div> </div>
</div> </div>
) )