5f4b2cf1d5
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.
24 lines
356 B
CSS
24 lines
356 B
CSS
@import "tailwindcss";
|
|
|
|
/* :root {
|
|
--background: #ffffff;
|
|
--foreground: #171717;
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
:root {
|
|
--background: #0a0a0a;
|
|
--foreground: #ededed;
|
|
}
|
|
} */
|
|
|
|
body {
|
|
color: var(--foreground);
|
|
background: var(--background);
|
|
font-family: "JetBrains Mono", monospace;
|
|
}
|
|
|
|
.light {
|
|
@apply bg-black text-white;
|
|
}
|