A React theme switching library that makes it easy to apply color-blind accessible UI themes
npm install colbrushprotanopia, deuteranopia, tritanopia
@theme syntax supported)
ThemeProvider based on React Context
ThemeSwitcher component included
useTheme() β provides access to theme and language states
js
const { theme, useUpdateTheme, language, useUpdateLanguage } =
useTheme();
`
- theme: currently active theme name
- updateTheme(theme: ThemeType): update the current theme (supports color-blind modes)
- language: current language setting (currently supports Korean and English)
- updateLanguage(language: TLanguage): update the language context
- π§ͺ Customizable color scales and transformation algorithms
---
Installation
`bash
pnpm add colbrush
or
npm install colbrush
`
---
Usage
$3
`css
@theme {
--color-primary-500: #7fe4c1;
--color-secondary-yellow: #fdfa91;
--color-default-gray-500: #c3c3c3;
}
`
$3
Prerequisite: Define your base palette in a CSS file (e.g., src/index.css) using HEX colors (#RRGGBB).
Variables can be declared inside an @theme { ... } block (recommended) or :root { ... }.
Example (src/index.css):
`css
@theme {
--color-primary-500: #7fe4c1;
--color-secondary-yellow: #fdfa91;
--color-default-gray-500: #c3c3c3;
}
`
Then run the generator:
#### Default: reads/writes to src/index.css
`bash
npx colbrush --generate
`
Use a different file (optional):
`bash
npx colbrush --generate --css=path/to/your.css
`
#### Notes
Colbrush now supports all color formats β HEX, RGB, HSL, HWB, LAB, LCH, OKLCH, and named CSS colors.
If --css is omitted, Colbrush uses src/index.css by default.
Generated color-blind variants are appended to the same file below your @theme block.
$3
`
import { ThemeProvider } from 'colbrush/client';
function App() {
return (
);
}
`
$3
`
// index.css
@import 'colbrush/styles.css';
`
$3
`
import { ThemeSwitcher } from 'colbrush/client';
function Settings() {
return (
position="right-bottom"
...
/>
);
}
`
| Prop | Type | Default | Description |
| ----------- | --------------------------------------------------------- | -------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| options? | { key: ThemeKey; label: string; }[] | undefined | Defines the selectable themes shown in the dropdown.
Each object contains:
β’ key: theme identifier (ThemeKey)
β’ label: display name for the theme. |
| position? | left-top / right-top / left-bottom / right-bottom | right-bottom | Determines where the ThemeSwitcher dropdown appears. |
$3
`
import { useTheme } from 'colbrush/client';
export default function TestPage() {
const { theme, updateTheme, language, updateLanguage } = useTheme();
return (
);
}
`
$3
`
import { SimulationFilter } from 'colbrush/devtools';
function App() {
return (
initialMode="normal"
toolbarPosition="left-bottom"
...>
);
}
`
| SimulationFilterProp | Type | Default | Description |
| ------------------------ | --------------------------------------------------------- | ----------------------------- | --------------------------------------------------------------------- |
| initialMode? | none / protanopia / deuteranopia / tritanopia | none | initial simulation mode |
| position? | left-top / right-top / left-bottom / right-bottom | left-bottom | toolbar position |
| allowInProd? | boolean | false | Forces the filter to be available in production (for debugging) |
| storageKey? | string | colbrush-filter | Customizes the localStorage key used to store the simulation state. |
| devHostPattern? | string | localhost / 127 / 192.168.x | Defines a custom regular expression for allowed development hosts. |
Supported Vision Types
| Vision Type | μ€λͺ
|
| --------------- | -------- |
| protanopia | μ μλ§Ή |
| deuteranopia | λ
Ήμλ§Ή |
| tritanopia | μ²μλ§Ή |
CLI (Command-Line Interface)
Description:
Colbrush provides a command-line tool that automatically generates accessibility-optimized color themes for
Protanopia (red-blindness), Deuteranopia (green-blindness), and Tritanopia (blue-blindness)
based on developer-defined CSS variables.
The generated themes are appended directly to the existing CSS file.
$3
| Command | Description |
| --------------------- | ------------------------------------------------------------------------------------------------ |
| colbrush --generate | Generates accessibility color themes for users with color vision deficiencies (default command). |
| colbrush --doctor | Runs a system diagnostic to detect environment or configuration issues. |
| colbrush --help | Displays all available commands and usage options. |
| colbrush --version | Shows the currently installed version of Colbrush (e.g., v1.6.0). |
$3
| Option | Description | Default |
| --------------- | ------------------------------------------------------------------------ | --------------- |
| --css= | Specifies the target CSS file path for theme generation. | src/index.css |
| --no-color | Disables colored output in the CLI. | β |
| --json=