gmx.css/dist/theme.css

A micro Material Design 3 based CSS-only framework.

body.red {
  --m3-scheme-primary: rgb(144, 75, 64);
  --m3-scheme-on-primary: rgb(255, 255, 255);
  --m3-scheme-primary-container: rgb(255, 218, 212);
  --m3-scheme-on-primary-container: rgb(115, 52, 42);
  --m3-scheme-inverse-primary: rgb(255, 180, 168);
  --m3-scheme-secondary: rgb(119, 86, 81);
  --m3-scheme-on-secondary: rgb(255, 255, 255);
  --m3-scheme-secondary-container: rgb(255, 218, 212);
  --m3-scheme-on-secondary-container: rgb(93, 63, 59);
  --m3-scheme-tertiary: rgb(112, 92, 46);
  --m3-scheme-on-tertiary: rgb(255, 255, 255);
  --m3-scheme-tertiary-container: rgb(251, 223, 166);
  --m3-scheme-on-tertiary-container: rgb(86, 68, 25);
  --m3-scheme-error: rgb(186, 26, 26);
  --m3-scheme-on-error: rgb(255, 255, 255);
  --m3-scheme-error-container: rgb(255, 218, 214);
  --m3-scheme-on-error-container: rgb(147, 0, 10);
  --m3-scheme-background: rgb(255, 248, 246);
  --m3-scheme-on-background: rgb(35, 25, 24);
  --m3-scheme-surface: rgb(255, 248, 246);
  --m3-scheme-on-surface: rgb(35, 25, 24);
  --m3-scheme-surface-variant: rgb(245, 221, 218);
  --m3-scheme-on-surface-variant: rgb(83, 67, 65);
  --m3-scheme-inverse-surface: rgb(57, 46, 44);
  --m3-scheme-inverse-on-surface: rgb(255, 237, 234);
  --m3-scheme-outline: rgb(133, 115, 112);
  --m3-scheme-outline-variant: rgb(216, 194, 190);
  --m3-scheme-shadow: rgb(0, 0, 0);
  --m3-scheme-scrim: rgb(0, 0, 0);
  --m3-scheme-surface-dim: rgb(232, 214, 211);
  --m3-scheme-surface-bright: rgb(255, 248, 246);
  --m3-scheme-surface-container-lowest: rgb(255, 255, 255);
  --m3-scheme-surface-container-low: rgb(255, 240, 238);
  --m3-scheme-surface-container: rgb(252, 234, 231);
  --m3-scheme-surface-container-high: rgb(247, 228, 225);
  --m3-scheme-surface-container-highest: rgb(241, 223, 220);
  --m3-scheme-surface-tint: rgb(144, 75, 64);
}

body.pink {
  --m3-scheme-primary: rgb(131, 76, 116);
  --m3-scheme-on-primary: rgb(255, 255, 255);
  --m3-scheme-primary-container: rgb(255, 215, 239);
  --m3-scheme-on-primary-container: rgb(105, 53, 91);
  --m3-scheme-inverse-primary: rgb(246, 178, 223);
  --m3-scheme-secondary: rgb(111, 87, 102);
  --m3-scheme-on-secondary: rgb(255, 255, 255);
  --m3-scheme-secondary-container: rgb(250, 218, 236);
  --m3-scheme-on-secondary-container: rgb(86, 64, 78);
  --m3-scheme-tertiary: rgb(129, 83, 64);
  --m3-scheme-on-tertiary: rgb(255, 255, 255);
  --m3-scheme-tertiary-container: rgb(255, 219, 205);
  --m3-scheme-on-tertiary-container: rgb(102, 60, 43);
  --m3-scheme-error: rgb(186, 26, 26);
  --m3-scheme-on-error: rgb(255, 255, 255);
  --m3-scheme-error-container: rgb(255, 218, 214);
  --m3-scheme-on-error-container: rgb(147, 0, 10);
  --m3-scheme-background: rgb(255, 248, 249);
  --m3-scheme-on-background: rgb(32, 26, 30);
  --m3-scheme-surface: rgb(255, 248, 249);
  --m3-scheme-on-surface: rgb(32, 26, 30);
  --m3-scheme-surface-variant: rgb(239, 222, 230);
  --m3-scheme-on-surface-variant: rgb(79, 68, 74);
  --m3-scheme-inverse-surface: rgb(54, 46, 51);
  --m3-scheme-inverse-on-surface: rgb(251, 237, 243);
  --m3-scheme-outline: rgb(129, 115, 122);
  --m3-scheme-outline-variant: rgb(210, 194, 202);
  --m3-scheme-shadow: rgb(0, 0, 0);
  --m3-scheme-scrim: rgb(0, 0, 0);
  --m3-scheme-surface-dim: rgb(228, 215, 220);
  --m3-scheme-surface-bright: rgb(255, 248, 249);
  --m3-scheme-surface-container-lowest: rgb(255, 255, 255);
  --m3-scheme-surface-container-low: rgb(254, 240, 246);
  --m3-scheme-surface-container: rgb(248, 234, 240);
  --m3-scheme-surface-container-high: rgb(242, 229, 234);
  --m3-scheme-surface-container-highest: rgb(236, 223, 229);
  --m3-scheme-surface-tint: rgb(131, 76, 116);
}

