From 9c375ffe72b5e4846a20fb2c963f4a8e4ff418b1 Mon Sep 17 00:00:00 2001 From: Jordan Doyle Date: Sat, 16 Oct 2021 16:20:48 +0100 Subject: [PATCH] preliminary dark mode support --- chartered-frontend/src/dark.sass | 96 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ chartered-frontend/src/index.sass | 10 +++++++--- chartered-frontend/src/index.tsx | 9 +++++++++ chartered-frontend/src/pages/Dashboard.tsx | 6 +++--- chartered-frontend/src/pages/Loading.tsx | 2 +- chartered-frontend/src/pages/Login.tsx | 2 +- chartered-frontend/src/pages/Search.tsx | 6 +++--- chartered-frontend/src/pages/User.tsx | 2 +- chartered-frontend/src/pages/crate/CrateView.tsx | 6 +++--- chartered-frontend/src/pages/crate/OrganisationView.tsx | 4 ++-- chartered-frontend/src/pages/organisations/CreateOrganisation.tsx | 2 +- chartered-frontend/src/pages/organisations/ListOrganisations.tsx | 2 +- chartered-frontend/src/pages/ssh-keys/AddSshKeys.tsx | 2 +- chartered-frontend/src/pages/ssh-keys/ListSshKeys.tsx | 2 +- 14 files changed, 130 insertions(+), 21 deletions(-) diff --git a/chartered-frontend/src/dark.sass b/chartered-frontend/src/dark.sass new file mode 100644 index 0000000..45d3a88 100644 --- /dev/null +++ a/chartered-frontend/src/dark.sass @@ -1,0 +1,96 @@ +@import "../node_modules/bootstrap/scss/functions" +@import "../node_modules/bootstrap/scss/variables" +@import "../node_modules/bootstrap/scss/mixins" +@import "../node_modules/bootstrap/scss/_navbar" + +html, body + @media(prefers-color-scheme: dark) + background: hsl(213, 44%, 7%) !important + +.dark + $primary: hsl(212, 70%, 30%) + $secondary: hsl(213, 44%, 7%) + $dark: hsl(0, 0%, 0%) + $card-border-color: hsl(212, 25%, 12%) + $light: rgba(255, 255, 255, 0.55) + $link-color: $primary + + $body-color: $light + $body-bg: $secondary + + $theme-colors: ("primary": $primary, "secondary": $secondary, "danger": $danger, "info": $indigo, "dark": $dark, "light": $light) + + @each $color, $value in $theme-colors + --#{$variable-prefix}#{$color}: #{$value} + + $theme-colors-rgb: map-loop($theme-colors, to-rgb, "$value") + @each $color, $value in $theme-colors-rgb + --#{$variable-prefix}#{$color}-rgb: #{$value} + + a + color: $link-color + + table td + color: $body-color !important + + a.btn + color: white + + table + border-color: $card-border-color !important + + .nav-pills .nav-item .nav-link.active + background: $card-border-color !important + + .list-group-item + background: transparent !important + color: rgba(255, 255, 255, 0.55) !important + + .card + background: $body-bg !important + border: 1px solid $card-border-color !important + color: rgba(255, 255, 255, 0.55) !important + + .card-header + border-bottom: 1px solid $card-border-color !important + + .list-group + border-top: none + + .card + background: $card-border-color !important + + pre > pre + text-shadow: rgba(0, 0, 0, .2) 0 1px !important + background: $card-border-color !important + + code + text-shadow: rgba(0, 0, 0, .2) 0 1px !important + + code + background: $card-border-color !important + + .form-control + background: transparent !important + border-color: $card-border-color !important + + .input-group + border-color: $card-border-color + + .input-group-text + background: $body-bg !important + color: white + border-color: $card-border-color + + .form-control + background: $secondary !important + + .navbar + background: $card-border-color !important + @extend .navbar-dark + + .navbar-brand + color: $body-color !important + + --#{$variable-prefix}body-color: #{$body-color} + --#{$variable-prefix}body-bg: #{$body-bg} diff --git a/chartered-frontend/src/index.sass b/chartered-frontend/src/index.sass index b906700..131ccbf 100644 --- a/chartered-frontend/src/index.sass +++ a/chartered-frontend/src/index.sass @@ -1,4 +1,11 @@ +@import "../node_modules/bootstrap/scss/functions" +@import "../node_modules/bootstrap/scss/variables" +@import "../node_modules/bootstrap/scss/mixins" +@import "../node_modules/bootstrap/scss/root" + $primary: #0d6efd +$body-bg: $primary +$body-color: white $font-family-monospace: "Source Code Pro", SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace $font-size-base: 0.875rem $enable-cssgrid: true @@ -9,9 +16,6 @@ html background: white - -body - background: $primary code background: #f5f2f0 diff --git a/chartered-frontend/src/index.tsx b/chartered-frontend/src/index.tsx index e9fc46e..d0e4103 100644 --- a/chartered-frontend/src/index.tsx +++ a/chartered-frontend/src/index.tsx @@ -1,3 +1,4 @@ +import "./dark.sass"; // TODO: lazyload import "./index.sass"; import "./overscrollColourFixer.ts"; @@ -24,6 +25,14 @@ import CreateOrganisation from "./pages/organisations/CreateOrganisation"; import User from "./pages/User"; import Search from "./pages/Search"; + +if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) { + document.querySelector("body")?.classList.add("dark"); +} + +window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => { + document.querySelector("body")?.classList.toggle("dark", e.matches); +}); function App() { return ( diff --git a/chartered-frontend/src/pages/Dashboard.tsx b/chartered-frontend/src/pages/Dashboard.tsx index 24ad18a..b713d79 100644 --- a/chartered-frontend/src/pages/Dashboard.tsx +++ a/chartered-frontend/src/pages/Dashboard.tsx @@ -64,7 +64,7 @@ }); return ( -
+