- Update body class to use `dark` instead of `light` for dark mode
- Remove `ThemeSwitcher` component as it is no longer needed
- Update global CSS to set dark mode styles on the `.dark` class instead of `.light`
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 adds a new `HeaderToolbar` component to the `app/page.tsx` file. The toolbar includes links to the English and Russian versions of the blog. This change improves the user experience by providing easy access to the different language versions of the blog.