body.purple {
  --m3-scheme-primary: rgb(101, 85, 143);
  --m3-scheme-on-primary: rgb(255, 255, 255);
  --m3-scheme-primary-container: rgb(233, 221, 255);
  --m3-scheme-on-primary-container: rgb(32, 16, 71);
  --m3-scheme-inverse-primary: rgb(207, 189, 254);
  --m3-scheme-secondary: rgb(98, 91, 113);
  --m3-scheme-on-secondary: rgb(255, 255, 255);
  --m3-scheme-secondary-container: rgb(232, 222, 248);
  --m3-scheme-on-secondary-container: rgb(30, 25, 43);
  --m3-scheme-tertiary: rgb(126, 82, 96);
  --m3-scheme-on-tertiary: rgb(255, 255, 255);
  --m3-scheme-tertiary-container: rgb(255, 217, 227);
  --m3-scheme-on-tertiary-container: rgb(49, 16, 29);
  --m3-scheme-error: rgb(186, 26, 26);
  --m3-scheme-on-error: rgb(255, 255, 255);
  --m3-scheme-error-container: rgb(255, 218, 214);
  --m3-scheme-on-error-container: rgb(65, 0, 2);
  --m3-scheme-background: rgb(253, 247, 255);
  --m3-scheme-on-background: rgb(29, 27, 32);
  --m3-scheme-surface: rgb(253, 247, 255);
  --m3-scheme-on-surface: rgb(29, 27, 32);
  --m3-scheme-surface-variant: rgb(231, 224, 235);
  --m3-scheme-on-surface-variant: rgb(73, 69, 78);
  --m3-scheme-inverse-surface: rgb(50, 47, 53);
  --m3-scheme-inverse-on-surface: rgb(245, 239, 247);
  --m3-scheme-outline: rgb(122, 117, 127);
  --m3-scheme-outline-variant: rgb(202, 196, 207);
  --m3-scheme-shadow: rgb(0, 0, 0);
  --m3-scheme-scrim: rgb(0, 0, 0);
  --m3-scheme-surface-dim: rgb(222, 216, 224);
  --m3-scheme-surface-bright: rgb(253, 247, 255);
  --m3-scheme-surface-container-lowest: rgb(255, 255, 255);
  --m3-scheme-surface-container-low: rgb(248, 242, 250);
  --m3-scheme-surface-container: rgb(242, 236, 244);
  --m3-scheme-surface-container-high: rgb(236, 230, 238);
  --m3-scheme-surface-container-highest: rgb(230, 224, 233);
  --m3-scheme-surface-tint: rgb(101, 85, 143);
}

