AderKonstantin/darkwave
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

✨ feat: Implement theme switcher in header

Browse Source 
This commit introduces a theme switcher component in the header, allowing users to toggle between light and dark modes. The changes include:

- Added a new `ThemeSwitcher` component in `components/header/theme-switcher.tsx` that handles the theme switching logic and UI.
- Integrated the `ThemeSwitcher` component into the `HeaderToolbar` component.
- Updated the global CSS file (`app/globals.css`) to include styles for the light mode.
- Initialized the theme based on user's previous preference or system preference.
- Saved the user's theme preference in the browser's local storage for persistence.

These changes provide a better user experience by allowing users to switch between light and dark modes, which can improve readability and accessibility, especially in different lighting conditions.
This commit is contained in:
AderKonstantin
2025-03-26 20:58:40 +03:00
parent 7b97fbe816
commit 5f4b2cf1d5
5 changed files with 92 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
app/globals.css
View File

@@ -1,6 +1,6 @@
@import "tailwindcss";
:root {
/* :root {
--background: #ffffff;
--foreground: #171717;
}
@@ -10,10 +10,14 @@
--background: #0a0a0a;
--foreground: #ededed;
}
}
} */
body {
color: var(--foreground);
background: var(--background);
font-family: "JetBrains Mono", monospace;
}
.light {
@apply bg-black text-white;
}

7
app/layout.tsx
View File

@@ -30,11 +30,8 @@ export const metadata: Metadata = {
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="en">
<body
className={`bg-black text-white font-sans`}
>
<html className="dark" lang="en">
<body className={`bg-black text-white light:bg-white light:text-black font-sans`}>
<div className="text-xl 2xl:mx-64 xl:mx-32 md:mx-6">
<MainHeader />
{children}