Darkmode using Bootstrap 5.3

apps/frontend/src/app/about/features/features.component.scss

@@ -6,18 +6,3 @@
   font-size: 1.5rem;
   text-align: center;
 }
-
-.p-yes {
-  color: #28a745;
-  background-color: #d4edda;
-}
-
-.p-maybe {
-  color: #ffc107;
-  background-color: #fff3cd;
-}
-
-.p-no {
-  color: #dc3545;
-  background-color: #f8d7da;
-}

apps/frontend/src/app/core/core.module.ts

@@ -2,9 +2,10 @@ import {CommonModule, NgOptimizedImage} from '@angular/common';
 import {NgModule} from '@angular/core';
 import {FormsModule, ReactiveFormsModule} from '@angular/forms';
 import {RouterModule} from '@angular/router';
-import {NgbAlertModule, NgbCollapseModule, NgbTooltipModule} from '@ng-bootstrap/ng-bootstrap';
+import {NgbxDarkmodeModule, THEME_ATTRIBUTE} from '@mean-stream/ngbx';
+import {NgbAlertModule, NgbCollapseModule, NgbDropdownModule, NgbTooltipModule} from '@ng-bootstrap/ng-bootstrap';
 
-import { CookieBannerComponent } from './cookie-banner/cookie-banner.component';
+import {CookieBannerComponent} from './cookie-banner/cookie-banner.component';
 import {LocationLinkComponent} from './location-link/location-link.component';
 import {MarkdownComponent} from './markdown/markdown.component';
 import {NavbarComponent} from './navbar/navbar.component';
@@ -29,6 +30,8 @@ import {TokenComponent} from './token/token.component';
     ReactiveFormsModule,
     NgbAlertModule,
     NgOptimizedImage,
+    NgbDropdownModule,
+    NgbxDarkmodeModule,
   ],
   exports: [
     RouterModule,
@@ -39,6 +42,12 @@ import {TokenComponent} from './token/token.component';
     LocationIconPipe,
     CookieBannerComponent,
   ],
+  providers: [
+    {
+      provide: THEME_ATTRIBUTE,
+      useValue: 'data-bs-theme',
+    },
+  ],
 })
 export class CoreModule {
 }

apps/frontend/src/app/core/navbar/navbar.component.html

@@ -1,4 +1,4 @@
-<nav class="navbar navbar-dark navbar-expand-lg bg-secondary">
+<nav class="navbar navbar-dark navbar-expand-lg bg-primary">
   <div class="container-fluid">
     <img class="navbar-logo" ngSrc="/assets/logo.png" alt="Apollusia Logo" width="64" height="64" style="height: 2rem">
     <a class="navbar-brand" routerLink="/">Apollusia</a>
@@ -12,6 +12,15 @@
             Create Poll
           </a>
         </li>
+        <li ngbDropdown class="nav-item" role="presentation" placement="end">
+          <button type="button" class="nav-link bi-moon-stars" ngbDropdownToggle></button>
+          <div ngbDropdownMenu>
+            <button *ngFor="let theme of themes" ngbDropdownItem [class]="theme.icon" (click)="theme$.next(theme.value)">
+              {{ theme.name }}
+              <i [class.bi-check]="(theme$ | async) === theme.value"></i>
+            </button>
+          </div>
+        </li>
         <li class="nav-item">
           <a class="nav-link" routerLinkActive="active" routerLink="dashboard">Dashboard</a>
         </li>

apps/frontend/src/app/core/navbar/navbar.component.ts

@@ -1,4 +1,6 @@
 import {Component, OnInit} from '@angular/core';
