CSS variables (and minimal setup) for TextMate web output

macos.css

:root {
	--textColor:                   rgba(0, 0, 0, 1.00);
	--textBackgroundColor:         rgba(255, 255, 255, 1.00);

	--selectedTextColor:           rgba(0, 0, 0, 1.00);
	--selectedTextBackgroundColor: rgba(179, 215, 255, 1.00);

	--linkColor:                   rgba(0, 104, 218, 1.00);
	--headerTextColor:             rgba(0, 0, 0, 0.85);
	--labelColor:                  rgba(0, 0, 0, 0.85);
	--secondaryLabelColor:         rgba(0, 0, 0, 0.50);
	--tertiaryLabelColor:          rgba(0, 0, 0, 0.25);
	--quaternaryLabelColor:        rgba(0, 0, 0, 0.10);
	--placeholderTextColor:        rgba(0, 0, 0, 0.25);

	--oddRowBackgroundColor:       rgba(255, 255, 255, 1.00);
	--evenRowBackgroundColor:      rgba(244, 245, 245, 1.00);

	--separatorColor:              rgba(0, 0, 0, 0.10);
	--gridColor:                   rgba(204, 204, 204, 1.00);

	--systemBlueColor:             rgba(0, 122, 255, 1.00);
	--systemBrownColor:            rgba(162, 132, 94, 1.00);
	--systemGrayColor:             rgba(142, 142, 147, 1.00);
	--systemGreenColor:            rgba(40, 205, 65, 1.00);
	--systemOrangeColor:           rgba(255, 149, 0, 1.00);
	--systemPinkColor:             rgba(255, 45, 85, 1.00);
	--systemPurpleColor:           rgba(175, 82, 222, 1.00);
	--systemRedColor:              rgba(255, 59, 48, 1.00);
	--systemTealColor:             rgba(90, 200, 250, 1.00);
	--systemYellowColor:           rgba(255, 204, 0, 1.00);
}

@media (prefers-color-scheme: dark) {
  :root {
    --textColor:                   rgba(255, 255, 255, 1.00);
    --textBackgroundColor:         rgba(30, 30, 30, 1.00);

    --selectedTextColor:           rgba(255, 255, 255, 1.00);
    --selectedTextBackgroundColor: rgba(63, 99, 139, 1.00);

    --linkColor:                   rgba(65, 156, 255, 1.00);
    --headerTextColor:             rgba(255, 255, 255, 1.00);
    --labelColor:                  rgba(255, 255, 255, 0.85);
    --secondaryLabelColor:         rgba(255, 255, 255, 0.55);
    --tertiaryLabelColor:          rgba(255, 255, 255, 0.25);
    --quaternaryLabelColor:        rgba(255, 255, 255, 0.10);
    --placeholderTextColor:        rgba(255, 255, 255, 0.25);

    --oddRowBackgroundColor:       rgba(30, 30, 30, 1.00);
    --evenRowBackgroundColor:      rgba(255, 255, 255, 0.05);

    --separatorColor:              rgba(255, 255, 255, 0.10);
    --gridColor:                   rgba(255, 255, 255, 0.10);

    --systemBlueColor:             rgba(10, 132, 255, 1.00);
    --systemBrownColor:            rgba(172, 142, 104, 1.00);
    --systemGrayColor:             rgba(152, 152, 157, 1.00);
    --systemGreenColor:            rgba(50, 215, 75, 1.00);
    --systemOrangeColor:           rgba(255, 159, 10, 1.00);
    --systemPinkColor:             rgba(255, 55, 95, 1.00);
    --systemPurpleColor:           rgba(191, 90, 242, 1.00);
    --systemRedColor:              rgba(255, 69, 58, 1.00);
    --systemTealColor:             rgba(100, 210, 255, 1.00);
    --systemYellowColor:           rgba(255, 214, 10, 1.00);
  }
}

:root {
  font-family:      system-ui, -apple-system;
  color:            var(--textColor);
  background-color: var(--textBackgroundColor);
}

a:link    { color: var(--linkColor); }
a:hover   { color: var(--secondaryLabelColor); }
a:active  { color: var(--textColor); }
a:visited { color: var(--tertiaryLabelColor); }