body.indigo {
  --m3-scheme-primary: rgb(86, 89, 146);
  --m3-scheme-on-primary: rgb(255, 255, 255);
  --m3-scheme-primary-container: rgb(224, 224, 255);
  --m3-scheme-on-primary-container: rgb(62, 66, 120);
  --m3-scheme-inverse-primary: rgb(191, 194, 255);
  --m3-scheme-secondary: rgb(92, 93, 114);
  --m3-scheme-on-secondary: rgb(255, 255, 255);
  --m3-scheme-secondary-container: rgb(225, 224, 249);
  --m3-scheme-on-secondary-container: rgb(68, 69, 89);
  --m3-scheme-tertiary: rgb(120, 83, 106);
  --m3-scheme-on-tertiary: rgb(255, 255, 255);
  --m3-scheme-tertiary-container: rgb(255, 216, 237);
  --m3-scheme-on-tertiary-container: rgb(94, 60, 82);
  --m3-scheme-error: rgb(186, 26, 26);
  --m3-scheme-on-error: rgb(255, 255, 255);
  --m3-scheme-error-container: rgb(255, 218, 214);
  --m3-scheme-on-error-container: rgb(147, 0, 10);
  --m3-scheme-background: rgb(251, 248, 255);
  --m3-scheme-on-background: rgb(27, 27, 33);
  --m3-scheme-surface: rgb(251, 248, 255);
  --m3-scheme-on-surface: rgb(27, 27, 33);
  --m3-scheme-surface-variant: rgb(228, 225, 236);
  --m3-scheme-on-surface-variant: rgb(70, 70, 79);
  --m3-scheme-inverse-surface: rgb(48, 48, 54);
  --m3-scheme-inverse-on-surface: rgb(243, 239, 247);
  --m3-scheme-outline: rgb(119, 118, 128);
  --m3-scheme-outline-variant: rgb(199, 197, 208);
  --m3-scheme-shadow: rgb(0, 0, 0);
  --m3-scheme-scrim: rgb(0, 0, 0);
  --m3-scheme-surface-dim: rgb(220, 217, 224);
  --m3-scheme-surface-bright: rgb(251, 248, 255);
  --m3-scheme-surface-container-lowest: rgb(255, 255, 255);
  --m3-scheme-surface-container-low: rgb(245, 242, 250);
  --m3-scheme-surface-container: rgb(240, 236, 244);
  --m3-scheme-surface-container-high: rgb(234, 231, 239);
  --m3-scheme-surface-container-highest: rgb(228, 225, 233);
  --m3-scheme-surface-tint: rgb(86, 89, 146);
}

body.blue {
  --m3-scheme-primary: rgb(58, 96, 143);
  --m3-scheme-on-primary: rgb(255, 255, 255);
  --m3-scheme-primary-container: rgb(211, 227, 255);
  --m3-scheme-on-primary-container: rgb(32, 72, 118);
  --m3-scheme-inverse-primary: rgb(164, 201, 254);
  --m3-scheme-secondary: rgb(84, 95, 113);
  --m3-scheme-on-secondary: rgb(255, 255, 255);
  --m3-scheme-secondary-container: rgb(216, 227, 248);
  --m3-scheme-on-secondary-container: rgb(60, 71, 88);
  --m3-scheme-tertiary: rgb(109, 86, 119);
  --m3-scheme-on-tertiary: rgb(255, 255, 255);
  --m3-scheme-tertiary-container: rgb(246, 217, 255);
  --m3-scheme-on-tertiary-container: rgb(84, 63, 94);
  --m3-scheme-error: rgb(186, 26, 26);
  --m3-scheme-on-error: rgb(255, 255, 255);
  --m3-scheme-error-container: rgb(255, 218, 214);
  --m3-scheme-on-error-container: rgb(147, 0, 10);
  --m3-scheme-background: rgb(248, 249, 255);
  --m3-scheme-on-background: rgb(25, 28, 32);
  --m3-scheme-surface: rgb(248, 249, 255);
  --m3-scheme-on-surface: rgb(25, 28, 32);
  --m3-scheme-surface-variant: rgb(223, 226, 235);
  --m3-scheme-on-surface-variant: rgb(67, 71, 78);
  --m3-scheme-inverse-surface: rgb(46, 48, 53);
  --m3-scheme-inverse-on-surface: rgb(239, 240, 247);
  --m3-scheme-outline: rgb(115, 119, 127);
  --m3-scheme-outline-variant: rgb(195, 198, 207);
  --m3-scheme-shadow: rgb(0, 0, 0);
  --m3-scheme-scrim: rgb(0, 0, 0);
  --m3-scheme-surface-dim: rgb(217, 218, 224);
  --m3-scheme-surface-bright: rgb(248, 249, 255);
  --m3-scheme-surface-container-lowest: rgb(255, 255, 255);
  --m3-scheme-surface-container-low: rgb(242, 243, 250);
  --m3-scheme-surface-container: rgb(237, 237, 244);
  --m3-scheme-surface-container-high: rgb(231, 232, 238);
  --m3-scheme-surface-container-highest: rgb(225, 226, 233);
  --m3-scheme-surface-tint: rgb(58, 96, 143);
}

