Components
Charts
Setting UpArea ChartLine ChartBar ChartPie ChartRadar ChartRadial Bar ChartScatter ChartTooltip ChartColors
Color AreaColor FieldColor PickerColor SliderColor SwatchColor Swatch PickerColor ThumbColor WheelDrag and drop
Drop ZoneForms
CheckboxCheckbox GroupFieldFormInput OTPNumber FieldRadio GroupSearch FieldTag FieldText FieldTextareaUtilities
Visually HiddenDark mode
Remix
Ready to remix your project with some dark mode flair? Dive into this guide and get your app groovin’ in the dark.
Remix Themes
Because you are using Remix, you can use remix-themes to implement dark mode. And since you're using justd-icons, you can use the IconSun and IconMoon icons.
After that, we need x files: app/sessions.server.tsx, app/theme-provider.tsx, and /routes/action.set-theme.ts.
Loading source code...
Theme Switcher
And then, we need a theme switcher component. You can do it like this:
Loading source code...
Usage
Then you can wrap your app with the provider. For example if you are using Laravel with Inertia.js, you can put it inside your app.tsx like so:
Loading source code...
If you spot typos or wrong implementations, feel free to contribute here.