From 59b910056f2e171d60ef635d6bca7308b3c617d2 Mon Sep 17 00:00:00 2001
From: Marvin Borner
Date: Mon, 13 May 2019 20:40:46 +0200
Subject: Improved dark mode in editor/fileview
Co-authored-by: LarsVomMars <lars@kroenner.eu>
---
src/main/resources/css/darkLayout.css | 58 ++++++++++++++++++++++++++-
src/main/resources/css/darkTheme.css | 2 +-
src/main/resources/css/fileview.css | 2 +-
src/main/resources/js/fileview.js | 17 +-------
src/main/resources/js/prettify.js | 2 +-
src/main/resources/views/fileview.rocker.html | 11 ++++-
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 {
@@ -24,9 +28,59 @@ input {
color: #e8e6e3;
}
+/**
+ 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>
--
cgit v1.2.3