body.cyan {
  --m3-scheme-primary: rgb(0, 105, 113);
  --m3-scheme-on-primary: rgb(255, 255, 255);
  --m3-scheme-primary-container: rgb(157, 240, 249);
  --m3-scheme-on-primary-container: rgb(0, 79, 85);
  --m3-scheme-inverse-primary: rgb(129, 212, 221);
  --m3-scheme-secondary: rgb(74, 99, 101);
  --m3-scheme-on-secondary: rgb(255, 255, 255);
  --m3-scheme-secondary-container: rgb(204, 231, 235);
  --m3-scheme-on-secondary-container: rgb(50, 75, 78);
  --m3-scheme-tertiary: rgb(80, 94, 125);
  --m3-scheme-on-tertiary: rgb(255, 255, 255);
  --m3-scheme-tertiary-container: rgb(216, 226, 255);
  --m3-scheme-on-tertiary-container: rgb(56, 71, 100);
  --m3-scheme-error: rgb(186, 26, 26);
  --m3-scheme-on-error: rgb(255, 255, 255);
  --m3-scheme-error-container: rgb(255, 218, 214);
  --m3-scheme-on-error-container: rgb(147, 0, 10);
  --m3-scheme-background: rgb(245, 250, 251);
  --m3-scheme-on-background: rgb(22, 29, 29);
  --m3-scheme-surface: rgb(245, 250, 251);
  --m3-scheme-on-surface: rgb(22, 29, 29);
  --m3-scheme-surface-variant: rgb(218, 228, 229);
  --m3-scheme-on-surface-variant: rgb(63, 72, 74);
  --m3-scheme-inverse-surface: rgb(43, 49, 50);
  --m3-scheme-inverse-on-surface: rgb(236, 242, 242);
  --m3-scheme-outline: rgb(111, 121, 122);
  --m3-scheme-outline-variant: rgb(190, 200, 201);
  --m3-scheme-shadow: rgb(0, 0, 0);
  --m3-scheme-scrim: rgb(0, 0, 0);
  --m3-scheme-surface-dim: rgb(213, 219, 220);
  --m3-scheme-surface-bright: rgb(245, 250, 251);
  --m3-scheme-surface-container-lowest: rgb(255, 255, 255);
  --m3-scheme-surface-container-low: rgb(239, 245, 245);
  --m3-scheme-surface-container: rgb(233, 239, 239);
  --m3-scheme-surface-container-high: rgb(227, 233, 234);
  --m3-scheme-surface-container-highest: rgb(222, 228, 228);
  --m3-scheme-surface-tint: rgb(0, 105, 113);
}

