Fix background issue with dark theme

ideas-edu · Jun 23, 2023 · aef64c5 · aef64c5
1 parent 70c6d03
commit aef64c5
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 48 deletions.
diff --git a/www/css/style.css b/www/css/style.css
@@ -14,6 +14,9 @@ body {
 
         padding: 0 40px;
         margin: 0;
+
+        background-color: var(--md-sys-color-background);
+        color: var(--md-sys-color-on-background);
 }
 
 nav {
@@ -43,6 +46,10 @@ nav .logo svg {
         height: 64px; 
 }
 
+nav .logo svg path {
+        fill: var(--md-sys-color-on-surface-variant);
+}
+
 nav .logo h1 {
         font-size: 36px;
         line-height: 44px; 
@@ -123,8 +130,8 @@ nav .logo h1 {
 }
 .card code {
         border-radius: 8px;
-        border: 1px solid rgba(0, 0, 0, 0.30);
-        background: #FFF; 
+        border: 1px solid var(--md-sys-color-outline-variant);
+        background: var(--md-sys-color-surface-container-high); 
         font-family: 'Roboto Mono', monospace;
         padding: 8px;
         display: block;
@@ -160,7 +167,7 @@ main .exercise p {
 }
 
 #editor {
-        border: 1px solid #aaa;
+        border: 1px solid var(--md-sys-color-outline-variant);
         border-radius: 12px; 
         flex-grow: 1;
         min-height: 600px;

diff --git a/www/css/tokens.css b/www/css/tokens.css
@@ -138,7 +138,7 @@
   --md-sys-color-error-container-light: #FFDAD6;
   --md-sys-color-on-error-container-light: #410002;
   --md-sys-color-outline-light: #7D7667;
-  --md-sys-color-background-light: #FFFBFF;
+  --md-sys-color-background-light: #fff;
   --md-sys-color-on-background-light: #1E1B16;
   --md-sys-color-surface-light: #FFF8F0;
   --md-sys-color-on-surface-light: #1E1B16;

diff --git a/www/index.html b/www/index.html
@@ -68,41 +68,6 @@ <h1>Refactor Tutor</h1>
 
 			<div id="hints"></div>
 
-			<!-- <div class="card">
-				<div>
-					<h3>Can you rewrite the even check?</h3>
-				</div>
-				<div class="actions">
-					<md-text-button>
-						Explain more
-						<svg slot="icon" xmlns="http://www.w3.org/2000/svg" height="48" viewBox="0 -960 960 960" width="48"><path d="M450-200v-250H200v-60h250v-250h60v250h250v60H510v250h-60Z"/></svg>
-					</md-text-button>
-				</div>
-			</div>
-
-			<div class="card">
-				<div>
-					<h3>Can you rewrite the even check?</h3>
-					<span>Rewrite the even check using the == operator</span>
-				</div>
-				<div class="actions">
-					<md-text-button>
-						Explain more
-						<svg slot="icon" xmlns="http://www.w3.org/2000/svg" height="48" viewBox="0 -960 960 960" width="48"><path d="M450-200v-250H200v-60h250v-250h60v250h250v60H510v250h-60Z"/></svg>
-					</md-text-button>
-				</div>
-			</div>
-
-			<div class="card">
-				<div>
-					<h3>Can you rewrite the even check?</h3>
-					<span>Rewrite the even check using the == operator</span>
-				</div>
-				<p>Try to use this example code:</p>
-				<code><pre>values[i] % 2 == 0</pre></code>
-			</div> -->
-
-
 			<div>
 				<!-- Dev buttons --> 
 				<button id="toggleDebug" type="button" class="btn btn-info" data-toggle="button" style="display:none">debug mode</button>

diff --git a/www/rpt.js b/www/rpt.js
@@ -67,8 +67,21 @@ function initRPT() {
     loadExercises();
 
     editor = ace.edit("editor");
-    //editor.setTheme("ace/theme/monokai");
+
+    if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+        editor.setTheme("ace/theme/twilight");
+    }    
+
+    window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', event => {
+        if(event.matches) {
+            editor.setTheme("ace/theme/twilight");
+        } else {
+            editor.setTheme("ace/theme/textmate");
+        }
+    });
+
     editor.getSession().setMode("ace/mode/java");
+    editor.setShowPrintMargin(false);
     document.getElementById('editor').style.fontSize='14px';
     editor.getSession().on('change', function() {
         currentExState = ExState.busy;
@@ -258,12 +271,6 @@ function exSelected(e)
         });
     }
 
-    var id = $_('#exlist')[0].value;
-    if (id != currExId)
-    {
-        $_("#loadex").html("Start exercise");
-    }
-
 
 }
 
@@ -591,22 +598,32 @@ function getallhints(ev)
             $_("[id|='more-0']").hide();
             $_("[id|='l-0']").show(); //show root           
             $_("[id|='l-1']").show(); //show top level   
+
+            // new hint button
             $_("#newhint").click(function() {
                 let left = $_("[id^='alt-']:not(.used)");
                 left.first().click();
                 if(left.length <= 1) {
                     $_("#newhint").hide();
                 }
-            });     
+            });    
+
+            // if there is only one hint hide the button
+            let left = $_("[id^='alt-']:not(.used)");
+            if(left.length == 0) {
+                $_("#newhint").hide();
+            }
 
-             // add handlers 
+            // add handlers 
             $_("[id|='more']").click(function more (e) {          
                 hintAction(e, Hint.expand, tree, $_(this))             
             });
             $_("[id|='alt']").click(function alt(e) {
                 hintAction(e, Hint.alt, tree)
             });
 
+
+
             $_("#hints").show();
         }   
     );