Provide a dark mode.

kieler · Dec 1, 2024 · 445a9c1 · 445a9c1
1 parent c8056fa
commit 445a9c1
Show file tree

Hide file tree

Showing 18 changed files with 117 additions and 2 deletions.
diff --git a/client/app/common.css b/client/app/common.css
@@ -19,4 +19,52 @@ svg {
 @keyframes spin {
     0% { transform: rotate(0deg); }
     100% { transform: rotate(360deg); }
-}
+}
+
+body.elk-dark-mode {
+    background-color: #333;
+    color: #ddd;
+}
+
+.elk-dark-mode a {
+    color: #60adff;
+}
+
+.elk-dark-mode .btn-success {
+    color: #fff;
+}
+
+#darkModeToggle {
+    margin-left: 16px;
+}
+
+#darkModeToggle.front-page {
+    position: absolute;
+    top: 16px;
+    right: 16px;
+}
+
+.elk-dark-mode #example-description pre {
+    color: #ddd;
+}
+
+.elk-dark-mode .autocomplete-suggestions {
+    color: #111;
+}
+
+.elk-dark-mode .card-body {
+    background-color: #333;
+}
+
+.elk-dark-mode #monaco-editor,
+.elk-dark-mode #monaco-editor-input,
+.elk-dark-mode #monaco-editor-output,
+.elk-dark-mode #format-select-row,
+.elk-dark-mode #example-graph,
+.elk-dark-mode div.sidebar,
+.elk-dark-mode #autocomplete,
+.elk-dark-mode .autocomplete-suggestions,
+.elk-dark-mode #page-theme,
+.elk-dark-mode #elk-version {
+    filter: invert(0.8) hue-rotate(180deg);
+}
diff --git a/client/app/diagram.css b/client/app/diagram.css
@@ -41,3 +41,26 @@
 .mouseover {
     stroke: #88f;
 }
+
+.elk-dark-mode .elknode {
+    stroke: #ddd;
+    fill: #55a;
+}
+
+.elk-dark-mode .elkport {
+    stroke: #ddd;
+    fill: #88b;
+}
+
+.elk-dark-mode .elkedge {
+    stroke: #ddd;
+}
+
+.elk-dark-mode .elkedge.arrow {
+    fill: #ddd;
+}
+
+.elk-dark-mode .elklabel {
+    stroke: #ddd;
+    fill: #ddd;
+}
diff --git a/client/app/index.html b/client/app/index.html
@@ -6,6 +6,7 @@
     <title>ELK Demonstrators</title>
     <link rel="icon" type="image/svg+xml" href="img/elk_fav.svg">
     <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
+    <link rel="stylesheet" href="common.css">
     <style>
         dd {
             margin-bottom: 1em;
@@ -26,6 +27,7 @@
     </style>
 </head>
 <body>
+    <div id="darkModeToggle" class="front-page"></div>
     <div class="container">
         <div class="row justify-content-md-center mt-5 mb-5">
             <div class="col-md-8 text-center">
@@ -185,6 +187,7 @@ <h3 class="card-title"><a href="conversion.html">Graph Format Conversion</a></h3
         </div></div>
     </div>
 
+    <script src="index.bundle.js"></script>
 	<script src="jquery/jquery.slim.min.js"></script>
 	<script src="bootstrap/js/bootstrap.min.js"></script>
     <script>

diff --git a/client/package.json b/client/package.json
@@ -23,6 +23,7 @@
     "monaco-languageclient": "^0.9.0",
     "reconnecting-websocket": "^4.1.10",
     "showdown": "^1.9.1",
+    "simple-dark-mode-toggle": "^0.1.0",
     "sprotty": "^0.8.0",
     "vscode-ws-jsonrpc": "^0.0.2-1"
   },

