@ojiepermana/angular-theme 22.0.35 → 22.0.41

package/styles/css/color/cyan.css

@@ -0,0 +1,52 @@
+/**
+ * Accent theme: cyan. Generated by scripts/gen-theme-colors.mjs — do not edit.
+ */
+@layer tokens {
+  html[theme-color='cyan'][data-mode='light'] {
+    --background: 191 26% 98%;
+    --foreground: 191 29% 16%;
+    --surface: 191 30% 95%;
+    --surface-foreground: 191 29% 16%;
+    --card: 0 0% 100%;
+    --card-foreground: 191 29% 16%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 191 29% 16%;
+    --muted: 191 26% 95%;
+    --muted-foreground: 191 17% 40%;
+    --border: 191 26% 87%;
+    --input: 191 26% 87%;
+    --layout-grid-line: 191 26% 82%;
+    --primary: 191 85% 48%;
+    --primary-foreground: 0 0% 100%;
+    --accent: 191 51% 94%;
+    --accent-foreground: 191 85% 32%;
+    --secondary: 191 34% 93%;
+    --secondary-foreground: 191 85% 28%;
+    --ring: 191 85% 48%;
+    --highlight: 191 85% 64%;
+  }
+
+  html[theme-color='cyan'][data-mode='dark'] {
+    --background: 191 26% 8%;
+    --foreground: 191 13% 96%;
+    --surface: 191 21% 12%;
+    --surface-foreground: 191 13% 96%;
+    --card: 191 26% 9%;
+    --card-foreground: 191 13% 96%;
+    --popover: 191 26% 9%;
+    --popover-foreground: 191 13% 96%;
+    --muted: 191 21% 16%;
+    --muted-foreground: 191 17% 64%;
+    --border: 191 21% 18%;
+    --input: 191 21% 18%;
+    --layout-grid-line: 191 21% 23%;
+    --primary: 191 85% 58%;
+    --primary-foreground: 0 0% 100%;
+    --accent: 191 43% 18%;
+    --accent-foreground: 191 68% 80%;
+    --secondary: 191 34% 18%;
+    --secondary-foreground: 191 59% 82%;
+    --ring: 191 85% 58%;
+    --highlight: 191 85% 58%;
+  }
+}

package/styles/css/color/emerald.css

@@ -0,0 +1,52 @@
+/**
+ * Accent theme: emerald. Generated by scripts/gen-theme-colors.mjs — do not edit.
+ */
+@layer tokens {
+  html[theme-color='emerald'][data-mode='light'] {
+    --background: 160 23% 98%;
+    --foreground: 160 28% 16%;
+    --surface: 160 27% 95%;
+    --surface-foreground: 160 28% 16%;
+    --card: 0 0% 100%;
+    --card-foreground: 160 28% 16%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 160 28% 16%;
+    --muted: 160 23% 95%;
+    --muted-foreground: 160 16% 40%;
+    --border: 160 23% 87%;
+    --input: 160 23% 87%;
+    --layout-grid-line: 160 23% 82%;
+    --primary: 160 78% 48%;
+    --primary-foreground: 0 0% 100%;
+    --accent: 160 47% 94%;
+    --accent-foreground: 160 78% 32%;
+    --secondary: 160 31% 93%;
+    --secondary-foreground: 160 78% 28%;
+    --ring: 160 78% 48%;
+    --highlight: 160 78% 64%;
+  }
+
+  html[theme-color='emerald'][data-mode='dark'] {
+    --background: 160 23% 8%;
+    --foreground: 160 12% 96%;
+    --surface: 160 20% 12%;
+    --surface-foreground: 160 12% 96%;
+    --card: 160 23% 9%;
+    --card-foreground: 160 12% 96%;
+    --popover: 160 23% 9%;
+    --popover-foreground: 160 12% 96%;
+    --muted: 160 20% 16%;
+    --muted-foreground: 160 16% 64%;
+    --border: 160 20% 18%;
+    --input: 160 20% 18%;
+    --layout-grid-line: 160 20% 23%;
+    --primary: 160 78% 58%;
+    --primary-foreground: 0 0% 100%;
+    --accent: 160 39% 18%;
+    --accent-foreground: 160 62% 80%;
+    --secondary: 160 31% 18%;
+    --secondary-foreground: 160 55% 82%;
+    --ring: 160 78% 58%;
+    --highlight: 160 78% 58%;
+  }
+}

package/styles/css/color/fuchsia.css

