paradizelost/paperless-ngx
1
0
Fork 0
mirror of https://github.com/paperless-ngx/paperless-ngx.git synced 2025-04-02 13:45:10 -05:00
Code Issues Packages Projects Releases Wiki Activity

Initial theme SCSS

Browse Source
This commit is contained in:
Michael Shamoon 2020-12-27 23:05:52 -08:00
parent c6acf2f7f6
commit 86079a936e
2 changed files with 233 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,4 +1,5 @@
@import "theme";
@import "theme_dark";
@import "node_modules/bootstrap/scss/bootstrap";
@import "~@ng-select/ng-select/themes/default.theme.css";

232
src-ui/src/theme_dark.scss Normal file
View File

@ -0,0 +1,232 @@
$bg-dark-mode: #161618;
$bg-light-dark-mode: #1c1c1f;
$text-color-dark-mode: #abb2bf;
$text-color-dark-mode-accent: lighten($text-color-dark-mode, 10%);
$border-color-dark-mode: #47494f;
* {
transition: background-color 0.3s ease, border-color 0.3s ease;
}
@mixin dark-mode {
background-color: $bg-dark-mode !important;
color: $text-color-dark-mode;
.navbar-brand {
color: $text-color-dark-mode;
}
.bg-light {
background-color: $bg-light-dark-mode !important;
a,
div {
color: $text-color-dark-mode !important;
}
}
.border,
.border-bottom,
.border-left,
.border-right {
border-color: $border-color-dark-mode !important;
}
.nav-link.active {
background-color: $bg-dark-mode;
color: $text-color-dark-mode;
border-color: $border-color-dark-mode $border-color-dark-mode $bg-dark-mode;
}
.nav-link:hover {
border-color: $border-color-dark-mode $border-color-dark-mode $bg-dark-mode;
}
.nav-tabs {
border-color: $border-color-dark-mode;
}
.dropdown-menu {
background-color: $bg-dark-mode;
.dropdown-divider {
border-color: $border-color-dark-mode;
}
.dropdown-item {
color: $text-color-dark-mode;
&:hover {
background-color: $bg-light-dark-mode;
color: $text-color-dark-mode;
}
}
.dropdown-item.disabled {
color: darken($text-color-dark-mode, 20%);
}
}
.card {
background-color: $bg-light-dark-mode;
.card-text {
color: $text-color-dark-mode;
}
}
app-tag .badge {
opacity: 0.8;
color: $bg-dark-mode !important;
}
.badge-light {
background-color: darken($bg-dark-mode, 20%);
color: $text-color-dark-mode-accent;
}
.doc-img {
background-color: lighten($bg-light-dark-mode, 30%);
mix-blend-mode: soft-light;
}
.doc-img-background {
background-color: lighten($bg-light-dark-mode, 30%);
}
.doc-img-background-selected {
background-color: lighten($bg-light-dark-mode, 35%);
}
.toast {
background-color: opacify($bg-light-dark-mode, .85);
}
.toast-header {
background-color: opacify($bg-dark-mode, .85);
}
a:hover {
color: lighten($primary, 10%);
}
table {
background-color: $bg-dark-mode;
color: $text-color-dark-mode;
border-color: $border-color-dark-mode;
}
.table td,
.table th {
border-color: $border-color-dark-mode;
}
.table-row-selected {
background-color: $bg-light-dark-mode;
}
.close {
text-shadow: 0 1px 0 #666;
}
.btn-outline-primary:hover {
background-color: darken($primary, 10%);
color: $text-color-dark-mode-accent;
}
.btn-outline-secondary {
border-color: $border-color-dark-mode;
color: $border-color-dark-mode;
&:hover {
background-color: $bg-dark-mode;
}
}
.btn-link:hover,
.btn-outline-primary:not(:disabled):not(.disabled).active,
.btn-outline-primary:not(:disabled):not(.disabled):active,
.show > .btn-outline-primary.dropdown-toggle {
color: $text-color-dark-mode-accent;
}
.form-control,
input,
select,
textarea {
background-color: $bg-dark-mode;
color: $text-color-dark-mode;
border-color: $border-color-dark-mode;
&::placeholder {
color: $text-color-dark-mode;
}
&:focus {
background-color: $bg-light-dark-mode !important;
color: darken($text-color-dark-mode, 10%) !important;
}
}
.ng-select-container,
.ng-select.ng-select-opened > .ng-select-container,
.ng-dropdown-panel,
.ng-dropdown-panel .ng-dropdown-panel-items .ng-option {
background-color: $bg-dark-mode;
color: $text-color-dark-mode;
border-color: $border-color-dark-mode;
input:focus {
background-color: $bg-dark-mode !important;
}
}
.ng-dropdown-panel .ng-dropdown-panel-items .ng-option:hover {
background-color: $bg-light-dark-mode;
}
.custom-control-label:before {
background-color: $bg-dark-mode;
color: $text-color-dark-mode;
}
.custom-control-input:checked ~ .custom-control-label::before {
color: $text-color-dark-mode-accent;
}
.input-group-text {
color: $text-color-dark-mode;
background-color: $bg-light-dark-mode;
border-color: $border-color-dark-mode;
}
.list-group-item {
color: $text-color-dark-mode;
background-color: $bg-light-dark-mode;
border-color: $border-color-dark-mode;
}
.page-item.disabled .page-link {
background-color: $bg-dark-mode;
border-color: $border-color-dark-mode;
}
.list-group-item,
.page-link {
background-color: $bg-light-dark-mode;
border-color: $border-color-dark-mode;
}
.page-item.active .page-link {
border-color: $border-color-dark-mode;
color: $text-color-dark-mode-accent;
}
}
body.dark-mode {
@include dark-mode;
}
@media (prefers-color-scheme: dark) {
body.dark-mode-preferred {
@include dark-mode;
}
}