joshuafhiggins/realm-homepage
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #141 from ktz-dev/system-color-preference

Browse Source 
fix: Add use-system-settings color mode and make it the default
This commit is contained in:
mauro 🤙
2024-09-07 13:22:56 +02:00
committed by GitHub
parent 4be115ccc5 be22b3a3d9
commit 1ace81736d
3 changed files with 29 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/app/globals.css
View File

@@ -50,11 +50,11 @@
*/
}
.dark {
[data-theme='dark'], .dark {
--background: 0 0% 0%;
--foreground: 0 0% 98%;
--surface: rgb(23, 23, 23);
--surface: rgb(23, 23, 23);
--card: 0 0% 3.9%;
--card-foreground: 0 0% 98%;

1
src/app/layout.tsx
View File

@@ -30,7 +30,6 @@ export default async function RootLayout({
<body className={inter.className}>
<ThemeProvider
attribute="class"
defaultTheme="dark"
enableSystem
disableTransitionOnChange
>

32
src/components/mode-toggle.tsx
View File

@@ -1,7 +1,7 @@
"use client";
import * as React from "react";
import { MoonIcon, SunIcon } from "@radix-ui/react-icons";
import {useEffect, useState} from "react";
import { MoonIcon, SunIcon, Half2Icon } from "@radix-ui/react-icons";
import { useTheme } from "next-themes";
import { Button } from "./ui/button";
import {
@@ -12,14 +12,36 @@ import {
} from "./ui/dropdown-menu";
export function ModeToggle() {
const [mounted, setMounted] = useState(false);
const { theme, setTheme } = useTheme();
const toggleTheme = () => {
setTheme(theme === "light" ? "dark" : "light");
switch (theme) {
case 'system':
setTheme("dark");
break;
case 'dark':
setTheme("light");
break;
case 'light':
setTheme('system');
break;
}
};
useEffect(() => {
setMounted(true);
}, []);
if (!mounted) {
return null;
}
console.log(theme);
return (
<Button variant="ghost" size="icon" onClick={toggleTheme}>
<SunIcon className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
<MoonIcon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
<Half2Icon className={`${ (theme === 'system') ? 'visible' : 'hidden'} h-[1.2rem] w-[1.2rem]`} />
<SunIcon className={`${ (theme === 'light') ? 'visible' : 'hidden'} h-[1.2rem] w-[1.2rem]`} />
<MoonIcon className={`${ (theme === 'dark') ? 'visible' : 'hidden'} h-[1.2rem] w-[1.2rem]`} />
<span className="sr-only">Toggle theme</span>
</Button>
);