diff --git a/client/src/common/dark-mode.ts b/client/src/common/dark-mode.ts
@@ -0,0 +1,10 @@
+import { setupDarkMode as setup } from "simple-dark-mode-toggle";
+
+export function setupDarkMode() {
+    const darkModeToggle = <HTMLElement>document.getElementById('darkModeToggle');
+    setup(darkModeToggle, {
+        darkClassName: 'elk-dark-mode',
+        storageName: 'elk-live-dark-mode',
+        darkByDefault: false,
+    });
+}
diff --git a/client/src/conversion/conversion_template.html b/client/src/conversion/conversion_template.html
@@ -6,6 +6,7 @@
     <title>ELK Conversion</title>
     <link rel="icon" type="image/svg+xml" href="img/elk_fav.svg">
     <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
+    <link rel="stylesheet" href="common.css">
     <style>
         body {
             min-height: 100vh;
@@ -18,7 +19,7 @@
         <div class="w-100 text-center">
              <span class="navbar-brand mb-0 h1">Graph Conversion</span>
         </div>
-        <div class="row w-100">
+        <div id="format-select-row" class="row w-100">
             <div class="input-group pr-3 w-50">
                 <div class="input-group-prepend">
                     <label class="input-group-text" for="in-format-select">Input</label>
@@ -40,6 +41,7 @@
                 </select>
             </div>
         </div>
+        <div id="darkModeToggle"></div>
     </nav>
 
     <div class="container-fluid flex-fill d-flex border-top pt-4">

diff --git a/client/src/conversion/editor.ts b/client/src/conversion/editor.ts
@@ -8,11 +8,14 @@
  * SPDX-License-Identifier: EPL-2.0
  *******************************************************************************/
 import 'reflect-metadata';
+import { setupDarkMode } from "../common/dark-mode";
 
 // Load monaco editor languages
 require('../json/elk-json-language');
 require('../elkgraph/elkt-language');
 
+setupDarkMode();
+
 const editorInput = monaco.editor.create(document.getElementById('monaco-editor-input')!);
 editorInput.updateOptions({
     minimap: { enabled: false }

diff --git a/client/src/elkgraph/editor.ts b/client/src/elkgraph/editor.ts
@@ -17,6 +17,7 @@ import { TYPES, createRandomId, IActionDispatcher } from 'sprotty';
 import { getParameters, setupModelLink } from "../url-parameters";
 import createContainer from '../sprotty-config';
 import { LanguageDiagramServer, ChangeLayoutVersionAction } from './language-diagram-server';
+import { setupDarkMode } from "../common/dark-mode";
 import ReconnectingWebSocket from 'reconnecting-websocket';
 import LZString = require('lz-string');
 
@@ -40,6 +41,8 @@ edge n1 -> n2
 edge n1 -> n3`;
 }
 
+setupDarkMode();
+
 // Create Sprotty viewer
 const sprottyContainer = createContainer();
 sprottyContainer.bind(TYPES.ModelSource).to(LanguageDiagramServer).inSingletonScope();

diff --git a/client/src/elkgraph/elkgraph_template.html b/client/src/elkgraph/elkgraph_template.html
@@ -31,6 +31,7 @@
                 </select>
             </form>
         </div>
+        <div id="darkModeToggle"></div>
 	</nav>
 
     <div class="container-fluid flex-fill d-flex border-top pt-4">

diff --git a/client/src/examples/examples.ts b/client/src/examples/examples.ts
@@ -13,6 +13,7 @@ import { createMonacoEditor, createSprottyViewer, openWebSocketElkGraph } from '
 import { getParameters } from "../common/url-parameters";
 import { createExampleCategoryTree, ElkExample, ExampleCategory } from './elkex';
 import { ChangeLayoutVersionAction } from '../common/language-diagram-server';
+import { setupDarkMode } from "../common/dark-mode";
 
 require('../common/elkt-language');
 
@@ -37,6 +38,8 @@ openWebSocketElkGraph({
     diagramServer: diagramServer,
 });
 
+setupDarkMode();
+
 // - - - - Showdown markdown parser - - - -
 showdown.setFlavor('github');
 // simpleLineBreaks: false requires at least two line breaks to start a new paragraph

diff --git a/client/src/examples/examples_template.html b/client/src/examples/examples_template.html
@@ -49,6 +49,7 @@
                 </select>
             </form>
         </div>
+        <div id="darkModeToggle"></div>
     </nav>
 
     <div class="container-fluid flex-fill d-flex border-top">

diff --git a/client/src/index.ts b/client/src/index.ts
@@ -0,0 +1,3 @@
+import { setupDarkMode } from "./common/dark-mode";
+
+setupDarkMode();
diff --git a/client/src/json/editor.ts b/client/src/json/editor.ts
@@ -13,6 +13,7 @@ import { createMonacoEditor, openWebSocketElkGraph } from '../common/creators';
 import createContainer from '../sprotty-config';
 import { getParameters, setupModelLink } from "../url-parameters";
 import { ElkGraphJsonToSprotty } from './elkgraph-to-sprotty';
+import { setupDarkMode } from "../common/dark-mode";
 
 import JSON5 = require('json5');
 import LZString = require('lz-string');
@@ -58,6 +59,8 @@ const modelSource = sprottyContainer.get<LocalModelSource>(TYPES.ModelSource);
 
 const versionSelect = <HTMLSelectElement>document.getElementById('elk-version');
 
+setupDarkMode();
+
 // Prepare multiple elks to be loaded lazily
 let elks = {}
 // Set up ELK

diff --git a/client/src/json/json_template.html b/client/src/json/json_template.html
@@ -40,6 +40,7 @@
                 </select>
             </form>
         </div>
+        <div id="darkModeToggle"></div>
 	</nav>
 
     <div class="container-fluid flex-fill d-flex border-top pt-4">

diff --git a/client/src/models/main.ts b/client/src/models/main.ts
@@ -14,11 +14,14 @@ import { ElkGraphJsonToSprotty } from '../json/elkgraph-to-sprotty';
 import createContainer from '../sprotty-config';
 import { getParameters, combineParameters } from '../url-parameters';
 import ELK, { ElkNode } from 'elkjs-latest/lib/elk-api.js';
+import { setupDarkMode } from "../common/dark-mode";
 
 const availableModels = require('./models.json')
 
 const urlParameters = getParameters();
 
+setupDarkMode();
+
 // Create Sprotty viewer
 const sprottyContainer = createContainer();
 sprottyContainer.bind(TYPES.ModelSource).to(LocalModelSource).inSingletonScope();

diff --git a/client/src/models/models_template.html b/client/src/models/models_template.html
@@ -71,6 +71,7 @@
         <div class="flex-grow-1">
             <input type="text" id="autocomplete" class="form-control" placeholder="Type to select a model ...">
         </div>
+        <div id="darkModeToggle"></div>
 	</nav> 
 
     <div class="container-fluid flex-fill d-flex px-4 py-2 border-top">

diff --git a/client/webpack.config.js b/client/webpack.config.js
@@ -108,6 +108,7 @@ module.exports = async function (env) {
             examples: path.resolve(buildRoot, 'examples/main'),
             json: path.resolve(buildRoot, 'json/main'),
             models: path.resolve(buildRoot, 'models/main'),
+            index: path.resolve(buildRoot, 'index'),
         },
         output: {
             filename: '[name].bundle.js',

diff --git a/client/yarn.lock b/client/yarn.lock
@@ -2907,6 +2907,11 @@ signal-exit@^3.0.0:
   resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.2.tgz#b5fdc08f1287ea1178628e415e25132b73646c6d"
   integrity sha1-tf3AjxKH6hF4Yo5BXiUTK3NkbG0=
 
+simple-dark-mode-toggle@^0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/simple-dark-mode-toggle/-/simple-dark-mode-toggle-0.1.0.tgz#351238911db2e3f3319e8fd94c2d54327da3411a"
+  integrity sha512-2ZqysmEWXhnIvSJY+LmQb29AVHWajyVKvtnWCZg8xzHfdUvwHog6cKGBFSDllErVGZQXxnDVMI1ilGovw/VLjw==
+
 slash@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/slash/-/slash-1.0.0.tgz#c41f2f6c39fc16d1cd17ad4b5d896114ae470d55"