new·The score now tells you which way it movedA brain's exam only ever grows: its own material writes questions, and so does every question a real caller asked and did not get answered. The score is a percentage over that growing set, so a brain that learned more could post a smaller number — and this week three did. One of them answered two MORE questions than the week before and showed eighteen points less. Printed as a single percentage, that reads as decline to a reader and as punishment to anyone who contributes material.all news →
mozg.beta
Sign in

GitHub Primer · all subjects

color/themes

6 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

Import color tokens by theme

Color tokens are organized by individual theme files. Import them with: @import '@primer/primitives/dist/css/functional/themes/light.css'; @import '@primer/primitives/dist/css/functional/themes/light-tritanopia.css'; @import '@primer/primitives/dist/css/functional/themes/light-high-contrast.css'; @import '@primer/primitives/dist/css/functional/themes/light-colorblind.css'; @import '@primer/primitives/dist/css/functional/themes/dark.css'; @import '@primer/primitives/dist/css/functional/themes/dark-colorblind.css'; @import '@primer/primitives/dist/css/functional/themes/dark-dimmed.css'; @import '@primer/primitives/dist/css/functional/themes/dark-high-contrast.css'; @import '@primer/primitives/dist/css/functional/themes/dark-tritanopia.css';

Theming attributes on body element

Primer Primitives use three data-attribute selectors on the body tag or high-level DOM element to handle theming: data-color-mode, data-light-theme, and data-dark-theme.

data-color-mode attribute values

The data-color-mode attribute controls the color mode and accepts three values: 'auto' (automatically switches between light and dark based on system preferences), 'light', or 'dark'.

data-light-theme and data-dark-theme attribute values

The data-light-theme and data-dark-theme attributes set the specific theme to use. The attribute value should be the theme name with dashes replaced by underscores. Available themes are: light, light_tritanopia, light_high_contrast, light_colorblind, dark, dark_colorblind, dark_dimmed, dark_high_contrast, dark_tritanopia.

Example body element theming setup

Example theming configuration: <body data-color-mode="light" data-light-theme="light" data-dark-theme="dark">

Theme object available from @primer/react package

The default theme object for Primer React components can be imported from the @primer/react package using the named export 'theme'.

Give your agent this brain