From 445a9c1db6949f23d1411a15e470b7adbb7dd7f9 Mon Sep 17 00:00:00 2001 From: Steve Kieffer Date: Sun, 1 Dec 2024 09:37:05 -0500 Subject: [PATCH] Provide a dark mode. --- client/app/common.css | 50 ++++++++++++++++++- client/app/diagram.css | 23 +++++++++ client/app/index.html | 3 ++ client/package.json | 1 + client/src/common/dark-mode.ts | 10 ++++ .../src/conversion/conversion_template.html | 4 +- client/src/conversion/editor.ts | 3 ++ client/src/elkgraph/editor.ts | 3 ++ client/src/elkgraph/elkgraph_template.html | 1 + client/src/examples/examples.ts | 3 ++ client/src/examples/examples_template.html | 1 + client/src/index.ts | 3 ++ client/src/json/editor.ts | 3 ++ client/src/json/json_template.html | 1 + client/src/models/main.ts | 3 ++ client/src/models/models_template.html | 1 + client/webpack.config.js | 1 + client/yarn.lock | 5 ++ 18 files changed, 117 insertions(+), 2 deletions(-) create mode 100644 client/src/common/dark-mode.ts create mode 100644 client/src/index.ts diff --git a/client/app/common.css b/client/app/common.css index dad80bb..808a8d0 100644 --- 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); } -} \ No newline at end of file +} + +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 index dbf7b9e..8389943 100644 --- 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 index b5a95ee..102c240 100644 --- a/client/app/index.html +++ b/client/app/index.html @@ -6,6 +6,7 @@ ELK Demonstrators + +
@@ -185,6 +187,7 @@

Graph Format Conversion

+