Store prefered theme in cookies.

Default theme : light
SeaweedbrainCY · Jan 25, 2025 · ff2403e · ff2403e
1 parent 3393f7d
commit ff2403e
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 4 deletions.
diff --git a/frontend/src/app/app.component.ts b/frontend/src/app/app.component.ts
@@ -12,8 +12,12 @@ import { DOCUMENT } from '@angular/common';
 export class AppComponent implements OnInit{
   title = 'frontend';
   constructor(private renderer: Renderer2, @Inject(DOCUMENT) private document: Document) { 
-
-    this.renderer.setAttribute(document.documentElement, 'data-theme', 'light');
+    const theme = localStorage.getItem('theme');
+    if (theme == 'dark') {
+      this.renderer.setAttribute(document.documentElement, 'data-theme', 'dark');
+    } else {
+      this.renderer.setAttribute(document.documentElement, 'data-theme', 'light');
+    }
   }
 
 

diff --git a/frontend/src/app/home/home.component.html b/frontend/src/app/home/home.component.html
@@ -7,7 +7,7 @@
           <h1 class="is-size-1 has-text-weight-bold is-family-secondary	" style="line-height: normal;" translate>home.title <strong class="has-text-danger" translate>home.title.strong</strong> </h1><br>
           <h3 translate>home.subtitle <strong class="has-text-danger" translate>home.subtitle.opensource</strong> home.subtitle.and <strong
               class="has-text-danger" translate>home.subtitle.zke</strong> home.subtitle.platform</h3><br>
-          <h2><strong class="has-text-weight-semibold is-size-5" translate>home.trust.no.one</strong></h2><br><br>
+          <h2><strong class="has-text-weight-semibold has-text-white is-size-5" translate>home.trust.no.one</strong></h2><br><br>
           <div class="buttons">
             <a class="button is-info  is-medium has-text-weight-semibold" href="/login" translate>home.button.openVault</a>
             <a class="button is-info is-light is-medium has-text-weight-semibold " href="#totp" translate>home.button.learnMore</a>

diff --git a/frontend/src/app/navbar/navbar.component.html b/frontend/src/app/navbar/navbar.component.html
@@ -12,7 +12,7 @@
     <button class="button is-ghost has-text-grey-light" (click)="hide_notification()"> <fa-icon [icon]="faXmark" size="xl" ></fa-icon></button>
   </div>
 </div>
-<nav class="navbar is-dark " role="navigation" aria-label="main navigation">
+<nav class="navbar is-dark is-fixed-top" role="navigation" aria-label="main navigation">
     <div class="navbar-brand">
       <a class="navbar-item" (click)="navigateToRoute('/')" *ngIf="userService.getId()!=null">
        <img src="assets/logo_zero_totp_light.png" alt="Logo of Zero TOTP">

diff --git a/frontend/src/app/navbar/navbar.component.ts b/frontend/src/app/navbar/navbar.component.ts
@@ -212,9 +212,11 @@ export class NavbarComponent implements OnInit{
     if(this.current_theme == 'light'){
       window.document.documentElement.setAttribute('data-theme', 'dark');
       this.current_theme = 'dark';
+      localStorage.setItem('theme','dark');
     } else {
       window.document.documentElement.setAttribute('data-theme', 'light');
       this.current_theme = 'light';
+      localStorage.setItem('theme','light');
     }
   }