diff --git a/theme/sl-custom.css b/theme/sl-custom.css
new file mode 100644
index 0000000..5bf3809
--- /dev/null
+++ b/theme/sl-custom.css
@@ -0,0 +1,72 @@
+/* Custom theme for Shoelace components, using HOT CSS */
+
+@import './hot.css';
+/* https://github.com/shoelace-style/shoelace/blob/next/src/themes/light.css */
+@import '@shoelace-style/shoelace/dist/themes/light.css';
+
+/* @import '@shoelace-style/shoelace/dist/themes/dark.css'; */
+/* https://shoelace.style/getting-started/themes#detecting-the-users-color-scheme-preference */
+
+:root,
+:host,
+.sl-theme-light {
+  --sl-color-primary-50: var(--hot-red-50);
+  --sl-color-primary-100: var(--hot-red-100);
+  --sl-color-primary-200: var(--hot-red-200);
+  --sl-color-primary-300: var(--hot-red-300);
+  --sl-color-primary-400: var(--hot-red-400);
+  --sl-color-primary-500: var(--hot-red-500);
+  --sl-color-primary-600: var(--hot-red-600);
+  --sl-color-primary-700: var(--hot-red-700);
+  --sl-color-primary-800: var(--hot-red-800);
+  --sl-color-primary-900: var(--hot-red-900);
+  --sl-color-primary-950: var(--hot-red-900);
+
+  --sl-color-danger-50: var(--hot-darkred-50);
+  --sl-color-danger-100: var(--hot-darkred-100);
+  --sl-color-danger-200: var(--hot-darkred-200);
+  --sl-color-danger-300: var(--hot-darkred-300);
+  --sl-color-danger-400: var(--hot-darkred-400);
+  --sl-color-danger-500: var(--hot-darkred-500);
+  --sl-color-danger-600: var(--hot-darkred-600);
+  --sl-color-danger-700: var(--hot-darkred-700);
+  --sl-color-danger-800: var(--hot-darkred-800);
+  --sl-color-danger-900: var(--hot-darkred-900);
+  --sl-color-danger-950: var(--hot-darkred-900);
+
+  --sl-color-neutral-50: var(--hot-gray-50);
+  --sl-color-neutral-100: var(--hot-gray-100);
+  --sl-color-neutral-200: var(--hot-gray-200);
+  --sl-color-neutral-300: var(--hot-gray-300);
+  --sl-color-neutral-400: var(--hot-gray-400);
+  --sl-color-neutral-500: var(--hot-gray-500);
+  --sl-color-neutral-600: var(--hot-gray-600);
+  --sl-color-neutral-700: var(--hot-gray-700);
+  --sl-color-neutral-800: var(--hot-gray-800);
+  --sl-color-neutral-900: var(--hot-gray-900);
+  --sl-color-neutral-950: var(--hot-gray-900);
+
+  --sl-color-success-50: var(--hot-green-50);
+  --sl-color-success-100: var(--hot-green-100);
+  --sl-color-success-200: var(--hot-green-200);
+  --sl-color-success-300: var(--hot-green-300);
+  --sl-color-success-400: var(--hot-green-400);
+  --sl-color-success-500: var(--hot-green-500);
+  --sl-color-success-600: var(--hot-green-600);
+  --sl-color-success-700: var(--hot-green-700);
+  --sl-color-success-800: var(--hot-green-800);
+  --sl-color-success-900: var(--hot-green-900);
+  --sl-color-success-950: var(--hot-green-900);
+
+  --sl-color-warning-50: var(--hot-yellow-50);
+  --sl-color-warning-100: var(--hot-yellow-100);
+  --sl-color-warning-200: var(--hot-yellow-200);
+  --sl-color-warning-300: var(--hot-yellow-300);
+  --sl-color-warning-400: var(--hot-yellow-400);
+  --sl-color-warning-500: var(--hot-yellow-500);
+  --sl-color-warning-600: var(--hot-yellow-600);
+  --sl-color-warning-700: var(--hot-yellow-700);
+  --sl-color-warning-800: var(--hot-yellow-800);
+  --sl-color-warning-900: var(--hot-yellow-900);
+  --sl-color-warning-950: var(--hot-yellow-900);
+}
\ No newline at end of file