@@ -0,0 +1,52 @@
+/**
+ * Accent theme: fuchsia. Generated by scripts/gen-theme-colors.mjs — do not edit.
+ */
+@layer tokens {
+  html[theme-color='fuchsia'][data-mode='light'] {
+    --background: 292 24% 98%;
+    --foreground: 292 28% 16%;
+    --surface: 292 28% 95%;
+    --surface-foreground: 292 28% 16%;
+    --card: 0 0% 100%;
+    --card-foreground: 292 28% 16%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 292 28% 16%;
+    --muted: 292 24% 95%;
+    --muted-foreground: 292 16% 40%;
+    --border: 292 24% 87%;
+    --input: 292 24% 87%;
+    --layout-grid-line: 292 24% 82%;
+    --primary: 292 80% 48%;
+    --primary-foreground: 0 0% 100%;
+    --accent: 292 48% 94%;
+    --accent-foreground: 292 80% 32%;
+    --secondary: 292 32% 93%;
+    --secondary-foreground: 292 80% 28%;
+    --ring: 292 80% 48%;
+    --highlight: 292 80% 64%;
+  }
+
+  html[theme-color='fuchsia'][data-mode='dark'] {
+    --background: 292 24% 8%;
+    --foreground: 292 12% 96%;
+    --surface: 292 20% 12%;
+    --surface-foreground: 292 12% 96%;
+    --card: 292 24% 9%;
+    --card-foreground: 292 12% 96%;
+    --popover: 292 24% 9%;
+    --popover-foreground: 292 12% 96%;
+    --muted: 292 20% 16%;
+    --muted-foreground: 292 16% 64%;
+    --border: 292 20% 18%;
+    --input: 292 20% 18%;
+    --layout-grid-line: 292 20% 23%;
+    --primary: 292 80% 58%;
+    --primary-foreground: 0 0% 100%;
+    --accent: 292 40% 18%;
+    --accent-foreground: 292 64% 80%;
+    --secondary: 292 32% 18%;
+    --secondary-foreground: 292 56% 82%;
+    --ring: 292 80% 58%;
+    --highlight: 292 80% 58%;
+  }
+}

package/styles/css/color/green.css

@@ -0,0 +1,52 @@
+/**
+ * Accent theme: green. Generated by scripts/gen-theme-colors.mjs — do not edit.
+ */
+@layer tokens {
+  html[theme-color='green'][data-mode='light'] {
+    --background: 142 21% 98%;
+    --foreground: 142 25% 16%;
+    --surface: 142 24% 95%;
+    --surface-foreground: 142 25% 16%;
+    --card: 0 0% 100%;
+    --card-foreground: 142 25% 16%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 142 25% 16%;
+    --muted: 142 21% 95%;
+    --muted-foreground: 142 14% 40%;
+    --border: 142 21% 87%;
+    --input: 142 21% 87%;
+    --layout-grid-line: 142 21% 82%;
+    --primary: 142 69% 48%;
+    --primary-foreground: 0 0% 100%;
+    --accent: 142 41% 94%;
+    --accent-foreground: 142 69% 32%;
+    --secondary: 142 28% 93%;
+    --secondary-foreground: 142 69% 28%;
+    --ring: 142 69% 48%;
+    --highlight: 142 69% 64%;
+  }
+
+  html[theme-color='green'][data-mode='dark'] {
+    --background: 142 21% 8%;
+    --foreground: 142 10% 96%;
+    --surface: 142 17% 12%;
+    --surface-foreground: 142 10% 96%;
+    --card: 142 21% 9%;
+    --card-foreground: 142 10% 96%;
+    --popover: 142 21% 9%;
+    --popover-foreground: 142 10% 96%;
+    --muted: 142 17% 16%;
+    --muted-foreground: 142 14% 64%;
+    --border: 142 17% 18%;
+    --input: 142 17% 18%;
+    --layout-grid-line: 142 17% 23%;
+    --primary: 142 69% 58%;
+    --primary-foreground: 0 0% 100%;
+    --accent: 142 35% 18%;
+    --accent-foreground: 142 55% 80%;
+    --secondary: 142 28% 18%;
+    --secondary-foreground: 142 48% 82%;
+    --ring: 142 69% 58%;
+    --highlight: 142 69% 58%;
+  }
+}

package/styles/css/color/index.css

