diff --git a/app.html b/app.html
index 6e70327..db9b141 100644
--- a/app.html
+++ b/app.html
@@ -4,6 +4,7 @@
ChatHub
+
diff --git a/src/app/base.scss b/src/app/base.scss
index 74c21f1..b89bb3a 100644
--- a/src/app/base.scss
+++ b/src/app/base.scss
@@ -32,40 +32,40 @@ body {
font-size: 100%;
}
+@mixin light-theme {
+ color-scheme: light;
+ --color-primary-blue: 73 135 252; // #4987FC
+ --color-secondary: 242 242 242; // #F2F2F2
+ --primary-background: 255 255 255; // #FFFFFF
+ --primary-text: 48 48 48; // #303030
+ --secondary-text: 128 128 128; // #808080
+ --light-text: 190 190 190; // #BEBEBE
+ --primary-border: 237 237 237; // #EDEDED
+}
+
+@mixin dark-theme {
+ color-scheme: dark;
+ --color-primary-blue: 50 104 206; // #3268CE
+ --color-secondary: 46 46 46; // #2E2E2E
+ --primary-background: 25 25 25; // #191919
+ --primary-text: 223 223 223; // #DFDFDF
+ --secondary-text: 127 127 127; // #7F7F7F
+ --light-text: 79 79 79; // #4F4F4F
+ --primary-border: 53 53 53; // #353535
+}
+
@layer base {
:root {
opacity: 0.88;
}
- @media (prefers-color-scheme: light) {
- :root {
- color-scheme: light;
- --color-primary-blue: 73 135 252; // #4987FC
- --color-secondary: 242 242 242; // #F2F2F2
- --primary-background: 255 255 255; // #FFFFFF
- --primary-text: 48 48 48; // #303030
- --secondary-text: 128 128 128; // #808080
- --light-text: 190 190 190; // #BEBEBE
- --primary-border: 237 237 237; // #EDEDED
- }
- }
- @media (prefers-color-scheme: dark) {
- :root {
- color-scheme: dark;
- --color-primary-blue: 50 104 206; // #3268CE
- --color-secondary: 46 46 46; // #2E2E2E
- --primary-background: 25 25 25; // #191919
- --primary-text: 223 223 223; // #DFDFDF
- --secondary-text: 127 127 127; // #7F7F7F
- --light-text: 79 79 79; // #4F4F4F
- --primary-border: 53 53 53; // #353535
- }
- }
}
-@media (prefers-color-scheme: light) {
+:root.light {
+ @include light-theme;
@import 'highlight.js/scss/github.scss';
}
-@media (prefers-color-scheme: dark) {
+:root.dark {
+ @include dark-theme;
@import 'highlight.js/scss/github-dark.scss';
}
diff --git a/src/app/theme.ts b/src/app/theme.ts
new file mode 100644
index 0000000..e2ba57c
--- /dev/null
+++ b/src/app/theme.ts
@@ -0,0 +1,18 @@
+if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
+ document.documentElement.classList.add('dark')
+} else {
+ document.documentElement.classList.add('light')
+}
+
+window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', function (e) {
+ const colorScheme = e.matches ? 'dark' : 'light'
+ if (colorScheme === 'dark') {
+ document.documentElement.classList.remove('light')
+ document.documentElement.classList.add('dark')
+ } else {
+ document.documentElement.classList.remove('dark')
+ document.documentElement.classList.add('light')
+ }
+})
+
+export {}
diff --git a/tailwind.config.cjs b/tailwind.config.cjs
index f113076..0eb3472 100644
--- a/tailwind.config.cjs
+++ b/tailwind.config.cjs
@@ -1,5 +1,6 @@
/** @type {import('tailwindcss').Config} */
module.exports = {
+ darkMode: ['class'],
content: ['./src/**/*.{html,ts,tsx}'],
theme: {
extend: {