Sorry, but you either have no stories or none are selected somehow.
If the problem persists, check the browser console, or the terminal you've run Storybook from.
All "theme" styles can be imported with a single css file:
import '@idesigncode/date-input/theme.css';This single theme.css file uses prefers-color-scheme media queries to automatically implement a light and dark theme.
It also includes a "manual" theme override (for theme toggling) enabled by adding the appropriate :root class.
/*** Automatic theme ***/
@media (prefers-color-scheme: dark) {
:root:not(.dark):not(.light) {
// ...dark CSS variables (see below)
}
}
@media (prefers-color-scheme: light) {
:root:not(.dark):not(.light) {
// ...light CSS variables (see below)
}
}
/*** Manual theme override (JS toggle) ***/
:root.dark {
// ...dark CSS variables (see below)
}
:root.light {
// ...light CSS variables (see below)
}For further control, each theme (without the use of media queries) can be used separately as needed:
import '@idesigncode/date-input/theme.dark.css';
import '@idesigncode/date-input/theme.light.css';Each theme sets the following component specific CSS variables on the body for specific color values:
body {
/* Calendar */
--Calendar_background-color
/* CalendarArrow */
--CalendarArrow-polyline_stroke
--CalendarArrow-polyline_fill
--CalendarArrow-polyline-selected_fill
/* DateInput */
--DateInput_color
/* CalendarTabs */
--CalendarTabs_border-color
--CalendarTabs_background-color
--CalendarTabs-li_background-color
--CalendarTabs-li-selected_background-color
/* Field */
--DateInput_background-color
--DateInput-not-disabled_border-color
--DateInput-not-disabled_background-color
--DateInput-focus_border-color
--DateInput-invalid_border-left-color
/* View */
--View_border-color
/* ViewBody */
--ViewBody-not-Day-before_border-top-color
--ViewBody-dateOption-not-disabled-hover_background-color
--ViewBody-dateOption-selected_background-color
--ViewBody-dateOption-selected_color
--ViewBody-dateOption-selected-not-disabled-hover_background-color
--ViewBody-dateOptionText-current_text-decoration-color
/* ViewWeekDays */
--ViewWeekDays_border-top-color
--ViewWeekDays_border-bottom-color
}