zishuo/chathub
1
0
Fork 0
mirror of https://github.com/chathub-dev/chathub.git synced 2025-09-26 20:31:18 +08:00
Code Issues Packages Projects Releases Wiki Activity

Refactor dark mode styles

Browse Source
This commit is contained in:
wong2
2023-04-06 12:02:01 +08:00
parent cb3df49d8d
commit 01d2e24127
4 changed files with 46 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
app.html
View File

@@ -4,6 +4,7 @@
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta content="width=device-width,initial-scale=1.0" name="viewport" /> <meta content="width=device-width,initial-scale=1.0" name="viewport" />
<title>ChatHub</title> <title>ChatHub</title>
<script type="module" src="./src/app/theme.ts"></script>
</head> </head>
<body> <body>
<div id="app"></div> <div id="app"></div>

52
src/app/base.scss
View File

@@ -32,40 +32,40 @@ body {
font-size: 100%; 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 { @layer base {
:root { :root {
opacity: 0.88; 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'; @import 'highlight.js/scss/github.scss';
} }
@media (prefers-color-scheme: dark) { :root.dark {
@include dark-theme;
@import 'highlight.js/scss/github-dark.scss'; @import 'highlight.js/scss/github-dark.scss';
} }

18
src/app/theme.ts Normal file
View File

@@ -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 {}

1
tailwind.config.cjs
View File

@@ -1,5 +1,6 @@
/** @type {import('tailwindcss').Config} */ /** @type {import('tailwindcss').Config} */
module.exports = { module.exports = {
darkMode: ['class'],
content: ['./src/**/*.{html,ts,tsx}'], content: ['./src/**/*.{html,ts,tsx}'],
theme: { theme: {
extend: { extend: {