https://github.com/anmiles/theme-switcher
Theme switcher for websites
https://github.com/anmiles/theme-switcher
backend css express frontend javascript jest nodejs react switcher theme typescript vite websites
Last synced: 5 months ago
JSON representation
Theme switcher for websites
- Host: GitHub
- URL: https://github.com/anmiles/theme-switcher
- Owner: anmiles
- License: mit
- Created: 2024-11-30T10:46:24.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-09-19T06:18:03.000Z (9 months ago)
- Last Synced: 2025-09-19T08:28:44.414Z (9 months ago)
- Topics: backend, css, express, frontend, javascript, jest, nodejs, react, switcher, theme, typescript, vite, websites
- Language: TypeScript
- Size: 1.69 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE.md
Awesome Lists containing this project
README
# @anmiles/theme-switcher
Theme switcher for websites
----
## Installation
### For React+TS project
1. Install package:
```bash
npm install @anmiles/theme-switcher
```
2. Import component:
```ts
import { ThemeSwitcher } from '@anmiles/theme-switcher';
```
3. Use component:
```ts
```
where
- `float` _(optional)_ - position of icon and dropdown box
### For static HTML website
1. Install package:
```bash
npm install @anmiles/theme-switcher
```
2. Copy all files from `dist` into the target website.
4. Create HTML container for theme switcher:
```html
```
5. Include React library and theme switcher:
### Development
```html
```
### Production
```html
```
6. Place theme switcher into container:
```html
new ThemeSwitcher({ float: 'right' })
.render(document.querySelector('.my-selector'));
```
where
- `float` _(optional)_ - position of icon and dropdown box
## Usage
Use selectors to write theme-specific styles:
```css
body[data-theme="light"] .selector {
/* css rules */
}
```
```css
body[data-theme="dark"] .selector {
/* css rules */
}
```
Or you can just write default styles for light theme and override them for dark theme using `body[data-theme="dark"]`.