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>
<html lang="en">
<html lang="en" data-bs-theme="auto">
<head>
<meta charset="utf-8">
<title>Paperless-ngx</title>

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

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

49
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);
@ -270,8 +274,7 @@ $form-check-radio-checked-bg-image-dark: url("data:image/svg+xml,<svg xmlns='htt
}
}
body.color-scheme-dark {
// no custom theme color
@include color-mode(dark) {
&:not(.primary-light):not(.primary-dark) {
@include paperless-green-dark-mode;
@ -284,18 +287,38 @@ 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;
}
}
}
//@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;
// }
//}