From cca622112bd9d2f702d41ff046dc27bfcaafa40d Mon Sep 17 00:00:00 2001 From: Tommaso Visconti Date: Sun, 30 Apr 2023 19:43:51 +0200 Subject: [PATCH] Add dark/light mode (#108) Add support for dark/light theme The browser theme is initially used. A switch in the navbar let the user choose their theme. The selection is saved into localStorage for persistency Fixes https://github.com/arl/statsviz/issues/23 --- internal/static/css/statsviz.css | 13 +++++++++ internal/static/index.html | 7 +++-- internal/static/js/app.js | 23 +++++++++++++-- internal/static/js/plot.js | 48 ++++++++++++++++++++++++++++---- internal/static/js/theme.js | 36 ++++++++++++++++++++++++ 5 files changed, 118 insertions(+), 9 deletions(-) create mode 100644 internal/static/js/theme.js diff --git a/internal/static/css/statsviz.css b/internal/static/css/statsviz.css index 735a920e..d9c6e2ab 100644 --- a/internal/static/css/statsviz.css +++ b/internal/static/css/statsviz.css @@ -4,6 +4,19 @@ body { margin: 0; } +nav.navbar { + background-color: #f8f9fa; +} + +body.dark-theme { + color: white; + background-color: #282a2c; +} + +body.dark-theme nav.navbar span.action svg { + color: lightgray; +} + #header { text-align: center; } diff --git a/internal/static/index.html b/internal/static/index.html index fadbad8e..f032b78c 100644 --- a/internal/static/index.html +++ b/internal/static/index.html @@ -20,7 +20,7 @@ -