@@ -0,0 +1,19 @@
+/* Accent palettes (theme-color). Generated index — base = core theme (no file). */
+@import './red.css';
+@import './orange.css';
+@import './amber.css';
+@import './yellow.css';
+@import './lime.css';
+@import './green.css';
+@import './emerald.css';
+@import './teal.css';
+@import './cyan.css';
+@import './sky.css';
+@import './blue.css';
+@import './indigo.css';
+@import './violet.css';
+@import './purple.css';
+@import './fuchsia.css';
+@import './pink.css';
+@import './rose.css';
+@import './brand.css';

package/styles/css/color/indigo.css

@@ -0,0 +1,52 @@
+/**
+ * Accent theme: indigo. Generated by scripts/gen-theme-colors.mjs — do not edit.
+ */
+@layer tokens {
+  html[theme-color='indigo'][data-mode='light'] {
+    --background: 239 23% 98%;
+    --foreground: 239 28% 16%;
+    --surface: 239 27% 95%;
+    --surface-foreground: 239 28% 16%;
+    --card: 0 0% 100%;
+    --card-foreground: 239 28% 16%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 239 28% 16%;
+    --muted: 239 23% 95%;
+    --muted-foreground: 239 16% 40%;
+    --border: 239 23% 87%;
+    --input: 239 23% 87%;
+    --layout-grid-line: 239 23% 82%;
+    --primary: 239 78% 48%;
+    --primary-foreground: 0 0% 100%;
+    --accent: 239 47% 94%;
+    --accent-foreground: 239 78% 32%;
+    --secondary: 239 31% 93%;
+    --secondary-foreground: 239 78% 28%;
+    --ring: 239 78% 48%;
+    --highlight: 239 78% 64%;
+  }
+
+  html[theme-color='indigo'][data-mode='dark'] {
+    --background: 239 23% 8%;
+    --foreground: 239 12% 96%;
+    --surface: 239 20% 12%;
+    --surface-foreground: 239 12% 96%;
+    --card: 239 23% 9%;
+    --card-foreground: 239 12% 96%;
+    --popover: 239 23% 9%;
+    --popover-foreground: 239 12% 96%;
+    --muted: 239 20% 16%;
+    --muted-foreground: 239 16% 64%;
+    --border: 239 20% 18%;
+    --input: 239 20% 18%;
+    --layout-grid-line: 239 20% 23%;
+    --primary: 239 78% 58%;
+    --primary-foreground: 0 0% 100%;
+    --accent: 239 39% 18%;
+    --accent-foreground: 239 62% 80%;
+    --secondary: 239 31% 18%;
+    --secondary-foreground: 239 55% 82%;
+    --ring: 239 78% 58%;
+    --highlight: 239 78% 58%;
+  }
+}

package/styles/css/color/lime.css

@@ -0,0 +1,52 @@
+/**
+ * Accent theme: lime. Generated by scripts/gen-theme-colors.mjs — do not edit.
+ */
+@layer tokens {
+  html[theme-color='lime'][data-mode='light'] {
+    --background: 84 23% 98%;
+    --foreground: 84 28% 16%;
+    --surface: 84 27% 95%;
+    --surface-foreground: 84 28% 16%;
+    --card: 0 0% 100%;
+    --card-foreground: 84 28% 16%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 84 28% 16%;
+    --muted: 84 23% 95%;
+    --muted-foreground: 84 16% 40%;
+    --border: 84 23% 87%;
+    --input: 84 23% 87%;
+    --layout-grid-line: 84 23% 82%;
+    --primary: 84 78% 48%;
+    --primary-foreground: 0 0% 12%;
+    --accent: 84 47% 94%;
+    --accent-foreground: 84 78% 32%;
+    --secondary: 84 31% 93%;
+    --secondary-foreground: 84 78% 28%;
+    --ring: 84 78% 48%;
+    --highlight: 84 78% 64%;
+  }
+
+  html[theme-color='lime'][data-mode='dark'] {
+    --background: 84 23% 8%;
+    --foreground: 84 12% 96%;
+    --surface: 84 20% 12%;
+    --surface-foreground: 84 12% 96%;
+    --card: 84 23% 9%;
+    --card-foreground: 84 12% 96%;
+    --popover: 84 23% 9%;
+    --popover-foreground: 84 12% 96%;
+    --muted: 84 20% 16%;
+    --muted-foreground: 84 16% 64%;
+    --border: 84 20% 18%;
+    --input: 84 20% 18%;
+    --layout-grid-line: 84 20% 23%;
+    --primary: 84 78% 58%;
+    --primary-foreground: 0 0% 10%;
+    --accent: 84 39% 18%;
+    --accent-foreground: 84 62% 80%;
+    --secondary: 84 31% 18%;
+    --secondary-foreground: 84 55% 82%;
+    --ring: 84 78% 58%;
+    --highlight: 84 78% 58%;
+  }
+}

