darkMode

djinni-hppro · djinni-hppro · commit 539fd23d71be · 2026-02-26T15:33:43.000+07:00
diff --git a/src/index.css b/src/index.css
@@ -62,7 +62,8 @@
 	color: #e2e8f0;
 }
 .dark .bg-white {
-	background-color: #2d3748;
+	background-color: #1a202c;
+	/*background-color: #2d3748;*/
 }
 .dark .text-gray-900 {
 	color: #e2e8f0;
@@ -104,14 +105,14 @@
 	color: #e2e8f0;
 }
 .dark input {
-	background-color: #2d3748;
+	background-color: #1a202c;
 	color: #e2e8f0;
 }
 .dark .EasyMDEContainer .editor-preview {
-	background-color: #2d3748;
+	background-color: #1a202c;
 }
 .dark .EasyMDEContainer .CodeMirror {
-	background-color: #2d3748;
+	background-color: #1a202c;
 	color: #bdbdbd;
 }
 .dark .EasyMDEContainer .CodeMirror-gutters {
@@ -123,11 +124,11 @@
 }
 
 .dark .EasyMDEContainer .editor-toolbar {
-	background: #2d3748;
+	background: #1a202c;
 }
 
 .dark .EasyMDEContainer .editor-toolbar.fullscreen {
-	background: #2d3748;
+	background: #1a202c;
 }
 
 .EasyMDEContainer .editor-toolbar button {
diff --git a/src/index.html b/src/index.html
@@ -33,7 +33,7 @@
 	<link rel="preconnect" href="https://cdn.jsdelivr.net" crossorigin>
 	<link rel="preconnect" href="https://maxcdn.bootstrapcdn.com" crossorigin>
 </head>
-<body id="main-app" class="flex flex-col min-h-screen" x-data="mainApp()" x-init="init()">
+<body id="main-app" class="flex flex-col min-h-screen" :class="{'dark': darkMode, '': !darkMode}" x-data="mainApp()" x-init="init()">
 	<!-- AppShellHeader -->
 	<header class="sticky top-0 w-full border-b bg-white z-20">
 		<div class="container flex h-16 items-center justify-between py-2 w-full mx-auto px-4">

Original file line number	Diff line number	Diff line change
`@@ -62,7 +62,8 @@`
`62`	`62`	`color: #e2e8f0;`
`63`	`63`	`}`
`64`	`64`	`.dark .bg-white {`
`65`		`- background-color: #2d3748;`
	`65`	`+ background-color: #1a202c;`
	`66`	`+ /background-color: #2d3748;/`
`66`	`67`	`}`
`67`	`68`	`.dark .text-gray-900 {`
`68`	`69`	`color: #e2e8f0;`
`@@ -104,14 +105,14 @@`
`104`	`105`	`color: #e2e8f0;`
`105`	`106`	`}`
`106`	`107`	`.dark input {`
`107`		`- background-color: #2d3748;`
	`108`	`+ background-color: #1a202c;`
`108`	`109`	`color: #e2e8f0;`
`109`	`110`	`}`
`110`	`111`	`.dark .EasyMDEContainer .editor-preview {`
`111`		`- background-color: #2d3748;`
	`112`	`+ background-color: #1a202c;`
`112`	`113`	`}`
`113`	`114`	`.dark .EasyMDEContainer .CodeMirror {`
`114`		`- background-color: #2d3748;`
	`115`	`+ background-color: #1a202c;`
`115`	`116`	`color: #bdbdbd;`
`116`	`117`	`}`
`117`	`118`	`.dark .EasyMDEContainer .CodeMirror-gutters {`
`@@ -123,11 +124,11 @@`
`123`	`124`	`}`
`124`	`125`
`125`	`126`	`.dark .EasyMDEContainer .editor-toolbar {`
`126`		`- background: #2d3748;`
	`127`	`+ background: #1a202c;`
`127`	`128`	`}`
`128`	`129`
`129`	`130`	`.dark .EasyMDEContainer .editor-toolbar.fullscreen {`
`130`		`- background: #2d3748;`
	`131`	`+ background: #1a202c;`
`131`	`132`	`}`
`132`	`133`
`133`	`134`	`.EasyMDEContainer .editor-toolbar button {`