body.teal {
  --m3-scheme-primary: rgb(20, 107, 85);
  --m3-scheme-on-primary: rgb(255, 255, 255);
  --m3-scheme-primary-container: rgb(163, 242, 214);
  --m3-scheme-on-primary-container: rgb(0, 81, 63);
  --m3-scheme-inverse-primary: rgb(136, 214, 187);
  --m3-scheme-secondary: rgb(75, 99, 90);
  --m3-scheme-on-secondary: rgb(255, 255, 255);
  --m3-scheme-secondary-container: rgb(206, 233, 221);
  --m3-scheme-on-secondary-container: rgb(52, 76, 67);
  --m3-scheme-tertiary: rgb(64, 99, 118);
  --m3-scheme-on-tertiary: rgb(255, 255, 255);
  --m3-scheme-tertiary-container: rgb(195, 232, 254);
  --m3-scheme-on-tertiary-container: rgb(39, 75, 93);
  --m3-scheme-error: rgb(186, 26, 26);
  --m3-scheme-on-error: rgb(255, 255, 255);
  --m3-scheme-error-container: rgb(255, 218, 214);
  --m3-scheme-on-error-container: rgb(147, 0, 10);
  --m3-scheme-background: rgb(245, 251, 246);
  --m3-scheme-on-background: rgb(23, 29, 26);
  --m3-scheme-surface: rgb(245, 251, 246);
  --m3-scheme-on-surface: rgb(23, 29, 26);
  --m3-scheme-surface-variant: rgb(219, 229, 223);
  --m3-scheme-on-surface-variant: rgb(63, 73, 69);
  --m3-scheme-inverse-surface: rgb(44, 50, 47);
  --m3-scheme-inverse-on-surface: rgb(236, 242, 238);
  --m3-scheme-outline: rgb(112, 121, 116);
  --m3-scheme-outline-variant: rgb(191, 201, 195);
  --m3-scheme-shadow: rgb(0, 0, 0);
  --m3-scheme-scrim: rgb(0, 0, 0);
  --m3-scheme-surface-dim: rgb(213, 219, 215);
  --m3-scheme-surface-bright: rgb(245, 251, 246);
  --m3-scheme-surface-container-lowest: rgb(255, 255, 255);
  --m3-scheme-surface-container-low: rgb(239, 245, 240);
  --m3-scheme-surface-container: rgb(233, 239, 235);
  --m3-scheme-surface-container-high: rgb(228, 234, 229);
  --m3-scheme-surface-container-highest: rgb(222, 228, 223);
  --m3-scheme-surface-tint: rgb(20, 107, 85);
}

body.green {
  --m3-scheme-primary: rgb(59, 105, 57);
  --m3-scheme-on-primary: rgb(255, 255, 255);
  --m3-scheme-primary-container: rgb(188, 240, 180);
  --m3-scheme-on-primary-container: rgb(36, 80, 36);
  --m3-scheme-inverse-primary: rgb(161, 211, 154);
  --m3-scheme-secondary: rgb(82, 99, 79);
  --m3-scheme-on-secondary: rgb(255, 255, 255);
  --m3-scheme-secondary-container: rgb(213, 232, 206);
  --m3-scheme-on-secondary-container: rgb(59, 75, 56);
  --m3-scheme-tertiary: rgb(56, 101, 106);
  --m3-scheme-on-tertiary: rgb(255, 255, 255);
  --m3-scheme-tertiary-container: rgb(188, 235, 240);
  --m3-scheme-on-tertiary-container: rgb(31, 77, 82);
  --m3-scheme-error: rgb(186, 26, 26);
  --m3-scheme-on-error: rgb(255, 255, 255);
  --m3-scheme-error-container: rgb(255, 218, 214);
  --m3-scheme-on-error-container: rgb(147, 0, 10);
  --m3-scheme-background: rgb(247, 251, 241);
  --m3-scheme-on-background: rgb(25, 29, 23);
  --m3-scheme-surface: rgb(247, 251, 241);
  --m3-scheme-on-surface: rgb(25, 29, 23);
  --m3-scheme-surface-variant: rgb(222, 229, 216);
  --m3-scheme-on-surface-variant: rgb(66, 73, 64);
  --m3-scheme-inverse-surface: rgb(45, 50, 44);
  --m3-scheme-inverse-on-surface: rgb(239, 242, 233);
  --m3-scheme-outline: rgb(114, 121, 111);
  --m3-scheme-outline-variant: rgb(194, 201, 189);
  --m3-scheme-shadow: rgb(0, 0, 0);
  --m3-scheme-scrim: rgb(0, 0, 0);
  --m3-scheme-surface-dim: rgb(216, 219, 210);
  --m3-scheme-surface-bright: rgb(247, 251, 241);
  --m3-scheme-surface-container-lowest: rgb(255, 255, 255);
  --m3-scheme-surface-container-low: rgb(241, 245, 235);
  --m3-scheme-surface-container: rgb(236, 239, 230);
  --m3-scheme-surface-container-high: rgb(230, 233, 224);
  --m3-scheme-surface-container-highest: rgb(224, 228, 219);
  --m3-scheme-surface-tint: rgb(59, 105, 57);
}

