dark/light theme based on client system/browser settting

gbdev · Sep 18, 2024 · 7e3a2e0 · 7e3a2e0
1 parent a77fbe3
commit 7e3a2e0
Show file tree

Hide file tree

Showing 3 changed files with 84 additions and 22 deletions.
diff --git a/css/style.css b/css/style.css
@@ -1,3 +1,48 @@
+:root {
+    --selectedfile-background: #ccf;
+    --color:#2D2D2C;
+    --background: #FAFAFA;
+    --background-alt: #EFEFEF;
+    --border-color: #D6D6D6;
+}
+
+@media (prefers-color-scheme: dark) {
+    :root {
+        --selectedfile-background: #557;
+        --color:#CCCCCC;
+        --background: #2D2D2D;
+        --background-alt: #424242;
+        --border-color: #575757;
+    }
+}
+
+body
+{
+    color:var(--color);
+    background:var(--background);
+}
+
+input, textarea {
+    border: 1px solid #555;
+    border-radius: 4px;
+    padding: 4px;
+    background-color: var(--background);
+    color: var(--color);
+}
+
+button {
+    border: 1px solid #555;
+    border-radius: 4px;
+    padding: 8px;
+    margin: 2px;
+    background-color: var(--background);
+    color: var(--color);
+}
+
+button:hover{
+    background-color: var(--background-alt);
+}
+
 .cpuLineMarker {
   position:absolute;
   background:rgba(100,200,100,0.5);
@@ -18,31 +63,31 @@
 .tabs {
     display: flex;
     flex-wrap: wrap;
-    border-bottom: 1px solid #999;
+    border-bottom: 1px solid var(--border-color);
 }
 .tabs input[type=radio] {
     display: none;
 }
 .tabs label {
-    border: 1px solid #999;
-    background: #EEE;
+    border: 1px solid var(--border-color);
+    background: var(--background-alt);
     padding: 4px 12px;
     border-radius: 4px 4px 0 0;
     position: relative;
     top: 1px;
 }
 .tabs input:checked + label {
-    background: #FFF;
-    border-bottom: 1px solid transparent;
+    background: var(--background);
+    border-bottom: 1px solid var(--background);
 }
 .tabs input + label + div {
     order: 99;
     display: none;
     flex-basis: 100%;
     padding: 16px;
-    border-top: 1px solid #999;
-    border-left: 1px solid #999;
-    border-right: 1px solid #999;
+    border-top: 1px solid var(--border-color);
+    border-left: 1px solid var(--border-color);
+    border-right: 1px solid var(--border-color);
 }
 .tabs input:checked + label + div {
     display: block;
@@ -52,8 +97,8 @@ table {
   border-collapse: collapse;
 }
 table, th, td {
-  border: 1px solid black;
-  background: white;
+  border: 1px solid var(--border-color);
+  background: var(--background);
   font: 12px/normal 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace;
 }
 body {
@@ -67,7 +112,8 @@ canvas {
 }
 
 .menubar {
-  background: #aaa
+  background: var(--background);
+  border-bottom: 1px solid var(--border-color);
 }
 .menubar ul {
   padding: 0;
@@ -76,14 +122,15 @@ canvas {
 .menubar li {
   display: block;
   float: left;
-  border: 1px solid black;
+  border: 1px solid var(--background-alt);
   padding: 0px 15px;
   position: relative;
-  background-color: #f9f9f9;
+  background-color: var(--background);
   cursor: pointer;
   user-select: none;
   white-space: nowrap;
 }
+
 .menubar li ul {
   display: none;
   position: absolute;
@@ -94,7 +141,7 @@ canvas {
   width: 100%;
 }
 .menubar ul li:hover {
-  background-color: #aaaaaa;
+  background-color: var(--background-alt);
 }
 .menubar li:hover ul, .menubar li:active ul {
   display: block;
@@ -106,14 +153,14 @@ canvas {
 }
 .filelist li {
   overflow: auto;
-  background: #eee;
+  background: var(--background);
   font: 12px/normal 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace;
   padding: 1px;
   cursor: pointer;
   user-select: none;
 }
-.filelist li:nth-child(even) {background: #fff}
-.filelist li.active {background: #ccf}
+.filelist li:nth-child(even) {background: var(--background-alt);}
+.filelist li.active {background: var(--selectedfile-background)}
 .filelist li.error {
     background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAABOFBMVEX/////////QRswFAb/Ui4wFAYwFAYwFAaWGAfDRymzOSH/PxswFAb/SiUwFAYwFAbUPRvjQiDllog5HhHdRybsTi3/Tyv9Tir+Syj/UC3////XurebMBIwFAb/RSHbPx/gUzfdwL3kzMivKBAwFAbbvbnhPx66NhowFAYwFAaZJg8wFAaxKBDZurf/RB6mMxb/SCMwFAYwFAbxQB3+RB4wFAb/Qhy4Oh+4QifbNRcwFAYwFAYwFAb/QRzdNhgwFAYwFAbav7v/Uy7oaE68MBK5LxLewr/r2NXewLswFAaxJw4wFAbkPRy2PyYwFAaxKhLm1tMwFAazPiQwFAaUGAb/QBrfOx3bvrv/VC/maE4wFAbRPBq6MRO8Qynew8Dp2tjfwb0wFAbx6eju5+by6uns4uH9/f36+vr/GkHjAAAAYnRSTlMAGt+64rnWu/bo8eAA4InH3+DwoN7j4eLi4xP99Nfg4+b+/u9B/eDs1MD1mO7+4PHg2MXa347g7vDizMLN4eG+Pv7i5evs/v79yu7S3/DV7/498Yv24eH+4ufQ3Ozu/v7+y13sRqwAAADLSURBVHjaZc/XDsFgGIBhtDrshlitmk2IrbHFqL2pvXf/+78DPokj7+Fz9qpU/9UXJIlhmPaTaQ6QPaz0mm+5gwkgovcV6GZzd5JtCQwgsxoHOvJO15kleRLAnMgHFIESUEPmawB9ngmelTtipwwfASilxOLyiV5UVUyVAfbG0cCPHig+GBkzAENHS0AstVF6bacZIOzgLmxsHbt2OecNgJC83JERmePUYq8ARGkJx6XtFsdddBQgZE2nPR6CICZhawjA4Fb/chv+399kfR+MMMDGOQAAAABJRU5ErkJggg==");
     background-position: right;
@@ -139,10 +186,10 @@ canvas {
 }
 
 .modal .content {
-    background-color: #fefefe;
+    background-color: var(--background);
     margin: 15% auto;
     padding: 20px;
-    border: 1px solid #888;
+    border: 1px solid var(--border);
     width: 80%;
 }
 .modal .close {

diff --git a/js/main.js b/js/main.js
@@ -24,6 +24,10 @@ var line_to_addr = {};
 var cpu_step_interval_id;
 var emu_view = "";
 
+export function isDarkMode() {
+    return window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
+}
+
 compiler.setLogCallback(function (str) {
     var output = document.getElementById("output");
     if (str === null) {
@@ -247,7 +251,7 @@ function updateTextView() {
     if (typeof data == "undefined") return;
 
     var text =
-        "<div style='position: fixed; background-color: #fff'>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 0&nbsp; 1&nbsp; 2&nbsp; 3&nbsp; 4&nbsp; 5&nbsp; 6&nbsp; 7&nbsp; 8&nbsp; 9&nbsp; a&nbsp; b&nbsp; c&nbsp; d&nbsp; e&nbsp; f</div><br/>";
+        "<div style='position: fixed; background-color: var(--background-alt)'>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 0&nbsp; 1&nbsp; 2&nbsp; 3&nbsp; 4&nbsp; 5&nbsp; 6&nbsp; 7&nbsp; 8&nbsp; 9&nbsp; a&nbsp; b&nbsp; c&nbsp; d&nbsp; e&nbsp; f</div><br/>";
     var symbol = null;
     var span = false;
     var span_color = 0;
@@ -281,7 +285,7 @@ function updateTextView() {
                     symbol +
                     "' style='background-color: hsl(" +
                     span_color +
-                    ", 50%, 50%)'>";
+                    (isDarkMode() ? ", 30%, 30%)'>" : ", 50%, 50%)'>");
                 span = true;
             }
             text += hex[idx];

diff --git a/js/text-editor.js b/js/text-editor.js
@@ -18,10 +18,21 @@ var cpu_line_marker = null;
 var breakpoints = [];
 var cursor_position_per_file = {};
 
+const runColorMode = (fn) => {
+	if (!window.matchMedia) {
+	  return;
+	}
+	const query = window.matchMedia('(prefers-color-scheme: dark)');
+	fn(query.matches);
+	query.addEventListener('change', (event) => fn(event.matches));
+  }
+
 export function register(div_id, compileCode) {
 	var e = ace.edit(div_id);
 	new TokenTooltip(e);
-	e.setTheme("ace/theme/tomorrow");
+	runColorMode((isDarkMode) => {
+		e.setTheme(isDarkMode ? "ace/theme/tomorrow_night_eighties" : "ace/theme/tomorrow");
+	});
 	e.session.setMode("ace/mode/gbz80");
 	e.setOptions({
 		tabSize: 2,