package/styles/css/color/orange.css

@@ -0,0 +1,52 @@
+/**
+ * Accent theme: orange. Generated by scripts/gen-theme-colors.mjs — do not edit.
+ */
+@layer tokens {
+  html[theme-color='orange'][data-mode='light'] {
+    --background: 24 29% 98%;
+    --foreground: 24 32% 16%;
+    --surface: 24 33% 95%;
+    --surface-foreground: 24 32% 16%;
+    --card: 0 0% 100%;
+    --card-foreground: 24 32% 16%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 24 32% 16%;
+    --muted: 24 29% 95%;
+    --muted-foreground: 24 19% 40%;
+    --border: 24 29% 87%;
+    --input: 24 29% 87%;
+    --layout-grid-line: 24 29% 82%;
+    --primary: 24 95% 48%;
+    --primary-foreground: 0 0% 100%;
+    --accent: 24 57% 94%;
+    --accent-foreground: 24 95% 32%;
+    --secondary: 24 38% 93%;
+    --secondary-foreground: 24 95% 28%;
+    --ring: 24 95% 48%;
+    --highlight: 24 95% 64%;
+  }
+
+  html[theme-color='orange'][data-mode='dark'] {
+    --background: 24 29% 8%;
+    --foreground: 24 14% 96%;
+    --surface: 24 24% 12%;
+    --surface-foreground: 24 14% 96%;
+    --card: 24 29% 9%;
+    --card-foreground: 24 14% 96%;
+    --popover: 24 29% 9%;
+    --popover-foreground: 24 14% 96%;
+    --muted: 24 24% 16%;
+    --muted-foreground: 24 19% 64%;
+    --border: 24 24% 18%;
+    --input: 24 24% 18%;
+    --layout-grid-line: 24 24% 23%;
+    --primary: 24 95% 58%;
+    --primary-foreground: 0 0% 100%;
+    --accent: 24 48% 18%;
+    --accent-foreground: 24 76% 80%;
+    --secondary: 24 38% 18%;
+    --secondary-foreground: 24 67% 82%;
+    --ring: 24 95% 58%;
+    --highlight: 24 95% 58%;
+  }
+}

package/styles/css/color/pink.css

@@ -0,0 +1,52 @@
+/**
+ * Accent theme: pink. Generated by scripts/gen-theme-colors.mjs — do not edit.
+ */
+@layer tokens {
+  html[theme-color='pink'][data-mode='light'] {
+    --background: 330 23% 98%;
+    --foreground: 330 28% 16%;
+    --surface: 330 27% 95%;
+    --surface-foreground: 330 28% 16%;
+    --card: 0 0% 100%;
+    --card-foreground: 330 28% 16%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 330 28% 16%;
+    --muted: 330 23% 95%;
+    --muted-foreground: 330 16% 40%;
+    --border: 330 23% 87%;
+    --input: 330 23% 87%;
+    --layout-grid-line: 330 23% 82%;
+    --primary: 330 78% 48%;
+    --primary-foreground: 0 0% 100%;
+    --accent: 330 47% 94%;
+    --accent-foreground: 330 78% 32%;
+    --secondary: 330 31% 93%;
+    --secondary-foreground: 330 78% 28%;
+    --ring: 330 78% 48%;
+    --highlight: 330 78% 64%;
+  }
+
+  html[theme-color='pink'][data-mode='dark'] {
+    --background: 330 23% 8%;
+    --foreground: 330 12% 96%;
+    --surface: 330 20% 12%;
+    --surface-foreground: 330 12% 96%;
+    --card: 330 23% 9%;
+    --card-foreground: 330 12% 96%;
+    --popover: 330 23% 9%;
+    --popover-foreground: 330 12% 96%;
+    --muted: 330 20% 16%;
+    --muted-foreground: 330 16% 64%;
+    --border: 330 20% 18%;
+    --input: 330 20% 18%;
+    --layout-grid-line: 330 20% 23%;
+    --primary: 330 78% 58%;
+    --primary-foreground: 0 0% 100%;
+    --accent: 330 39% 18%;
+    --accent-foreground: 330 62% 80%;
+    --secondary: 330 31% 18%;
+    --secondary-foreground: 330 55% 82%;
+    --ring: 330 78% 58%;
+    --highlight: 330 78% 58%;
+  }
+}