body.lime {
  --m3-scheme-primary: rgb(77, 102, 43);
  --m3-scheme-on-primary: rgb(255, 255, 255);
  --m3-scheme-primary-container: rgb(206, 237, 162);
  --m3-scheme-on-primary-container: rgb(54, 78, 21);
  --m3-scheme-inverse-primary: rgb(178, 209, 137);
  --m3-scheme-secondary: rgb(88, 98, 73);
  --m3-scheme-on-secondary: rgb(255, 255, 255);
  --m3-scheme-secondary-container: rgb(220, 231, 199);
  --m3-scheme-on-secondary-container: rgb(65, 74, 51);
  --m3-scheme-tertiary: rgb(56, 102, 98);
  --m3-scheme-on-tertiary: rgb(255, 255, 255);
  --m3-scheme-tertiary-container: rgb(188, 236, 231);
  --m3-scheme-on-tertiary-container: rgb(31, 78, 75);
  --m3-scheme-error: rgb(186, 26, 26);
  --m3-scheme-on-error: rgb(255, 255, 255);
  --m3-scheme-error-container: rgb(255, 218, 214);
  --m3-scheme-on-error-container: rgb(147, 0, 10);
  --m3-scheme-background: rgb(249, 250, 239);
  --m3-scheme-on-background: rgb(26, 28, 22);
  --m3-scheme-surface: rgb(249, 250, 239);
  --m3-scheme-on-surface: rgb(26, 28, 22);
  --m3-scheme-surface-variant: rgb(225, 228, 213);
  --m3-scheme-on-surface-variant: rgb(68, 72, 61);
  --m3-scheme-inverse-surface: rgb(47, 49, 42);
  --m3-scheme-inverse-on-surface: rgb(241, 242, 230);
  --m3-scheme-outline: rgb(117, 121, 108);
  --m3-scheme-outline-variant: rgb(197, 200, 185);
  --m3-scheme-shadow: rgb(0, 0, 0);
  --m3-scheme-scrim: rgb(0, 0, 0);
  --m3-scheme-surface-dim: rgb(218, 219, 208);
  --m3-scheme-surface-bright: rgb(249, 250, 239);
  --m3-scheme-surface-container-lowest: rgb(255, 255, 255);
  --m3-scheme-surface-container-low: rgb(244, 244, 233);
  --m3-scheme-surface-container: rgb(238, 239, 227);
  --m3-scheme-surface-container-high: rgb(232, 233, 222);
  --m3-scheme-surface-container-highest: rgb(226, 227, 216);
  --m3-scheme-surface-tint: rgb(77, 102, 43);
}

body.yellow {
  --m3-scheme-primary: rgb(100, 97, 22);
  --m3-scheme-on-primary: rgb(255, 255, 255);
  --m3-scheme-primary-container: rgb(235, 230, 141);
  --m3-scheme-on-primary-container: rgb(75, 73, 0);
  --m3-scheme-inverse-primary: rgb(206, 202, 116);
  --m3-scheme-secondary: rgb(98, 96, 66);
  --m3-scheme-on-secondary: rgb(255, 255, 255);
  --m3-scheme-secondary-container: rgb(232, 228, 190);
  --m3-scheme-on-secondary-container: rgb(73, 72, 44);
  --m3-scheme-tertiary: rgb(62, 102, 85);
  --m3-scheme-on-tertiary: rgb(255, 255, 255);
  --m3-scheme-tertiary-container: rgb(192, 236, 214);
  --m3-scheme-on-tertiary-container: rgb(38, 78, 62);
  --m3-scheme-error: rgb(186, 26, 26);
  --m3-scheme-on-error: rgb(255, 255, 255);
  --m3-scheme-error-container: rgb(255, 218, 214);
  --m3-scheme-on-error-container: rgb(147, 0, 10);
  --m3-scheme-background: rgb(254, 249, 236);
  --m3-scheme-on-background: rgb(29, 28, 20);
  --m3-scheme-surface: rgb(254, 249, 236);
  --m3-scheme-on-surface: rgb(29, 28, 20);
  --m3-scheme-surface-variant: rgb(231, 227, 209);
  --m3-scheme-on-surface-variant: rgb(73, 71, 58);
  --m3-scheme-inverse-surface: rgb(50, 49, 40);
  --m3-scheme-inverse-on-surface: rgb(245, 241, 227);
  --m3-scheme-outline: rgb(122, 119, 104);
  --m3-scheme-outline-variant: rgb(202, 199, 181);
  --m3-scheme-shadow: rgb(0, 0, 0);
  --m3-scheme-scrim: rgb(0, 0, 0);
  --m3-scheme-surface-dim: rgb(222, 218, 205);
  --m3-scheme-surface-bright: rgb(254, 249, 236);
  --m3-scheme-surface-container-lowest: rgb(255, 255, 255);
  --m3-scheme-surface-container-low: rgb(248, 244, 230);
  --m3-scheme-surface-container: rgb(242, 238, 224);
  --m3-scheme-surface-container-high: rgb(236, 232, 219);
  --m3-scheme-surface-container-highest: rgb(230, 226, 213);
  --m3-scheme-surface-tint: rgb(100, 97, 22);
}

