--cad-post-it-lemon-bg--cad-post-it-lemon-inkTheming
Change colors, fonts, and spacing with CSS variables. Use CSS parts to style specific parts of a component.
Choose a theme
Import the theme once. The default is white, regardless of system preferences. Set data-theme="dark" on <html> for dark mode. Remove the attribute or set it to light to return to white.
Color pairs
Each pair defines a background and text color. Change them together and check contrast in both themes.
--cad-post-it-pink-bg--cad-post-it-pink-ink--cad-post-it-mint-bg--cad-post-it-mint-ink--cad-post-it-blue-bg--cad-post-it-blue-ink--cad-post-it-coral-bg--cad-post-it-coral-ink--cad-sticker-violet-bg--cad-sticker-violet-inkOverride variables
Set variables on the page, a container, or one component. Children inherit them.
Use --cad-font-text for reading and UI,--cad-font-hand for annotations, and --cad-font-monofor code. See Typography for the full set.
A locally themed alert
Style public parts
Use ::part() to style the parts listed in each component’s API.
Scrollbars
Import once for blue scrollbars on the page and inside components. Scrolling stays native. Touch devices and high-contrast mode keep platform controls.
Customize --cad-scrollbar-thumb,--cad-scrollbar-thumb-hover,--cad-scrollbar-track, and--cad-scrollbar-size (10px by default). Firefox uses its native thin width and shape.