Improved dark mode in editor/fileview

Co-authored-by: LarsVomMars <lars@kroenner.eu>

6 files changed, 70 insertions, 22 deletions

diff --git a/src/main/resources/css/darkLayout.css b/src/main/resources/css/darkLayout.css
index 71172a5..6d55dfc 100644
--- a/src/main/resources/css/darkLayout.css
+++ b/src/main/resources/css/darkLayout.css
@@ -9,6 +9,10 @@ body {
     color: #d0cdc6
 }
 
+a {
+    color: #1a439b;
+}
+
 button {
     text-decoration-color: initial;
     background-color: #3d4043;
@@ -16,7 +20,7 @@ button {
     border-right-color: #595959;
     border-bottom-color: #595959;
     border-left-color: #595959;
-    color: #ffffff;
+    color: #fff;
 }
 
 input {
@@ -25,8 +29,58 @@ input {
 }
 
 /**
+    Markdown editor
+ */
+.editor-toolbar {
+    opacity: 1;
+    border: none;
+}
+
+.editor-toolbar a {
+    color: #e8e6e3 !important;
+}
+
+.editor-toolbar a.active, .editor-toolbar a:hover {
+    opacity: 1;
+    border-color: inherit;
+    background: #181a1b !important;
+    color: #e8e6e3 !important;
+}
+
+.editor-toolbar:hover, .editor-wrapper input.title:focus, .editor-wrapper input.title:hover {
+    opacity: 1
+}
+
+.editor-statusbar, .editor-toolbar {
+    color: #e8e6e3 !important;
+    background: #181a1b !important;
+}
+
+.editor-toolbar::after, .editor-toolbar::before {
+    opacity: 0;
+}
+
+.CodeMirror, .editor-preview-side {
+    background: inherit;
+    border: none;
+    color: #e8e6e3;
+}
+
+.editor-preview-side {
+    border-left: 1px solid #e8e6e3;
+}
+
+.CodeMirror-cursor {
+    border-left: 1px solid #e8e6e3;
+}
+
+/**
     Other stuff
  */
-tr:hover {
+table tr:hover {
     background-color: #121516 !important;
 }
+
+table thead tr:hover {
+    background-color: #181a1b !important;
+}
diff --git a/src/main/resources/css/darkTheme.css b/src/main/resources/css/darkTheme.css
index 61f2099..67e0b6d 100644
--- a/src/main/resources/css/darkTheme.css
+++ b/src/main/resources/css/darkTheme.css
@@ -59,7 +59,7 @@ ol.linenums {
 }
 
 .prettyprint {
-    background: #000;
+    background: #181a1b;
 }
 
 li.L0, li.L1, li.L2, li.L3, li.L4, li.L5, li.L6, li.L7, li.L8, li.L9 {
diff --git a/src/main/resources/css/fileview.css b/src/main/resources/css/fileview.css
index 9c52ac2..24855aa 100644
--- a/src/main/resources/css/fileview.css
+++ b/src/main/resources/css/fileview.css
@@ -2,7 +2,7 @@ html, body {
     overflow: visible;
 }
 
-.preview, .modify, .switch, .settings {
+.modify, .switch, .settings {
     display: none;
 }
 
diff --git a/src/main/resources/js/fileview.js b/src/main/resources/js/fileview.js
index 80686bc..c368219 100644
--- a/src/main/resources/js/fileview.js
+++ b/src/main/resources/js/fileview.js
@@ -7,7 +7,6 @@ const body = document.body;
 // buttons
 const raw = document.getElementById("raw");
 const code = document.getElementById("code");
-const dark = document.getElementById("dark");
 const settings = document.getElementById("settings");
 
 const originalContent = content.innerText;
@@ -15,9 +14,9 @@ const originalContent = content.innerText;
 if (extension === "html") {
     preview.src = "data:text/html;charset=utf-8," + encodeURI(originalContent);
 
-    preview.style.display = "block";
+    preview.style.display = "none";
     raw.style.display = "block";
-    content.style.display = "none";
+    content.style.display = "block";
 
     raw.addEventListener("click", () => {
         if (preview.style.display === "block") {
@@ -67,15 +66,3 @@ code.addEventListener("change", () => {
         PR.prettyPrint();
     }
 });
-
-dark.addEventListener("change", () => {
-    if (dark.checked) {
-        document.getElementsByTagName("head")[0]
-            .insertAdjacentHTML("beforeend", '<link id="darkTheme" href="/css/darkTheme.css" rel="stylesheet" />');
-        document.getElementById("lightTheme").outerHTML = "";
-    } else {
-        document.getElementsByTagName("head")[0]
-            .insertAdjacentHTML("beforeend", '<link id="lightTheme" href="/css/lightTheme.css" rel="stylesheet" />');
-        document.getElementById("darkTheme").outerHTML = "";
-    }
-});
diff --git a/src/main/resources/js/prettify.js b/src/main/resources/js/prettify.js
index 5c0d71d..882e565 100644
--- a/src/main/resources/js/prettify.js
+++ b/src/main/resources/js/prettify.js
@@ -100,7 +100,7 @@
             N.insertBefore(g, N.firstChild)
         })(H[l]);
         for (var S = H.length, F = [], l = 0, B = P.length; l < B; ++l) F.push("https://cdn.rawgit.com/google/code-prettify/master/loader/skins/" + encodeURIComponent(P[l]) + ".css");
-        F.push("/css/lightTheme.css");
+        //F.push("/css/lightTheme.css");
         (function (g) {
             function r(l) {
                 if (l !== x) {
diff --git a/src/main/resources/views/fileview.rocker.html b/src/main/resources/views/fileview.rocker.html
index b3f8341..30e0caf 100644
--- a/src/main/resources/views/fileview.rocker.html
+++ b/src/main/resources/views/fileview.rocker.html
@@ -1,9 +1,17 @@
+@import space.anity.DatabaseController
+@import space.anity.UserHandler
 @import io.javalin.*
 @args (String content, String filename, String extension, Context ctx)
 
 @css => {
 <link href="/css/fileview.css" rel="stylesheet">
 <link href="/css/markdown.css" rel="stylesheet">
+
+@if((new DatabaseController()).isDarkTheme((new UserHandler()).getVerifiedUserId(ctx))) {
+<link href="/css/darkTheme.css" rel="stylesheet"/>
+} else {
+<link href="/css/lightTheme.css" rel="stylesheet"/>
+}
 }
 
 @js => {
@@ -14,10 +22,9 @@
 }
 
 @layout.template("File " + filename, ctx, css, js) -> {
-<button class="switch" id="raw">Show raw</button>
+<button class="switch" id="raw">Show preview</button>
 <span class="settings" id="settings">
     <label for="code">Linecount</label><input id="code" type="checkbox">
-    <label for="dark">Dark mode</label><input id="dark" type="checkbox">
 </span>
 <pre class="prettyprint" id="content"><code class="lang-@extension">@content</code></pre>
 <textarea class="modify" id="modify"></textarea>