body.amber {
  --m3-scheme-primary: rgb(111, 93, 13);
  --m3-scheme-on-primary: rgb(255, 255, 255);
  --m3-scheme-primary-container: rgb(251, 225, 134);
  --m3-scheme-on-primary-container: rgb(85, 69, 0);
  --m3-scheme-inverse-primary: rgb(222, 197, 110);
  --m3-scheme-secondary: rgb(103, 94, 64);
  --m3-scheme-on-secondary: rgb(255, 255, 255);
  --m3-scheme-secondary-container: rgb(239, 226, 188);
  --m3-scheme-on-secondary-container: rgb(79, 70, 42);
  --m3-scheme-tertiary: rgb(68, 102, 77);
  --m3-scheme-on-tertiary: rgb(255, 255, 255);
  --m3-scheme-tertiary-container: rgb(198, 236, 204);
  --m3-scheme-on-tertiary-container: rgb(45, 78, 54);
  --m3-scheme-error: rgb(186, 26, 26);
  --m3-scheme-on-error: rgb(255, 255, 255);
  --m3-scheme-error-container: rgb(255, 218, 214);
  --m3-scheme-on-error-container: rgb(147, 0, 10);
  --m3-scheme-background: rgb(255, 248, 239);
  --m3-scheme-on-background: rgb(30, 27, 19);
  --m3-scheme-surface: rgb(255, 248, 239);
  --m3-scheme-on-surface: rgb(30, 27, 19);
  --m3-scheme-surface-variant: rgb(234, 226, 207);
  --m3-scheme-on-surface-variant: rgb(75, 70, 57);
  --m3-scheme-inverse-surface: rgb(51, 48, 39);
  --m3-scheme-inverse-on-surface: rgb(247, 240, 226);
  --m3-scheme-outline: rgb(125, 119, 103);
  --m3-scheme-outline-variant: rgb(206, 198, 180);
  --m3-scheme-shadow: rgb(0, 0, 0);
  --m3-scheme-scrim: rgb(0, 0, 0);
  --m3-scheme-surface-dim: rgb(224, 217, 204);
  --m3-scheme-surface-bright: rgb(255, 248, 239);
  --m3-scheme-surface-container-lowest: rgb(255, 255, 255);
  --m3-scheme-surface-container-low: rgb(250, 243, 229);
  --m3-scheme-surface-container: rgb(245, 237, 223);
  --m3-scheme-surface-container-high: rgb(239, 231, 218);
  --m3-scheme-surface-container-highest: rgb(233, 226, 212);
  --m3-scheme-surface-tint: rgb(111, 93, 13);
}

