mirror of
https://github.com/GNS3/gns3-web-ui.git
synced 2025-01-18 10:46:35 +00:00
Fix for theming
This commit is contained in:
piotrpekala7
parent
baa344fbe5
commit
46c4bc1d78
11
angular.json
11
angular.json
@ -47,16 +47,7 @@
|
||||
"node_modules/bootstrap/dist/css/bootstrap.min.css",
|
||||
"node_modules/notosans-fontface/css/notosans-fontface.min.css",
|
||||
"src/styles.scss",
|
||||
{
|
||||
"inject": true,
|
||||
"input": "src/theme.scss",
|
||||
"bundleName": "theme-default-dark"
|
||||
},
|
||||
{
|
||||
"inject": true,
|
||||
"input": "src/theme-light.scss",
|
||||
"bundleName": "theme-default"
|
||||
}
|
||||
"src/theme.scss"
|
||||
],
|
||||
"scripts": []
|
||||
},
|
||||
|
||||
@ -284,6 +284,7 @@ import { UpdatesService } from './services/updates.service';
|
||||
import { ReportIssueComponent } from './components/help/report-issue/report-issue.component';
|
||||
import { AngularReactBrowserModule } from '@angular-react/core';
|
||||
import { FabDialogModule, FabButtonModule } from '@angular-react/fabric';
|
||||
import { OverlayContainer, OverlayModule } from '@angular/cdk/overlay';
|
||||
|
||||
@NgModule({
|
||||
declarations: [
|
||||
@ -492,7 +493,8 @@ import { FabDialogModule, FabButtonModule } from '@angular-react/fabric';
|
||||
DragDropModule,
|
||||
NgxChildProcessModule,
|
||||
MATERIAL_IMPORTS,
|
||||
NgCircleProgressModule.forRoot()
|
||||
NgCircleProgressModule.forRoot(),
|
||||
OverlayModule
|
||||
],
|
||||
providers: [
|
||||
SettingsService,
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
import { Injectable, RendererFactory2, Renderer2, Inject, EventEmitter } from '@angular/core';
|
||||
import { Observable, BehaviorSubject, combineLatest } from 'rxjs';
|
||||
import { DOCUMENT } from '@angular/common';
|
||||
import { OverlayContainer} from '@angular/cdk/overlay';
|
||||
|
||||
@Injectable({ providedIn: 'root' })
|
||||
export class ThemeService {
|
||||
@ -17,18 +18,19 @@ export class ThemeService {
|
||||
|
||||
constructor(
|
||||
rendererFactory: RendererFactory2,
|
||||
private overlayContainer: OverlayContainer,
|
||||
@Inject(DOCUMENT) document: Document
|
||||
) {
|
||||
this.head = document.head;
|
||||
this._renderer = rendererFactory.createRenderer(null, null);
|
||||
this.theme$ = combineLatest(this._mainTheme$, this._darkMode$);
|
||||
this.theme$.subscribe(async ([mainTheme, darkMode]) => {
|
||||
const cssExt = '.css';
|
||||
const cssFilename = darkMode ? mainTheme + '-dark' + cssExt : mainTheme + cssExt;
|
||||
await this.loadCss(cssFilename);
|
||||
if (this.themeLinks.length == 2)
|
||||
this._renderer.removeChild(this.head, this.themeLinks.shift());
|
||||
})
|
||||
// this.head = document.head;
|
||||
// this._renderer = rendererFactory.createRenderer(null, null);
|
||||
// this.theme$ = combineLatest(this._mainTheme$, this._darkMode$);
|
||||
// this.theme$.subscribe(async ([mainTheme, darkMode]) => {
|
||||
// const cssExt = '.css';
|
||||
// const cssFilename = darkMode ? mainTheme + '-dark' + cssExt : mainTheme + cssExt;
|
||||
// await this.loadCss(cssFilename);
|
||||
// if (this.themeLinks.length == 2)
|
||||
// this._renderer.removeChild(this.head, this.themeLinks.shift());
|
||||
// })
|
||||
}
|
||||
|
||||
getActualTheme() {
|
||||
@ -40,17 +42,20 @@ export class ThemeService {
|
||||
}
|
||||
|
||||
setDarkMode(value: boolean) {
|
||||
this._darkMode$.next(value);
|
||||
localStorage.removeItem('theme');
|
||||
if (value) {
|
||||
this.savedTheme = 'dark';
|
||||
this.themeChanged.emit(this.savedTheme);
|
||||
localStorage.setItem('theme', 'dark');
|
||||
} else {
|
||||
this.savedTheme = 'light';
|
||||
this.themeChanged.emit(this.savedTheme);
|
||||
localStorage.setItem('theme', 'light');
|
||||
}
|
||||
if (value) this.overlayContainer.getContainerElement().classList.add('dark-theme');
|
||||
if (!value) this.overlayContainer.getContainerElement().classList.add('light-theme');
|
||||
|
||||
// this._darkMode$.next(value);
|
||||
// localStorage.removeItem('theme');
|
||||
// if (value) {
|
||||
// this.savedTheme = 'dark';
|
||||
// this.themeChanged.emit(this.savedTheme);
|
||||
// localStorage.setItem('theme', 'dark');
|
||||
// } else {
|
||||
// this.savedTheme = 'light';
|
||||
// this.themeChanged.emit(this.savedTheme);
|
||||
// localStorage.setItem('theme', 'light');
|
||||
// }
|
||||
}
|
||||
|
||||
private async loadCss(filename: string) {
|
||||
|
||||
@ -1,70 +0,0 @@
|
||||
@import '~@angular/material/theming';
|
||||
@import '~material-design-icons/iconfont/material-icons.css';
|
||||
@import '~typeface-roboto/index.css';
|
||||
|
||||
// Include non-theme styles for core.
|
||||
@include mat-core();
|
||||
|
||||
// Define a theme.
|
||||
$primary: mat-palette($mat-cyan, 700, 500, 900);
|
||||
$accent: mat-palette($mat-blue, A200, A100, A700);
|
||||
|
||||
$theme: mat-light-theme($primary, $accent);
|
||||
|
||||
$light-palette: mat-palette($mat-blue, 900, A100, A400);
|
||||
$light-background: mat-light-theme($light-palette, $primary);
|
||||
|
||||
$mat-light-theme-background: (
|
||||
status-bar: black,
|
||||
app-bar: map_get($mat-blue, 900),
|
||||
background: white,
|
||||
hover: rgba(white, 0.04),
|
||||
card: white,
|
||||
dialog: white,
|
||||
disabled-button: $white-12-opacity,
|
||||
raised-button: white,
|
||||
focused-button: $white-6-opacity,
|
||||
selected-button: map_get($mat-blue, 900),
|
||||
selected-disabled-button: map_get($mat-blue, 800),
|
||||
disabled-button-toggle: black,
|
||||
unselected-chip: map_get($mat-blue, 700),
|
||||
disabled-list-option: black
|
||||
);
|
||||
|
||||
$theme: map-merge(
|
||||
$theme,
|
||||
(
|
||||
background: $mat-light-theme-background
|
||||
)
|
||||
);
|
||||
|
||||
@include mat-core-theme($theme);
|
||||
@include mat-autocomplete-theme($theme);
|
||||
@include mat-button-theme($theme);
|
||||
@include mat-button-toggle-theme($theme);
|
||||
@include mat-card-theme($theme);
|
||||
@include mat-checkbox-theme($theme);
|
||||
@include mat-chips-theme($theme);
|
||||
@include mat-table-theme($theme);
|
||||
@include mat-datepicker-theme($theme);
|
||||
@include mat-dialog-theme($theme);
|
||||
@include mat-expansion-panel-theme($theme);
|
||||
@include mat-form-field-theme($theme);
|
||||
@include mat-grid-list-theme($theme);
|
||||
@include mat-icon-theme($theme);
|
||||
@include mat-input-theme($theme);
|
||||
@include mat-list-theme($theme);
|
||||
@include mat-menu-theme($theme);
|
||||
@include mat-paginator-theme($theme);
|
||||
@include mat-progress-bar-theme($theme);
|
||||
@include mat-progress-spinner-theme($theme);
|
||||
@include mat-radio-theme($theme);
|
||||
@include mat-select-theme($theme);
|
||||
@include mat-sidenav-theme($theme);
|
||||
@include mat-slide-toggle-theme($theme);
|
||||
@include mat-slider-theme($theme);
|
||||
@include mat-stepper-theme($theme);
|
||||
@include mat-tabs-theme($theme);
|
||||
@include mat-toolbar-theme($light-background);
|
||||
@include mat-tooltip-theme($theme);
|
||||
@include mat-snack-bar-theme($theme);
|
||||
135
src/theme.scss
135
src/theme.scss
@ -1,16 +1,13 @@
|
||||
@import '~@angular/material/theming';
|
||||
@import '~material-design-icons/iconfont/material-icons.css';
|
||||
@import '~typeface-roboto/index.css';
|
||||
|
||||
// Include non-theme styles for core.
|
||||
@include mat-core();
|
||||
|
||||
// Define a theme.
|
||||
$primary: mat-palette($mat-cyan, 700, 500, 900);
|
||||
$accent: mat-palette($mat-blue-grey, A200, A100, A700);
|
||||
|
||||
$theme: mat-dark-theme($primary, $accent);
|
||||
|
||||
// Dark theme
|
||||
$dark-theme: mat-dark-theme($primary, $accent);
|
||||
$dark-palette: mat-palette($mat-blue-grey, 900, A100, A400);
|
||||
$dark-background: mat-dark-theme($dark-palette, $primary);
|
||||
|
||||
@ -31,40 +28,104 @@ $mat-dark-theme-background: (
|
||||
disabled-list-option: black
|
||||
);
|
||||
|
||||
$theme: map-merge(
|
||||
$theme,
|
||||
$dark-theme: map-merge(
|
||||
$dark-theme,
|
||||
(
|
||||
background: $mat-dark-theme-background
|
||||
)
|
||||
);
|
||||
|
||||
@include mat-core-theme($theme);
|
||||
@include mat-autocomplete-theme($theme);
|
||||
@include mat-button-theme($theme);
|
||||
@include mat-button-toggle-theme($theme);
|
||||
@include mat-card-theme($theme);
|
||||
@include mat-checkbox-theme($theme);
|
||||
@include mat-chips-theme($theme);
|
||||
@include mat-table-theme($theme);
|
||||
@include mat-datepicker-theme($theme);
|
||||
@include mat-dialog-theme($theme);
|
||||
@include mat-expansion-panel-theme($theme);
|
||||
@include mat-form-field-theme($theme);
|
||||
@include mat-grid-list-theme($theme);
|
||||
@include mat-icon-theme($theme);
|
||||
@include mat-input-theme($theme);
|
||||
@include mat-list-theme($theme);
|
||||
@include mat-menu-theme($theme);
|
||||
@include mat-paginator-theme($theme);
|
||||
@include mat-progress-bar-theme($theme);
|
||||
@include mat-progress-spinner-theme($theme);
|
||||
@include mat-radio-theme($theme);
|
||||
@include mat-select-theme($theme);
|
||||
@include mat-sidenav-theme($theme);
|
||||
@include mat-slide-toggle-theme($theme);
|
||||
@include mat-slider-theme($theme);
|
||||
@include mat-stepper-theme($theme);
|
||||
@include mat-tabs-theme($theme);
|
||||
@include mat-toolbar-theme($dark-background);
|
||||
@include mat-tooltip-theme($theme);
|
||||
@include mat-snack-bar-theme($theme);
|
||||
.dark-theme {
|
||||
@include mat-core-theme($dark-theme);
|
||||
@include mat-autocomplete-theme($dark-theme);
|
||||
@include mat-button-theme($dark-theme);
|
||||
@include mat-button-toggle-theme($dark-theme);
|
||||
@include mat-card-theme($dark-theme);
|
||||
@include mat-checkbox-theme($dark-theme);
|
||||
@include mat-chips-theme($dark-theme);
|
||||
@include mat-table-theme($dark-theme);
|
||||
@include mat-datepicker-theme($dark-theme);
|
||||
@include mat-dialog-theme($dark-theme);
|
||||
@include mat-expansion-panel-theme($dark-theme);
|
||||
@include mat-form-field-theme($dark-theme);
|
||||
@include mat-grid-list-theme($dark-theme);
|
||||
@include mat-icon-theme($dark-theme);
|
||||
@include mat-input-theme($dark-theme);
|
||||
@include mat-list-theme($dark-theme);
|
||||
@include mat-menu-theme($dark-theme);
|
||||
@include mat-paginator-theme($dark-theme);
|
||||
@include mat-progress-bar-theme($dark-theme);
|
||||
@include mat-progress-spinner-theme($dark-theme);
|
||||
@include mat-radio-theme($dark-theme);
|
||||
@include mat-select-theme($dark-theme);
|
||||
@include mat-sidenav-theme($dark-theme);
|
||||
@include mat-slide-toggle-theme($dark-theme);
|
||||
@include mat-slider-theme($dark-theme);
|
||||
@include mat-stepper-theme($dark-theme);
|
||||
@include mat-tabs-theme($dark-theme);
|
||||
@include mat-toolbar-theme($dark-background);
|
||||
@include mat-tooltip-theme($dark-theme);
|
||||
@include mat-snack-bar-theme($dark-theme);
|
||||
}
|
||||
|
||||
// Light theme
|
||||
$light-theme: mat-light-theme($primary, $accent);
|
||||
$light-palette: mat-palette($mat-blue, 900, A100, A400);
|
||||
$light-background: mat-light-theme($light-palette, $primary);
|
||||
|
||||
$mat-light-theme-background: (
|
||||
status-bar: black,
|
||||
app-bar: map_get($mat-blue, 900),
|
||||
background: white,
|
||||
hover: rgba(white, 0.04),
|
||||
card: white,
|
||||
dialog: white,
|
||||
disabled-button: $white-12-opacity,
|
||||
raised-button: white,
|
||||
focused-button: $white-6-opacity,
|
||||
selected-button: map_get($mat-blue, 900),
|
||||
selected-disabled-button: map_get($mat-blue, 800),
|
||||
disabled-button-toggle: black,
|
||||
unselected-chip: map_get($mat-blue, 700),
|
||||
disabled-list-option: black
|
||||
);
|
||||
|
||||
$light-theme: map-merge(
|
||||
$light-theme,
|
||||
(
|
||||
background: $mat-light-theme-background
|
||||
)
|
||||
);
|
||||
|
||||
.light-theme {
|
||||
@include mat-core-theme($light-theme);
|
||||
@include mat-autocomplete-theme($light-theme);
|
||||
@include mat-button-theme($light-theme);
|
||||
@include mat-button-toggle-theme($light-theme);
|
||||
@include mat-card-theme($light-theme);
|
||||
@include mat-checkbox-theme($light-theme);
|
||||
@include mat-chips-theme($light-theme);
|
||||
@include mat-table-theme($light-theme);
|
||||
@include mat-datepicker-theme($light-theme);
|
||||
@include mat-dialog-theme($light-theme);
|
||||
@include mat-expansion-panel-theme($light-theme);
|
||||
@include mat-form-field-theme($light-theme);
|
||||
@include mat-grid-list-theme($light-theme);
|
||||
@include mat-icon-theme($light-theme);
|
||||
@include mat-input-theme($light-theme);
|
||||
@include mat-list-theme($light-theme);
|
||||
@include mat-menu-theme($light-theme);
|
||||
@include mat-paginator-theme($light-theme);
|
||||
@include mat-progress-bar-theme($light-theme);
|
||||
@include mat-progress-spinner-theme($light-theme);
|
||||
@include mat-radio-theme($light-theme);
|
||||
@include mat-select-theme($light-theme);
|
||||
@include mat-sidenav-theme($light-theme);
|
||||
@include mat-slide-toggle-theme($light-theme);
|
||||
@include mat-slider-theme($light-theme);
|
||||
@include mat-stepper-theme($light-theme);
|
||||
@include mat-tabs-theme($light-theme);
|
||||
@include mat-toolbar-theme($light-background);
|
||||
@include mat-tooltip-theme($light-theme);
|
||||
@include mat-snack-bar-theme($light-theme);
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user