package/styles/css/color/purple.css

@@ -0,0 +1,52 @@
+/**
+ * Accent theme: purple. Generated by scripts/gen-theme-colors.mjs — do not edit.
+ */
+@layer tokens {
+  html[theme-color='purple'][data-mode='light'] {
+    --background: 271 24% 98%;
+    --foreground: 271 28% 16%;
+    --surface: 271 28% 95%;
+    --surface-foreground: 271 28% 16%;
+    --card: 0 0% 100%;
+    --card-foreground: 271 28% 16%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 271 28% 16%;
+    --muted: 271 24% 95%;
+    --muted-foreground: 271 16% 40%;
+    --border: 271 24% 87%;
+    --input: 271 24% 87%;
+    --layout-grid-line: 271 24% 82%;
+    --primary: 271 81% 48%;
+    --primary-foreground: 0 0% 100%;
+    --accent: 271 49% 94%;
+    --accent-foreground: 271 81% 32%;
+    --secondary: 271 32% 93%;
+    --secondary-foreground: 271 81% 28%;
+    --ring: 271 81% 48%;
+    --highlight: 271 81% 64%;
+  }
+
+  html[theme-color='purple'][data-mode='dark'] {
+    --background: 271 24% 8%;
+    --foreground: 271 12% 96%;
+    --surface: 271 20% 12%;
+    --surface-foreground: 271 12% 96%;
+    --card: 271 24% 9%;
+    --card-foreground: 271 12% 96%;
+    --popover: 271 24% 9%;
+    --popover-foreground: 271 12% 96%;
+    --muted: 271 20% 16%;
+    --muted-foreground: 271 16% 64%;
+    --border: 271 20% 18%;
+    --input: 271 20% 18%;
+    --layout-grid-line: 271 20% 23%;
+    --primary: 271 81% 58%;
+    --primary-foreground: 0 0% 100%;
+    --accent: 271 41% 18%;
+    --accent-foreground: 271 65% 80%;
+    --secondary: 271 32% 18%;
+    --secondary-foreground: 271 57% 82%;
+    --ring: 271 81% 58%;
+    --highlight: 271 81% 58%;
+  }
+}

package/styles/css/color/red.css

@@ -0,0 +1,52 @@
+/**
+ * Accent theme: red. Generated by scripts/gen-theme-colors.mjs — do not edit.
+ */
+@layer tokens {
+  html[theme-color='red'][data-mode='light'] {
+    --background: 0 22% 98%;
+    --foreground: 0 26% 16%;
+    --surface: 0 25% 95%;
+    --surface-foreground: 0 26% 16%;
+    --card: 0 0% 100%;
+    --card-foreground: 0 26% 16%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 0 26% 16%;
+    --muted: 0 22% 95%;
+    --muted-foreground: 0 14% 40%;
+    --border: 0 22% 87%;
+    --input: 0 22% 87%;
+    --layout-grid-line: 0 22% 82%;
+    --primary: 0 72% 48%;
+    --primary-foreground: 0 0% 100%;
+    --accent: 0 43% 94%;
+    --accent-foreground: 0 72% 32%;
+    --secondary: 0 29% 93%;
+    --secondary-foreground: 0 72% 28%;
+    --ring: 0 72% 48%;
+    --highlight: 0 72% 64%;
+  }
+
+  html[theme-color='red'][data-mode='dark'] {
+    --background: 0 22% 8%;
+    --foreground: 0 11% 96%;
+    --surface: 0 18% 12%;
+    --surface-foreground: 0 11% 96%;
+    --card: 0 22% 9%;
+    --card-foreground: 0 11% 96%;
+    --popover: 0 22% 9%;
+    --popover-foreground: 0 11% 96%;
+    --muted: 0 18% 16%;
+    --muted-foreground: 0 14% 64%;
+    --border: 0 18% 18%;
+    --input: 0 18% 18%;
+    --layout-grid-line: 0 18% 23%;
+    --primary: 0 72% 58%;
+    --primary-foreground: 0 0% 100%;
+    --accent: 0 36% 18%;
+    --accent-foreground: 0 58% 80%;
+    --secondary: 0 29% 18%;
+    --secondary-foreground: 0 50% 82%;
+    --ring: 0 72% 58%;
+    --highlight: 0 72% 58%;
+  }
+}

