The agnostic-astro package utilizes CSS custom properties which can be used to create a fully-branded UI. These custom properties are prefixed with `--agnostic-` which helps to prevent any potential naming collisions with other stylesheets.

By default, AgnosticUI supports light and dark color schemes based on the user's system preferences. See colors.css and notice that we accomplish this by toggling between two variants of the same color reflecting whether light or dark mode has been detected.

A simplified example of how this work follows:

/* First we define values for light and dark modes */
--agnostic-primary-modelight: /* some color value */
--agnostic-primary-modedark: /* some color value */

Later, we will assign these values to --agnostic-primary based on the currently detected color scheme:

/* By default, light mode is assumed */
--agnostic-primary: var(--agnostic-primary-modelight);

/* But, if user's set their OS to prefer dark, we instead use that */
@media (prefers-color-scheme: dark) {
  --agnostic-primary: var(--agnostic-primary-modedark);
}

As such, you should ensure that you have set both the -modelight and -modedark variants of the color being overriden. By doing so, you will avoid inadvertantly breaking color scheme toggling.

See AgnosticUI's main Theming documentation for more comprehensive details.