[READ-ONLY] Mirror of https://github.com/flo-bit/ui-kit. 🦊 fox ui, svelte 5 and tailwind 4
flo-bit.dev/ui-kit/
svelte
tailwindcss
ui-components
update philosophy
+7
-9
+7
-9
apps/docs/src/routes/(main)/docs/philosophy/Philosophy.md
+7
-9
apps/docs/src/routes/(main)/docs/philosophy/Philosophy.md
···
50
50
Also all components should be accessible (to the best of my knowledge).
51
51
Please let me know [if you find any issues there](https://github.com/flo-bit/ui-kit/issues).
52
52
53
-
## Dark mode
53
+
### Dark mode
54
54
55
-
This ui kit is designed to be used in both light and dark mode
56
-
(and switch automatically depending on system settings).
57
-
If you want to disable dark mode, add the following to your app.css:
55
+
This ui kit is designed to be used in both light and dark mode, and can be used in the following ways:
58
56
57
+
1. light mode only (default), for dark mode only, add the `dark` class to the `html` element in your app.
58
+
59
+
2. Allow users to switch between modes using the [\<ThemeToggle /\>](/ui-kit/components/core/theme-toggle) component (before being pressed will default mode to system settings).
60
+
61
+
3. automatically chooses the mode based on the system settings, simply remove the following from your app.css:
59
62
```css
60
63
@custom-variant dark (&:is(.dark *));
61
64
```
62
-
63
-
Similarly you can disable light mode:
64
-
65
-
1. Add the above code to your app.css
66
-
2. Add the `dark` class to the `html` element in your app.
67
65
68
66
## Contributing/Feedback
69
67