Mode Watcher
Simple light/dark mode management for Svelte apps. ←→
Overview:
Mode Watcher is a utility tool designed to manage light and dark mode preferences in SvelteKit apps. It provides a simple way to detect user preferences and automatically apply the appropriate CSS styles to achieve the desired mode. It also allows for customization by allowing users to set a default mode or disable automatic detection.
Features:
- Automatic Mode Detection: The Mode Watcher component automatically detects the user's mode preference and applies the corresponding CSS styles to achieve light or dark mode.
- Operating System Preference Tracking: Mode Watcher can track the operating system's mode preference and apply it if no user preference is set.
- Custom Default Mode: Users can set a default mode for their app instead of relying on automatic detection.
- Toggle Mode Function: Mode Watcher provides a function to toggle between light and dark mode.
- Set Mode Function: Users can set the current mode with the ability to choose between light, dark, or system preferences.
- Reset Mode Function: Mode Watcher allows for resetting the mode to system preferences.
- Mode Store: Mode Watcher provides a readable store that contains the current mode, which can be either light or dark.
- User Preference Store: Mode Watcher includes a writable store to represent the user's mode preferences, which can be light, dark, or the system default.
- Operating System Preference Store: Mode Watcher provides a readable store to represent the operating system's mode preference, which can be light, dark, or undefined if evaluated on the server.
Summary:
Mode Watcher is a useful utility for managing light and dark mode preferences in SvelteKit apps. With its automatic mode detection, customizable options, and convenient functions, it simplifies the process of implementing and managing different modes in your app. The provided stores and functions allow for easy customization and integration with your app's requirements.
- Svelte
Svelte is a modern front-end framework that compiles your code at build time, resulting in smaller and faster applications. It uses a reactive approach to update the DOM, allowing for high performance and a smoother user experience.
- Vite
Vite is a build tool that aims to provide a faster and leaner development experience for modern web projects
- Tailwind
Tailwind CSS is a utility-first CSS framework that provides pre-defined classes for building responsive and customizable user interfaces.
- Dark Mode
Dark mode is a user interface option that uses a dark color scheme instead of light. It reduces eye strain and improves visibility in low-light conditions. Implementing dark mode in a website or application involves updating the styles and color palette to support both light and dark modes.
- Eslint
ESLint is a linter for JavaScript that analyzes code to detect and report on potential problems and errors, as well as enforce consistent code style and best practices, helping developers to write cleaner, more maintainable code.
- Postcss
PostCSS is a popular open-source tool that enables web developers to transform CSS styles with JavaScript plugins. It allows for efficient processing of CSS styles, from applying vendor prefixes to improving browser compatibility, ultimately resulting in cleaner, faster, and more maintainable code.
- Typescript
TypeScript is a superset of JavaScript, providing optional static typing, classes, interfaces, and other features that help developers write more maintainable and scalable code. TypeScript's static typing system can catch errors at compile-time, making it easier to build and maintain large applications.