physics-simulations

commit a29c7a60862f58f26ceda9eedb69df79c77a07dd
parent ce0432b1e90d60b857fefbb1be139bafcf0070c6
Author: Asher Morgan <59518073+ashermorgan@users.noreply.github.com>
Date:   Mon, 24 Jun 2024 13:49:50 -0700

Add dark theme

Diffstat:
M
index.css
 | 
13
+++++++++++++
M
simulations/styles.css
 | 
21
++++++++++++++++++++-

2 files changed, 33 insertions(+), 1 deletion(-)
diff --git a/index.css b/index.css
@@ -11,6 +11,7 @@
 /* page header */
 header {
     background-color: #48d1cc;
+    color: #000000;
     width: 100%;
     padding: 10px;
     margin-bottom: 15px;
@@ -42,3 +43,15 @@ header h1 {
         width: calc(100% - 30px);
     }
 }
+
+/* dark mode */
+@media only screen and (prefers-color-scheme: dark) {
+    body {
+        background: #202020;
+        color: #e0e0e0;
+    }
+    #simulationLinks a {
+        background: #404040;
+        color: #e0e0e0;
+    }
+}
diff --git a/simulations/styles.css b/simulations/styles.css
@@ -14,6 +14,7 @@ div[hidden] {
 
 header {
     background-color: #48d1cc;
+    color: #000000;
     width: 100%;
     text-align: center;
     padding: 10px;
@@ -34,6 +35,7 @@ header button {
 noscript {
     color: #ff0000;
     margin-bottom: 10px;
+    text-align: center;
 }
 
 .icon, .icon:focus {
@@ -44,7 +46,7 @@ noscript {
     vertical-align: middle;
     outline: 0;
 }
-.icon:disabled {
+#simulation .icon:disabled {
     filter: invert(50%);
     cursor: default;
 }
@@ -135,3 +137,20 @@ noscript {
 #info img {
     vertical-align: middle;
 }
+
+/* dark mode */
+@media only screen and (prefers-color-scheme: dark) {
+    body {
+        background: #202020;
+        color: #e0e0e0;
+    }
+    #output {
+        border: 1px solid #e0e0e0;
+    }
+    #input, #data {
+        background-color: #404040;
+    }
+    #simulation .icon, #info img {
+        filter: invert(1);
+    }
+}