The first styles to load in your app should establish the global theme by setting the
--daui- namespaced CSS variables at the
For a custom theme, either load the default theme and then override specific theme CSS variables, or manually set all of the theme CSS variables from scratch.
HTML element class names within components are
daui- namespaced and follow the BEM naming convention. These are private implementation details that may change in semver non major releases and shouldn’t be used by app code.
Most of the components can be customized via
HTML produced by a syntax highlighter that has processed code can be styled with colors that are accessible, match the global theme, and adapt for light and dark mode.
daui--syntax-highlighting-prism class name on a
<code> element, or any of its ancestors.
To avoid using and bundling
babel-plugin-syntax-highlight can be used to transform the code contents of template literals lead by comments specifying a Prism language into syntax highlighting HTML. This is how code examples at this site are done.