style changes

DDP-Projekt · Jun 14, 2024 · 0a07b5f · 0a07b5f
1 parent ab0fd2c
commit 0a07b5f
Show file tree

Hide file tree

Showing 7 changed files with 39 additions and 52 deletions.
diff --git a/static/css/dark-mode.css b/static/css/dark-mode.css
diff --git a/static/css/light-mode.css b/static/css/light-mode.css
diff --git a/static/css/style.css b/static/css/style.css
@@ -48,6 +48,22 @@ abbr {
 
 :root {
 	color: var(--text-color);
+
+	--text-color: white;
+	--background-color: #1e1e1e;
+
+	--input-background-color: #383838;
+	--input-border-color: #5c5c5c;
+
+	--output-background-color: #1a1a1a;
+
+	--controls-background-color: #292929;
+	--controls-btn-hover-color: #969696;
+
+	--spacer-background-color: #3c3c3c;
+
+	--invert-if-dark: invert();
+
 	--input-height: 20px;
 	--input-border-width: 1px;
 
@@ -77,6 +93,24 @@ html, body {
 	height: 100%;
 	background-color: var(--background-color);
 	font-family: Arial, Helvetica, sans-serif;
+	overflow: hidden;
+}
+
+html[light] {
+	--text-color: #454545;
+	--background-color: #fafafa;
+
+	--input-background-color: #f4f4f5;
+	--input-border-color: #b0b0b0;
+
+	--output-background-color: #ffffff;
+
+	--controls-background-color: #eeeeee;
+	--controls-btn-hover-color: #c6c6c6;
+
+	--spacer-background-color: #d0d7de;
+
+	--invert-if-dark: none;
 }
 
 input {
@@ -95,7 +129,6 @@ main {
 	display: grid;
 	grid-template-columns: var(--editor-container-size) var(--spacer-width) calc(100% - var(--editor-container-size) - var(--spacer-width));
 	grid-template-rows: 100%;
-	overscroll-behavior: none;
 }
 
 main[horizontal] {
@@ -129,6 +162,7 @@ img[active] {
 }
 
 .controls img.btn {
+	filter: var(--invert-if-dark);
 	border-radius: 30%;
 }
 

diff --git a/static/html/embed.html b/static/html/embed.html
@@ -21,8 +21,6 @@
 
 		<link rel="stylesheet" data-name="vs/editor/editor.main" href="monaco-editor/min/vs/editor/editor.main.css">
 		<link rel="stylesheet" type="text/css" href="static/css/style.css">
-		<link id="dark" rel="stylesheet" href="static/css/dark-mode.css" media="all">
-		<link id="light" rel="stylesheet" href="static/css/light-mode.css" media="not all">
 
 		<script>var embedded = true;</script>
 		<script defer>

diff --git a/static/html/index.html b/static/html/index.html
@@ -21,8 +21,6 @@
 
 		<link rel="stylesheet" data-name="vs/editor/editor.main" href="monaco-editor/min/vs/editor/editor.main.css">
 		<link rel="stylesheet" type="text/css" href="static/css/style.css">
-		<link id="dark" rel="stylesheet" href="static/css/dark-mode.css" media="all">
-		<link id="light" rel="stylesheet" href="static/css/light-mode.css" media="not all">
 
 		<script>var embedded = false;</script>
 		<script defer>

diff --git a/static/js/controls.js b/static/js/controls.js
@@ -169,16 +169,13 @@ function share() {
 }
 
 function toggleDarkMode() {
-	let isDark = document.getElementById('dark').media === 'all';
-	if (isDark) {
-		document.getElementById('dark').media = 'not all';
-		document.getElementById('light').media = 'all';
+	document.querySelector('html').toggleAttribute('light')
+
+	if (document.querySelector('html').hasAttribute('light')) {
 		monaco.editor.setTheme("ddp-theme-light");
 		window.localStorage.setItem("dark-mode", "false");
 	}
 	else {
-		document.getElementById('dark').media = 'all';
-		document.getElementById('light').media = 'not all';
 		monaco.editor.setTheme("ddp-theme-dark");
 		window.localStorage.setItem("dark-mode", "true");
 	}

diff --git a/static/js/editor.js b/static/js/editor.js
@@ -54,11 +54,7 @@ if (urlParams.has("code")) {
 let editorTheme = 'ddp-theme-dark';
 if (window.localStorage.getItem("dark-mode") === 'false' || urlParams.has('light')) {
 	editorTheme = "ddp-theme-light";
-	document.getElementById('dark').media = 'not all';
-	document.getElementById('light').media = 'all';
-} else {
-	document.getElementById('dark').media = 'all';
-	document.getElementById('light').media = 'not all';
+	document.querySelector('html').setAttribute('light', '')
 }
 
 const isReadOnly = urlParams.has("readonly");