Fix: theme system doesn't switch to dark (#1211)

Author: takuyahara

src/styles.css

@@ -10,7 +10,7 @@
 		color-scheme: light;
 	}
 
-	html[data-theme="dark"] {
+	html[data-theme*="dark"] {
 		color-scheme: dark;
 	}
 
@@ -23,8 +23,8 @@
 		scrollbar-color: #778292 #e7ecf2;
 		scrollbar-width: thin;
 	}
-	html[data-theme="dark"],
-	html[data-theme="dark"] .custom-scrollbar {
+	html[data-theme*="dark"],
+	html[data-theme*="dark"] .custom-scrollbar {
 		scrollbar-color: #8a99ae #313c50;
 		scrollbar-width: thin;
 	}
@@ -133,6 +133,6 @@ html {
 	--twoslash-cursor: #24292E;
 }
 
-html[data-theme="dark"] {
+html[data-theme*="dark"] {
 	--twoslash-cursor: #BABED8;
 }

src/styles/expressive-code.css

@@ -50,7 +50,7 @@ html .expressive-code-overrides .expressive-code .copy button div {
 	--tmLineBrdCol: hsl(222.77deg 38.21% 51.76% / 55.57%);
 }
 
-html[data-theme="dark"]
+html[data-theme*="dark"]
 	.expressive-code-overrides
 	.expressive-code
 	.ec-line.mark {

tailwind.config.ts

@@ -7,7 +7,7 @@ export default {
 		"./src/**/*.{js,jsx,ts,tsx,md,mdx}",
 		"./content/**/*.{js,jsx,ts,tsx,md,mdx}",
 	],
-	darkMode: ["selector", "[data-theme='dark']"],
+	darkMode: ["selector", "[data-theme*='dark']"],
 	theme: {
 		fontSize: {
 			xs: ["0.75rem", { lineHeight: "1rem" }],