Change theme to fit dark theme better

Signed-off-by: trivernis <trivernis@protonmail.com>
pull/4/head
trivernis 3 years ago
parent e6026cfd27
commit df437a6cec

@ -35,7 +35,7 @@
"src/assets" "src/assets"
], ],
"styles": [ "styles": [
"./node_modules/ngx-lightbox/lightbox.css", "./node_modules/@angular/material/prebuilt-themes/purple-green.css",
"src/styles.scss" "src/styles.scss"
], ],
"scripts": [] "scripts": []
@ -104,7 +104,7 @@
"src/assets" "src/assets"
], ],
"styles": [ "styles": [
"./node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css", "./node_modules/@angular/material/prebuilt-themes/purple-green.css",
"src/styles.scss" "src/styles.scss"
], ],
"scripts": [] "scripts": []

@ -22,7 +22,6 @@ import {FileGridEntryComponent} from './components/file-grid/file-grid-entry/fil
import {MatProgressBarModule} from "@angular/material/progress-bar"; import {MatProgressBarModule} from "@angular/material/progress-bar";
import {MatPaginatorModule} from "@angular/material/paginator"; import {MatPaginatorModule} from "@angular/material/paginator";
import {ScrollingModule} from "@angular/cdk/scrolling"; import {ScrollingModule} from "@angular/cdk/scrolling";
import {LightboxModule} from "ngx-lightbox";
import {MatChipsModule} from "@angular/material/chips"; import {MatChipsModule} from "@angular/material/chips";
import {MatIconModule} from "@angular/material/icon"; import {MatIconModule} from "@angular/material/icon";
import {MatAutocompleteModule} from "@angular/material/autocomplete"; import {MatAutocompleteModule} from "@angular/material/autocomplete";
@ -86,7 +85,6 @@ import {TagItemComponent} from './components/tag-item/tag-item.component';
MatProgressBarModule, MatProgressBarModule,
MatPaginatorModule, MatPaginatorModule,
ScrollingModule, ScrollingModule,
LightboxModule,
MatChipsModule, MatChipsModule,
MatIconModule, MatIconModule,
MatAutocompleteModule, MatAutocompleteModule,

@ -0,0 +1,27 @@
@use 'sass:map';
@use '~@angular/material' as mat;
@mixin color($theme) {
$color-config: mat.get-color-config($theme);
$primary-palette: map.get($color-config, 'primary');
div.image-wrapper.selected {
background-color: mat.get-color-from-palette($primary-palette, 'darker');
}
}
@mixin typography($theme) {
}
@mixin theme($theme) {
$color-config: mat.get-color-config($theme);
@if $color-config != null {
@include color($theme);
}
$typography-config: mat.get-typography-config($theme);
@if $typography-config != null {
@include typography($theme);
}
}

@ -14,7 +14,3 @@ app-content-aware-image {
cursor: pointer; cursor: pointer;
user-select: none; user-select: none;
} }
.image-wrapper.selected {
background-color: darken(dimgrey, 5);
}

@ -4,7 +4,6 @@
@mixin color($theme) { @mixin color($theme) {
$color-config: mat.get-color-config($theme); $color-config: mat.get-color-config($theme);
$primary-palette: map.get($color-config, 'primary'); $primary-palette: map.get($color-config, 'primary');
$warn-palette: map.get($color-config, 'warn');
mat-card.selected { mat-card.selected {
background-color: mat.get-color-from-palette($primary-palette, 'darker'); background-color: mat.get-color-from-palette($primary-palette, 'darker');

@ -3,13 +3,14 @@
@use 'src/app/app.component-theme' as app; @use 'src/app/app.component-theme' as app;
@use 'src/app/components/file-grid/file-grid-entry/file-grid-entry.component-theme' as file-grid-entry; @use 'src/app/components/file-grid/file-grid-entry/file-grid-entry.component-theme' as file-grid-entry;
@use 'src/app/components/file-search/file-search.component-theme' as file-search; @use 'src/app/components/file-search/file-search.component-theme' as file-search;
@use "src/app/components/file-gallery/file-gallery-entry/file-gallery-entry.component-theme" as gallery-entry;
@include mat.core(); @include mat.core();
$theme: mat.define-dark-theme(( $theme: mat.define-dark-theme((
color: ( color: (
primary: mat.define-palette(mat.$deep-purple-palette), primary: mat.define-palette(mat.$purple-palette, 700, 500, 800),
accent: mat.define-palette(mat.$green-palette), accent: mat.define-palette(mat.$green-palette, A200, A100, A400),
warn: mat.define-palette(mat.$red-palette), warn: mat.define-palette(mat.$red-palette),
background: mat.define-palette(mat.$blue-grey-palette) background: mat.define-palette(mat.$blue-grey-palette)
), ),
@ -22,3 +23,4 @@ $theme: mat.define-dark-theme((
@include app.theme($theme); @include app.theme($theme);
@include file-grid-entry.theme($theme); @include file-grid-entry.theme($theme);
@include file-search.theme($theme); @include file-search.theme($theme);
@include gallery-entry.theme($theme);

Loading…
Cancel
Save