From 49ce259e3c14fb68305622f87c0e9a810947fc63 Mon Sep 17 00:00:00 2001 From: Arthur Monney Date: Tue, 11 Oct 2022 23:59:25 +0100 Subject: [PATCH] :sparkles: add theme switcher menu --- src/app/core/components/app/app.component.ts | 52 +++++++++++- .../components/header/header.component.html | 81 ++++++++++++++++++- .../components/header/header.component.ts | 36 ++++++++- .../components/sidebar/sidebar.component.html | 12 +-- .../components/sidebar/sidebar.component.scss | 12 ++- .../layouts/cpanel/cpanel.component.html | 2 +- src/index.html | 2 +- 7 files changed, 174 insertions(+), 23 deletions(-) diff --git a/src/app/core/components/app/app.component.ts b/src/app/core/components/app/app.component.ts index 4c7ad22..58dce45 100644 --- a/src/app/core/components/app/app.component.ts +++ b/src/app/core/components/app/app.component.ts @@ -1,9 +1,55 @@ -import { Component } from '@angular/core'; +import { Component, OnInit } from '@angular/core'; @Component({ selector: 'admin-root', template: '', }) -export class AppComponent { - title = 'Admin Cpanel'; +export class AppComponent implements OnInit { + mediaQuery = window.matchMedia('(prefers-color-scheme: dark)'); + + updateTheme(savedTheme: string | null = null): string { + let theme = 'system' + try { + if (!savedTheme) { + savedTheme = window.localStorage.getItem('theme') + } + if (savedTheme === 'dark') { + theme = 'dark' + document.documentElement.classList.add('dark') + } else if (savedTheme === 'light') { + theme = 'light' + document.documentElement.classList.remove('dark') + } else if (this.mediaQuery.matches) { + document.documentElement.classList.add('dark') + } else { + document.documentElement.classList.remove('dark') + } + } catch { + theme = 'light' + document.documentElement.classList.remove('dark') + } + return theme + } + + updateThemeWithoutTransitions(savedTheme: string | null = null): void { + this.updateTheme(savedTheme) + document.documentElement.classList.add('[&_*]:!transition-none') + window.setTimeout(() => { + document.documentElement.classList.remove('[&_*]:!transition-none') + }, 0) + } + + ngOnInit(): void { + document.documentElement.setAttribute('data-theme', this.updateTheme()) + + new MutationObserver(([{ oldValue }]) => { + let newValue = document.documentElement.getAttribute('data-theme')! + if (newValue !== oldValue) { + try { + window.localStorage.setItem('theme', newValue) + } catch {} + this.updateThemeWithoutTransitions(newValue) + } + }).observe(document.documentElement, { attributeFilter: ['data-theme'], attributeOldValue: true }) + } } diff --git a/src/app/shared/themes/components/header/header.component.html b/src/app/shared/themes/components/header/header.component.html index 4ad42f6..7797785 100644 --- a/src/app/shared/themes/components/header/header.component.html +++ b/src/app/shared/themes/components/header/header.component.html @@ -2,7 +2,7 @@
+ + +
+ + +
    +
  • + +
    {{ theme.name }}
    +
    • +
+
+ +