dark mode

mirva/__init__.py

@@ -1,4 +1,4 @@
-__version__ = "20230103.0"
+__version__ = "20230407.0"
 
 
 def get_version():

mirva/resources/mirva.css

@@ -5,13 +5,37 @@ http://templated.co
 Released for free under the Creative Commons Attribution License
 */
 
+:root {
+  --background: #505050;
+  --button-shadow: #242424;
+  --foreground: #d6d6d6;
+  --headercolor: #ffffff;
+  --title-text: #000000;
+  --title-background: rgba(255,255,255,0.7);
+  --links: #ff8300;
+  --subtitle-text: #ffffff;
+}
+
+/* Light mode
+:root {
+  --background: #eeeeee;
+  --button-shadow: #888888;
+  --foreground: #383838;
+  --headercolor: #000000;
+  --title-text: #000000;
+  --title-background: rgba(255,255,255,0.7);
+  --links: #d1710c;
+  --subtitle-text: #ffffff;
+}
+*/
+
 body {
     margin: 0;
     padding: 0;
-    background-color: #eeeeee;
+    background-color: var(--background);
     font-family: Arial, Helvetica, sans-serif;
     font-size: 12px;
-    color: #383838;
+    color: var(--foreground);
     overflow-x: hidden;
 }
 
@@ -19,7 +43,7 @@ h1, h2, h3 {
     margin: 0;
     padding: 0;
     font-weight: normal;
-    color: #000000;
+    color: var(--headercolor);
 }
 
 h1 {
@@ -44,7 +68,7 @@ ul, ol {
 
 a {
     text-decoration: none;
-    color: #d1710c;
+    color: var(--links);
 }
 
 a:hover {
@@ -79,7 +103,7 @@ a:hover {
 #logo h1, #logo p {
     margin: 0;
     padding: 0;
-    color: #ffffff;
+    color: var(--subtitle-text);
 }
 
 #logo #page_title {
@@ -91,8 +115,8 @@ a:hover {
     font-size: 3.8em;
     word-break: break-all;
     text-align: center;
-    color: black;
+    color: var(--title-text);
-    background-color: rgba(255,255,255,0.7);
+    background-color: var(--title-background);
 }
 
 #logo #page_title p {
@@ -100,7 +124,7 @@ a:hover {
     padding: 0px 0 0 60px;
     font: normal 14px Georgia, "Times New Roman", Times, serif;
     font-style: italic;
-    color: #FFFFFF;
+    color: var(--subtitle-text);
 }
 
 #logo a {
@@ -212,30 +236,6 @@ a:hover {
     display: inline;
   }
 }
-/* Footer */
-
-#footer {
-    height: 50px;
-    margin: 0 auto;
-    padding: 0px 0 15px 0;
-    background: #ECECEC;
-    border-top: 1px solid #DEDEDE;
-    font-family: Arial, Helvetica, sans-serif;
-}
-
-#footer p {
-    margin: 0;
-    padding-top: 20px;
-    line-height: normal;
-    font-size: 9px;
-    text-transform: uppercase;
-    text-align: center;
-    color: #A0A0A0;
-}
-
-#footer a {
-    color: #8A8A8A;
-}
 
 /* navi */
 
@@ -251,11 +251,11 @@ a:hover {
 .navigation_button {
   cursor: pointer;
   margin-left: 10px;
-  box-shadow: 4px 4px 5px #888888;
+  box-shadow: 4px 4px 5px var(--button-shadow);
 }
 .navigation_button:hover {
   cursor: pointer;
-  box-shadow: 2px 2px 2px #888888;
+  box-shadow: 2px 2px 2px var(--button-shadow);
 }
 
 .float_up {