export const ThemeDocs = () => <>

Theme

The theme is powered by CSS variables, allowing to adapt them with ease. It also uses the class names dark-mode and light-mode to allow switching between these modes - even within a container.

Dark mode

For dark/light mode, there is also a little helper function useDarkMode:

    {`useDarkMode(localStorageKey = "COLOR_SCHEME"): [Accessor, Setter]`}

It will first attempt to get a user setting from local storage, then from the browser settings and finally take the initial value, which defaults to false. If you change the browser setting, the changed setting will also take effect if it differs from the current state.

Setting the mode through the setter will store the value in local storage.

Finally, it will automatically set the dark-mode in the document.body if dark mode is set.

Color theme

The color theme consists of the following css variables:

--text
textual content, background for inverted content
--negative-text
textual content for inverted background
--background
default background
--primary
color for action elements like buttons, check marks etc.
--primary-text
textual content within a primary background
--success
background for success messages
--success-text
textual content for success messages without a background
--info
background for informational messages
--info-text
textual content for informational messages without a background
--warning
background for warning messages
--warning-text
textual content for warning messages without a background
--error
background for error messages
--error-text
textual content for error messages without a background
--random-color[1-8]
{" "} randomly colored content, like avatars and tags

To use the random colors, use the getRandom() function and set its value to the data-random attribute to be used with a [data-random="1"] selector.

Stacking context

in order to unify z-index, there are some variables available to stack your components over each other:

--stack-hide
hiding content with a -1 z-index
--stack-base
normal content should have a z-index of 0
--stack-dropdown
content that drops down above the regular content, e.g. menu or a hypothetical custom select component
--stack-sticky
a sticky header or footer
--stack-banner
banners above the header or below the footer
--stack-overlay
the overlay of modals or similar components
--stack-modal
modal content
--stack-bar
bar component content
--stack-skip-link
back-to-top link or similar skip links
--stack-toast
toast content
--stack-tooltip
tooltip content

Other CSS variables

Apart from that, there are sizes and the icon for the breadcrumbs:

--border-radius
default border radius
--round-border
completely round border
--hair-line
fine lines
--normal-line
solid lines
--wide-line
wide lines
--accordion-icon
the default icon for accordion headers
--breadcrumb-icon
the default icon delimiting breadcrumbs
;