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 content="width=device-width,initial-scale=1.0" name="viewport" />
<title>ChatHub</title>
<script type="module" src="./src/app/theme.ts"></script>
</head>
<body>
<div id="app"></div>

26
src/app/base.scss
View File

@@ -32,12 +32,7 @@ body {
font-size: 100%;
}
@layer base {
:root {
opacity: 0.88;
}
@media (prefers-color-scheme: light) {
:root {
@mixin light-theme {
color-scheme: light;
--color-primary-blue: 73 135 252; // #4987FC
--color-secondary: 242 242 242; // #F2F2F2
@@ -46,10 +41,9 @@ body {
--secondary-text: 128 128 128; // #808080
--light-text: 190 190 190; // #BEBEBE
--primary-border: 237 237 237; // #EDEDED
}
}
@media (prefers-color-scheme: dark) {
:root {
}
@mixin dark-theme {
color-scheme: dark;
--color-primary-blue: 50 104 206; // #3268CE
--color-secondary: 46 46 46; // #2E2E2E
@@ -58,14 +52,20 @@ body {
--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.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';
}

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} */
module.exports = {
darkMode: ['class'],
content: ['./src/**/*.{html,ts,tsx}'],
theme: {
extend: {