Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/alexfigliolia/galena-dark-mode
A Dark Mode Manager for Galena Apps
https://github.com/alexfigliolia/galena-dark-mode
dark-mode galena react state
Last synced: about 2 months ago
JSON representation
A Dark Mode Manager for Galena Apps
- Host: GitHub
- URL: https://github.com/alexfigliolia/galena-dark-mode
- Owner: alexfigliolia
- Created: 2024-08-02T19:33:02.000Z (5 months ago)
- Default Branch: main
- Last Pushed: 2024-08-07T01:16:36.000Z (5 months ago)
- Last Synced: 2024-10-07T02:35:58.280Z (3 months ago)
- Topics: dark-mode, galena, react, state
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/@figliolia/galena-dark-mode
- Size: 1.38 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Galena Dark Mode
A Dark Mode manager for [Galena](https://www.npmjs.com/package/@figliolia/galena) Apps. Effortlessly manage dark/light mode themes!
## Installation
```
npm i @figliolia/galena @figliolia/galena-dark-mode
# or
yarn add @figliolia/galena @figliolia/galena-dark-mode
```
## Basic Usage
```typescript
// Theme.ts
import { DarkModeManager } from "@figliolia/galena-dark-mode";
export const Theme = new DarkModeManager(
initialTheme /* light by default */,
theme => {
// Optional callback to execute when theme changes
});
// Begin listening for changes to user operating system preferences
Theme.initialize();
// Toggle between Dark and Light Theme
Theme.toggle();
// Set Dark or Light Mode
Theme.set("");
// Listen for changes to the Theme State
Theme.subscribe(({ theme }) => {
// Your logic
})
// Clean up and remove operating system listeners
Theme.destroy();
```
## Targetting Your Theme with CSS
By default, the `DarkModeManager` will add a `[data-theme]` attribute to the HTML document whenever the theme changes. The value associated with `[data-theme]` will be 'light' or 'dark'.
`[data-theme]` can be targetted in your CSS using:
```css
:root {
--background: #fff;
--text-color: #292929;
/* ...and so on */
}
html[data-theme='dark'] {
--background: #292929;
--text-color: #fff;
/* ...and so on */
}
```
## Integrating With React Apps
### Installation
```bash
npm i @figliolia/react-galena
# or
yarn add @figliolia/react-galena
```
### Basc Usage
The when calling `new DarkModeManager()`, a `State` instance is returned. You can generate `useState` and `useMutation` hooks using:
```typescript
// Theme.ts
import { DarkModeManager } from "@figliolia/galena-dark-mode";
import { createUseState, createUseMutation } from "@figliolia/react-galena";
export const Theme = new DarkModeManager();
export const useTheme = createUseState(Theme);
export const useThemeMutation = createUseMutation(Theme);
```
You can also initialize and destroy your theme instance in your root component:
```tsx
// App.tsx
import { memo } from "react";
import { useSetup } from "@figliolia/galena-dark-mode";
import { Theme, useTheme } from "./Theme";
export const App = memo(function App() {
// Initialize!
useSetup(Theme);
// Get the current theme
const theme = useTheme(({ theme }) => theme);
return (
<>
The Current Theme: {theme}
Go {theme === "dark" ? "Light" : "Dark"}
>
);
})
```
### Demo
The following demo uses CSS Custom properties for a smooth transition between themes. This feature is not available in all browsers, but [baseline support](https://caniuse.com/?search=css%20custom%20properties) is growing.
