colors-dark-flip-base.css

What This File Does

This file overrides the base (neutral) scale when dark mode is active.

The scale is flipped so light values become dark values and vice versa.

Because many UI variables rely on the base scale, the interface automatically adapts to dark mode.

Why This Exists

There are two approaches to dark mode in Shilp CSS.

1. Manual Overrides

Using colors-dark.css, you can manually define each role.

Example:

--bg: var(--base-950);
--fg: var(--base-50);

This gives precise control.

2. Scale Flipping

Using colors-dark-flip-base.css, instead of redefining roles, the entire base palette flips.

This is faster and works well when your UI heavily relies on base (neutral) scales.

Example

base.csscopy to clipboard
body {
	background-color: var(--bg);
	color: var(--fg);
}

In light mode, it renders actual values:

body {
	background-color: var(--base-50); /* light color */
	color: var(--base-950); /* dark color */
}

In dark mode with flipped base:

body {
	background-color: var(--base-50); /* dark color */
	color: var(--base-950); /* light color */
}

The style definition stays the same, the final computed value will be changed.

When To Use This File

Use colors-dark-flip-base.css when:

1. your UI relies heavily on base (neutral) scales
2. you want automatic dark palette inversion
3. you prefer minimal configuration

Avoid using this when:

1. you need custom dark colors
2. your UI uses many non-neutral colors

In those cases, prefer colors-dark.css.

Important

style.csscopy to clipboard
/* Shilp CSS styles */

/* Either import this */
@import "shilpcss/styles/colors.css";
/* Or import this */
@import "shilpcss/styles/colors-dark-flip-base.css";

/* Remainig Shilp CSS styles */
/* User styles */

Customization

You can override any color variable in your own styles.

Example:

override-colors-dark-flip-base.csscopy to clipboard
html,
:host {
	/* */

	@theme self-dark {
		/* --surface: var(--black); */
		--surface: var(--base-100);

		/* --border: var(--base-300); */
		--border: var(--base-900);
	}
}

Because components and utilities rely on variables, the entire UI will update automatically.

See: Modifying Default Styles.

colors-dark-flip-base.css Reference

colors-dark-flip-base.csscopy to clipboard
/*

Shilp CSS Dark Theme (Base Scale Flip)

Purpose:
Provide an alternative dark theme strategy by flipping the base (neutral)
color scale used across the system.

Instead of redefining every color role (like `colors-dark.css`), this file
inverts the base scale so light tokens become dark tokens and vice-versa (automatically).

Example scale inversion:
50  ↔ 950
...
500 ↔ 500
...
950 ↔ 50

Because many UI variables depend on the base scale, the interface adapts
to dark mode automatically.

Important:
Do not use this together with `colors-dark.css`. Choose one dark mode strategy.

Customization:
You can override any base token if your design system requires slightly
different dark contrast.

Documentation:
https://shilpcss.com/docs/default-styles/colors-dark-flip-base

*/

/* ============================================================================================= */

.purge-ignore-start {
	all: unset;
}

/* ============================================================================================= */

/* ================================================================================================
	HTML, HOST
================================================================================================ */

/* Define CSS variables with optional value */
html,
:host {
	/* */

	/* ==============================================================================================
		DARK MODE
	============================================================================================== */

	/* dark theme overrides */
	@theme dark-self {
		/*  */

		/* ============================================================================================
			SURFACE COLORS
		============================================================================================ */

		/* Surface color (dark) */
		--surface: var(--black);
		/* Text color on surface (dark) */
		--surface-fg: var(--white);

		/* ============================================================================================
			BASE (NEUTRAL) COLORS FLIPPED
		============================================================================================ */

		/* Base (neutral) color scale (dark) */
		--base-50: theme(colors-slate-950); /* darkest */
		--base-100: theme(colors-slate-900);
		--base-200: theme(colors-slate-800);
		--base-300: theme(colors-slate-700);
		--base-400: theme(colors-slate-600);
		--base-500: theme(colors-slate-500); /* stays the same */
		--base-600: theme(colors-slate-400);
		--base-700: theme(colors-slate-300);
		--base-800: theme(colors-slate-200);
		--base-900: theme(colors-slate-100);
		--base-950: theme(colors-slate-50); /* lightest */
	}
}

/* ============================================================================================= */

.purge-ignore-end {
	all: unset;
}