Brief: Implement a dark mode toggle feature for a client named “Night Owl,” who wants their app to have both light and dark themes. Design the theme to switch between light mode (background #ffffff, text #333333) and dark mode (background #333333, text #ffffff) using a toggle button. Make use of CSS variables for easy theme changes, and ensure the transition is smooth and visually pleasing.
Requirements:
Toggle Button: Positioned in the top-right, switches between light and dark themes.
Theme Variables: Use CSS custom properties for background and text colors.
Typography: Headings in Roboto Bold, size 24px, body text in Arial, size 16px.
JavaScript Logic: Event listener to handle theme switching and store the selected mode in localStorage. kindly check this file for more details https://docs.google.com/document/d/1zFyUolm9MIj7yJaM1NDm1RZfQrG_oZh6PZRzICz4HCE/edit?usp=sharing