package/styles/css/color/rose.css

@@ -0,0 +1,52 @@
+/**
+ * Accent theme: rose. Generated by scripts/gen-theme-colors.mjs — do not edit.
+ */
+@layer tokens {
+  html[theme-color='rose'][data-mode='light'] {
+    --background: 349 25% 98%;
+    --foreground: 349 29% 16%;
+    --surface: 349 29% 95%;
+    --surface-foreground: 349 29% 16%;
+    --card: 0 0% 100%;
+    --card-foreground: 349 29% 16%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 349 29% 16%;
+    --muted: 349 25% 95%;
+    --muted-foreground: 349 17% 40%;
+    --border: 349 25% 87%;
+    --input: 349 25% 87%;
+    --layout-grid-line: 349 25% 82%;
+    --primary: 349 84% 48%;
+    --primary-foreground: 0 0% 100%;
+    --accent: 349 50% 94%;
+    --accent-foreground: 349 84% 32%;
+    --secondary: 349 34% 93%;
+    --secondary-foreground: 349 84% 28%;
+    --ring: 349 84% 48%;
+    --highlight: 349 84% 64%;
+  }
+
+  html[theme-color='rose'][data-mode='dark'] {
+    --background: 349 25% 8%;
+    --foreground: 349 13% 96%;
+    --surface: 349 21% 12%;
+    --surface-foreground: 349 13% 96%;
+    --card: 349 25% 9%;
+    --card-foreground: 349 13% 96%;
+    --popover: 349 25% 9%;
+    --popover-foreground: 349 13% 96%;
+    --muted: 349 21% 16%;
+    --muted-foreground: 349 17% 64%;
+    --border: 349 21% 18%;
+    --input: 349 21% 18%;
+    --layout-grid-line: 349 21% 23%;
+    --primary: 349 84% 58%;
+    --primary-foreground: 0 0% 100%;
+    --accent: 349 42% 18%;
+    --accent-foreground: 349 67% 80%;
+    --secondary: 349 34% 18%;
+    --secondary-foreground: 349 59% 82%;
+    --ring: 349 84% 58%;
+    --highlight: 349 84% 58%;
+  }
+}

package/styles/css/color/sky.css

@@ -0,0 +1,52 @@
+/**
+ * Accent theme: sky. Generated by scripts/gen-theme-colors.mjs — do not edit.
+ */
+@layer tokens {
+  html[theme-color='sky'][data-mode='light'] {
+    --background: 199 27% 98%;
+    --foreground: 199 30% 16%;
+    --surface: 199 31% 95%;
+    --surface-foreground: 199 30% 16%;
+    --card: 0 0% 100%;
+    --card-foreground: 199 30% 16%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 199 30% 16%;
+    --muted: 199 27% 95%;
+    --muted-foreground: 199 18% 40%;
+    --border: 199 27% 87%;
+    --input: 199 27% 87%;
+    --layout-grid-line: 199 27% 82%;
+    --primary: 199 89% 48%;
+    --primary-foreground: 0 0% 100%;
+    --accent: 199 53% 94%;
+    --accent-foreground: 199 89% 32%;
+    --secondary: 199 36% 93%;
+    --secondary-foreground: 199 89% 28%;
+    --ring: 199 89% 48%;
+    --highlight: 199 89% 64%;
+  }
+
+  html[theme-color='sky'][data-mode='dark'] {
+    --background: 199 27% 8%;
+    --foreground: 199 13% 96%;
+    --surface: 199 22% 12%;
+    --surface-foreground: 199 13% 96%;
+    --card: 199 27% 9%;
+    --card-foreground: 199 13% 96%;
+    --popover: 199 27% 9%;
+    --popover-foreground: 199 13% 96%;
+    --muted: 199 22% 16%;
+    --muted-foreground: 199 18% 64%;
+    --border: 199 22% 18%;
+    --input: 199 22% 18%;
+    --layout-grid-line: 199 22% 23%;
+    --primary: 199 89% 58%;
+    --primary-foreground: 0 0% 100%;
+    --accent: 199 45% 18%;
+    --accent-foreground: 199 71% 80%;
+    --secondary: 199 36% 18%;
+    --secondary-foreground: 199 62% 82%;
+    --ring: 199 89% 58%;
+    --highlight: 199 89% 58%;
+  }
+}