paradizelost/paperless-ngx
1
0
Fork 0
mirror of https://github.com/paperless-ngx/paperless-ngx.git synced 2025-07-28 18:24:38 -05:00
Code Issues Packages Projects Releases Wiki Activity

Chore: change dark mode to use Bootstrap's color modes (#4174)

Browse Source 
* Change setting dark mode to use Bootstrap's data-bs-theme attribute

* Update dark mode styling to use Bootstrap's color mode attribute

* Update unit tests and lints

* Fix not reflecting custom theme color

* Remove commented-out code

* fix inverted thumbnails in dark mode & card borders

* prettier

* Fix application of dark mode, tests

---------

Co-authored-by: shamoon <4887959+shamoon@users.noreply.github.com>
This commit is contained in:
Dominik Mielcarek
2023-09-13 20:11:44 +02:00
committed by GitHub
parent d1292c59ea
commit 78ae4c42f7
6 changed files with 66 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
src-ui/src/theme.scss
View File

@@ -1,10 +1,14 @@
$color-mode-type: data;
@import 'bootstrap/scss/mixins/color-mode';
@mixin paperless-green {
// base color e.g. #17541f = hsl(128, 57%, 21%)
--pngx-primary: 128, 57%;
--pngx-primary-lightness: 21%;
}
body {
:root {
@include paperless-green;
--pngx-primary-text-contrast: var(--bs-light);
@@ -158,7 +162,7 @@ $form-check-radio-checked-bg-image-dark: url("data:image/svg+xml,<svg xmlns='htt
}
.doc-img {
mix-blend-mode: normal;
mix-blend-mode: normal !important;
border-radius: 0;
border-color: var(--bs-border-color);
filter: invert(10%);
@@ -270,9 +274,8 @@ $form-check-radio-checked-bg-image-dark: url("data:image/svg+xml,<svg xmlns='htt
}
}
body.color-scheme-dark {
// no custom theme color
&:not(.primary-light):not(.primary-dark) {
@include color-mode(dark) {
body:not(.primary-light):not(.primary-dark) {
@include paperless-green-dark-mode;
.navbar.bg-primary {
@@ -284,18 +287,22 @@ body.color-scheme-dark {
@include dark-mode;
}
@media (prefers-color-scheme: dark) {
body.color-scheme-system {
// no custom theme color
&:not(.primary-light):not(.primary-dark) {
@include paperless-green-dark-mode;
// Temp to not blink with white before angular loads
@include color-mode(auto) {
@media (prefers-color-scheme: dark) {
body {
// no custom theme color
&:not(.primary-light):not(.primary-dark) {
@include paperless-green-dark-mode;
.navbar.bg-primary {
// navbar is og green in dark mode
@include paperless-green;
.navbar.bg-primary {
// navbar is og green in dark mode
@include paperless-green;
}
}
}
@include dark-mode;
@include dark-mode;
}
}
}