lgcosta/paperless-ngx
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Dominik Mielcarek 2023-09-12 23:07:00 +02:00 committed by shamoon
parent 8e034ac42b
commit 4ab98a0447
3 changed files with 38 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src-ui/src/index.html
View File

@ -1,5 +1,5 @@
<!doctype html> <!doctype html>
<html lang="en"> <html lang="en" data-bs-theme="auto">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>Paperless-ngx</title> <title>Paperless-ngx</title>

2
src-ui/src/styles.scss
View File

@ -1,8 +1,8 @@
// bs options // bs options
$enable-negative-margins: true; $enable-negative-margins: true;
@import "theme";
@import "node_modules/bootstrap/scss/bootstrap"; @import "node_modules/bootstrap/scss/bootstrap";
@import "theme";
@import "~@ng-select/ng-select/themes/default.theme.css"; @import "~@ng-select/ng-select/themes/default.theme.css";
@import "print"; @import "print";

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

@ -1,10 +1,14 @@
$color-mode-type: data;
@import 'bootstrap/scss/mixins/color-mode';
@mixin paperless-green { @mixin paperless-green {
// base color e.g. #17541f = hsl(128, 57%, 21%) // base color e.g. #17541f = hsl(128, 57%, 21%)
--pngx-primary: 128, 57%; --pngx-primary: 128, 57%;
--pngx-primary-lightness: 21%; --pngx-primary-lightness: 21%;
} }
body { :root {
@include paperless-green; @include paperless-green;
--pngx-primary-text-contrast: var(--bs-light); --pngx-primary-text-contrast: var(--bs-light);
@ -270,8 +274,7 @@ $form-check-radio-checked-bg-image-dark: url("data:image/svg+xml,<svg xmlns='htt
} }
} }
body.color-scheme-dark { @include color-mode(dark) {
// no custom theme color
&:not(.primary-light):not(.primary-dark) { &:not(.primary-light):not(.primary-dark) {
@include paperless-green-dark-mode; @include paperless-green-dark-mode;
@ -284,8 +287,10 @@ body.color-scheme-dark {
@include dark-mode; @include dark-mode;
} }
@media (prefers-color-scheme: dark) { // Temp to not blink with white before angular loads
body.color-scheme-system { @include color-mode(auto) {
@media (prefers-color-scheme: dark) {
body {
// no custom theme color // no custom theme color
&:not(.primary-light):not(.primary-dark) { &:not(.primary-light):not(.primary-dark) {
@include paperless-green-dark-mode; @include paperless-green-dark-mode;
@ -298,4 +303,22 @@ body.color-scheme-dark {
@include dark-mode; @include dark-mode;
} }
}
} }
//@media (prefers-color-scheme: dark) {
// :root {
// // 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;
// }
// }
//
// @include dark-mode;
// }
//}