body.orange {
  --m3-scheme-primary: rgb(121, 89, 12);
  --m3-scheme-on-primary: rgb(255, 255, 255);
  --m3-scheme-primary-container: rgb(255, 222, 164);
  --m3-scheme-on-primary-container: rgb(93, 66, 0);
  --m3-scheme-inverse-primary: rgb(236, 192, 108);
  --m3-scheme-secondary: rgb(108, 92, 63);
  --m3-scheme-on-secondary: rgb(255, 255, 255);
  --m3-scheme-secondary-container: rgb(246, 224, 187);
  --m3-scheme-on-secondary-container: rgb(83, 69, 42);
  --m3-scheme-tertiary: rgb(76, 101, 69);
  --m3-scheme-on-tertiary: rgb(255, 255, 255);
  --m3-scheme-tertiary-container: rgb(206, 235, 194);
  --m3-scheme-on-tertiary-container: rgb(53, 77, 47);
  --m3-scheme-error: rgb(186, 26, 26);
  --m3-scheme-on-error: rgb(255, 255, 255);
  --m3-scheme-error-container: rgb(255, 218, 214);
  --m3-scheme-on-error-container: rgb(147, 0, 10);
  --m3-scheme-background: rgb(255, 248, 243);
  --m3-scheme-on-background: rgb(32, 27, 19);
  --m3-scheme-surface: rgb(255, 248, 243);
  --m3-scheme-on-surface: rgb(32, 27, 19);
  --m3-scheme-surface-variant: rgb(238, 225, 207);
  --m3-scheme-on-surface-variant: rgb(78, 70, 57);
  --m3-scheme-inverse-surface: rgb(53, 48, 39);
  --m3-scheme-inverse-on-surface: rgb(250, 239, 226);
  --m3-scheme-outline: rgb(127, 118, 103);
  --m3-scheme-outline-variant: rgb(209, 197, 180);
  --m3-scheme-shadow: rgb(0, 0, 0);
  --m3-scheme-scrim: rgb(0, 0, 0);
  --m3-scheme-surface-dim: rgb(227, 217, 204);
  --m3-scheme-surface-bright: rgb(255, 248, 243);
  --m3-scheme-surface-container-lowest: rgb(255, 255, 255);
  --m3-scheme-surface-container-low: rgb(253, 242, 229);
  --m3-scheme-surface-container: rgb(247, 236, 223);
  --m3-scheme-surface-container-high: rgb(241, 231, 217);
  --m3-scheme-surface-container-highest: rgb(235, 225, 212);
  --m3-scheme-surface-tint: rgb(121, 89, 12);
}

body.monochrome {
  --m3-scheme-primary: rgb(0, 0, 0);
  --m3-scheme-on-primary: rgb(226, 226, 226);
  --m3-scheme-primary-container: rgb(59, 59, 59);
  --m3-scheme-on-primary-container: rgb(255, 255, 255);
  --m3-scheme-inverse-primary: rgb(198, 198, 198);
  --m3-scheme-secondary: rgb(94, 94, 94);
  --m3-scheme-on-secondary: rgb(255, 255, 255);
  --m3-scheme-secondary-container: rgb(212, 212, 212);
  --m3-scheme-on-secondary-container: rgb(27, 27, 27);
  --m3-scheme-tertiary: rgb(59, 59, 59);
  --m3-scheme-on-tertiary: rgb(226, 226, 226);
  --m3-scheme-tertiary-container: rgb(116, 116, 116);
  --m3-scheme-on-tertiary-container: rgb(255, 255, 255);
  --m3-scheme-error: rgb(186, 26, 26);
  --m3-scheme-on-error: rgb(255, 255, 255);
  --m3-scheme-error-container: rgb(255, 218, 214);
  --m3-scheme-on-error-container: rgb(65, 0, 2);
  --m3-scheme-background: rgb(249, 249, 249);
  --m3-scheme-on-background: rgb(27, 27, 27);
  --m3-scheme-surface: rgb(249, 249, 249);
  --m3-scheme-on-surface: rgb(27, 27, 27);
  --m3-scheme-surface-variant: rgb(226, 226, 226);
  --m3-scheme-on-surface-variant: rgb(71, 71, 71);
  --m3-scheme-inverse-surface: rgb(48, 48, 48);
  --m3-scheme-inverse-on-surface: rgb(241, 241, 241);
  --m3-scheme-outline: rgb(119, 119, 119);
  --m3-scheme-outline-variant: rgb(198, 198, 198);
  --m3-scheme-shadow: rgb(0, 0, 0);
  --m3-scheme-scrim: rgb(0, 0, 0);
  --m3-scheme-surface-dim: rgb(218, 218, 218);
  --m3-scheme-surface-bright: rgb(249, 249, 249);
  --m3-scheme-surface-container-lowest: rgb(255, 255, 255);
  --m3-scheme-surface-container-low: rgb(243, 243, 243);
  --m3-scheme-surface-container: rgb(238, 238, 238);
  --m3-scheme-surface-container-high: rgb(232, 232, 232);
  --m3-scheme-surface-container-highest: rgb(226, 226, 226);
  --m3-scheme-surface-tint: rgb(94, 94, 94);
}