+import {Theme, ThemeService} from '@mean-stream/ngbx';
+import {Subject} from "rxjs";
 
 @Component({
   selector: 'app-navbar',
@@ -8,7 +10,29 @@ import {Component, OnInit} from '@angular/core';
 export class NavbarComponent implements OnInit {
   menuCollapsed: boolean = true;
 
-  constructor() {
+  themes = [
+    {
+      name: 'Light',
+      value: 'light',
+      icon: 'bi-sun',
+    },
+    {
+      name: 'Dark',
+      value: 'dark',
+      icon: 'bi-moon-stars',
+    },
+    {
+      name: 'Auto',
+      value: 'auto',
+      icon: 'bi-circle-half',
+    },
+  ];
+  theme$: Subject<Theme>;
+
+  constructor(
+    themeService: ThemeService,
+  ) {
+    this.theme$ = themeService.theme$;
   }
 
   ngOnInit(): void {

apps/frontend/src/app/core/token/token.component.scss

@@ -1,4 +1,4 @@
 .blurred {
   color: transparent !important;
-  text-shadow: 0 0 8px #000 !important;
+  text-shadow: 0 0 8px var(--bs-body-color) !important;
 }

apps/frontend/src/app/dashboard/card/card.component.html

@@ -1,5 +1,5 @@
 <div class="card">
-  <div class="card-header">
+  <div class="card-header text-white bg-primary">
     <div class="d-flex justify-content-between">
       <h5 class="card-title">{{ poll.title }}</h5>
       <div class="d-flex">

apps/frontend/src/app/poll/choose-events/choose-events.component.scss

@@ -15,12 +15,12 @@
   }
 
   th:first-child, td:first-child {
-    background: linear-gradient(90deg, white, rgba(white, 0.75));
+    background: linear-gradient(90deg, var(--bs-body-bg), rgba(var(--bs-body-bg), 0.75));
     left: 0;
   }
 
   th:last-child, td:last-child {
-    background: linear-gradient(90deg, rgba(white, 0.75), white);
+    background: linear-gradient(90deg, rgba(var(--bs-body-bg), 0.75), var(--bs-body-bg));
     right: 0;
   }
 }

apps/frontend/src/index.html

@@ -16,7 +16,7 @@
   <link rel="manifest" href="manifest.webmanifest">
   <link rel="apple-touch-icon" sizes="192x192" href="/assets/icons/icon-192x192.png">
 </head>
-<body>
+<body data-bs-theme="dark">
 <app-root></app-root>
   <noscript>Please enable JavaScript to continue using this application.</noscript>
 </body>

apps/frontend/src/styles.scss

@@ -9,15 +9,11 @@ $heliotrope: #c77dffff;
 $mauve: #e0aaffff;
 
 /* Overrides */
+
 $primary: $french-violet;
-$secondary: $purple;
+$secondary: $amethyst;
 $dark: $persian-indigo;
 
-$success: $french-violet;
-$info: $amethyst;
-$warning: $heliotrope;
-$danger: $mauve;
-
 /* Imports */
 @import 'node_modules/bootstrap/scss/bootstrap';
 @import 'node_modules/bootstrap-icons/font/bootstrap-icons.css';
@@ -29,52 +25,68 @@ $danger: $mauve;
 }
 
 /* Cal-header */
+.cal-week-view {
+  background-color: var(--bs-body-bg);
+
+  & .cal-hour-odd {
+    background-color: var(--bs-tertiary-bg);
+  }
+
+  & .cal-time-events .cal-day-columns:not(.cal-resize-active) .cal-hour-segment:hover {
+    background-color: var(--bs-secondary-bg);
+  }
+
+  & .cal-day-headers .cal-header:hover,
+  & .cal-day-headers .cal-drag-over {
+    background-color: var(--bs-tertiary-bg);
+  }
+
+  & .cal-header.cal-today {
+    background-color: var(--bs-success-bg);
+  }
+
+  & .cal-header.cal-weekend span {
+    color: var(--bs-warning);
+  }
+}
+
 .cal-week-view .cal-time-events {
   max-height: calc(100vh - 320px);;
   overflow-y: auto;
 }
 
-.cal-day-headers {
-  margin-right: 17px;
-}
-
 .cal-day-columns {
   height: 100%;
 }
 
-.card-header {
-  background-color: $purple;
-  color: white;
-}
-
 .p-yes {
-  color: #28a745;
-  background-color: #d4edda;
+  color: var(--bs-success-text-emphasis) !important;
+  background-color: var(--bs-success-bg-subtle) !important;
 
   & > .form-check-input:checked {
-    background-color: #28a745;
-    border-color: #28a745;
+    background-color: var(--bs-success);
+    border-color: var(--bs-success);
   }
 }
 
 .p-no {
-  color: #dc3545;
-  background-color: #f8d7da;
+  color: var(--bs-danger-text-emphasis) !important;
+  background-color: var(--bs-danger-bg-subtle) !important;
 }
 
 .p-maybe {
-  color: #ffc107;
-  background-color: #fff3cd;
+  color: var(--bs-warning-text-emphasis) !important;
+  background-color: var(--bs-warning-bg-subtle) !important;
 
   & > .form-check-input:indeterminate {
-    background-color: #ffc107;
-    border-color: #ffc107;
+    background-color: var(--bs-warning);
+    border-color: var(--bs-warning);
   }
 }
 
 .p-unset {
-  color: gray;
-  background-color: lightgray;
+  color: var(--bs-tertiary-color);
+  background-color: var(--bs-tertiary-bg);
 }
 
 /* Ngb-Datepicker */
@@ -101,16 +113,20 @@ $danger: $mauve;
 
 .ngb-dp-day:hover {
   background-color: $amethyst;
-  color: white;
+  color: var(--bs-body-bg);
 }
 
 .ngb-dp-selected {
   background-color: $primary;
-  color: white;
+  color: var(--bs-body-bg);
+}
+
+.ngb-dp-header, .ngb-dp-weekdays {
+  background-color: var(--bs-body-bg) !important;
 }
 
 .disabled-hour {
-  background-color: lightgrey;
+  background-color: var(--bs-secondary-bg-subtle);
   cursor: not-allowed;
 }
 
@@ -124,7 +140,7 @@ $danger: $mauve;
   }
 
   blockquote {
-    border-left: 4px solid $info;
+    border-left: 4px solid var(--bs-info-border-subtle);
     padding: 0 1rem;
   }