Skip to content

Commit 869534d

Browse files
feat: dark mode
1 parent fea0892 commit 869534d

File tree

1 file changed

+80
-5
lines changed

1 file changed

+80
-5
lines changed

README.md

Lines changed: 80 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,91 @@
11
# AV1-C
22

3-
AV1-C is a library of React UI components for building AV1 products and related projects.
3+
AV1-C is a library of React UI components for building AV1 products and related projects. The component library features seamless light and dark mode support.
44

5-
## Usage
5+
## Installation
6+
7+
```bash
8+
# npm
9+
npm install av1-c
10+
11+
# yarn
12+
yarn add av1-c
13+
14+
# bun
15+
bun add av1-c
16+
```
17+
18+
## Tailwind Setup
19+
20+
AV1-C uses Tailwind CSS for styling. Add the following to your `tailwind.config.js`:
21+
22+
```js
23+
/** @type {import('tailwindcss').Config} */
24+
module.exports = {
25+
darkMode: 'class',
26+
content: [
27+
// ... your existing content
28+
"./node_modules/av1-c/**/*.{js,ts,jsx,tsx}",
29+
],
30+
// ... rest of your config
31+
}
32+
```
33+
34+
## Theme Support
35+
36+
Wrap your application with the ThemeProvider for proper dark/light mode support:
637

738
```tsx
8-
import { CodeEditor } from "av1-c";
39+
import { ThemeProvider } from "av1-c";
40+
41+
function App() {
42+
return (
43+
<ThemeProvider>
44+
<YourApp />
45+
</ThemeProvider>
46+
);
47+
}
48+
```
49+
50+
The ThemeProvider respects system preferences by default, but allows manual override through the useTheme hook:
51+
52+
```tsx
53+
import { useTheme, Button } from "av1-c";
54+
55+
function ThemeToggle() {
56+
const { theme, setTheme } = useTheme();
57+
58+
return (
59+
<Button onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}>
60+
Toggle Theme
61+
</Button>
62+
);
63+
}
964
```
1065

11-
...
66+
## Component Usage
67+
68+
```tsx
69+
import { Card, Button, SchemaEditor } from "av1-c";
70+
71+
function MyComponent() {
72+
return (
73+
<Card>
74+
<Card.Header>
75+
<Card.Title>Example Card</Card.Title>
76+
</Card.Header>
77+
<Card.Content>
78+
Content goes here
79+
</Card.Content>
80+
<Card.Footer>
81+
<Button>Action</Button>
82+
</Card.Footer>
83+
</Card>
84+
);
85+
}
86+
```
1287

13-
see the [docs](https://av1-c.up.railway.app/) for more information.
88+
For complete documentation and examples, see the [documentation site](https://av1-c.up.railway.app/).
1489

1590
## Contributing
1691

0 commit comments

Comments
 (0)