feat: Implement dark mode

src/app/app.component.html

@@ -1,4 +1,10 @@
 <!--The content below is only a placeholder and can be replaced.-->
+<div style="text-align:center; padding: 10px;">
+  <button (click)="toggleDarkMode()" class="theme-toggle-button">
+    {{ isDarkMode ? 'Switch to Light Mode' : 'Switch to Dark Mode' }}
+  </button>
+</div>
+
 <div class="gray">
     <h1>
         Welcome to {{ title }}!

src/app/app.component.scss

@@ -0,0 +1,24 @@
+.theme-toggle-button {
+  padding: 8px 16px;
+  border-radius: 4px;
+  font-size: 14px;
+  cursor: pointer;
+  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
+
+  // Use the CSS variables defined in _variables.scss
+  background-color: var(--button-background-color, #007bff); // Fallback if variables not defined
+  color: var(--button-text-color, #ffffff);
+  border: 1px solid var(--button-border-color, #007bff);
+
+  &:hover {
+    background-color: var(--button-hover-background-color, #0056b3);
+    border-color: var(--button-hover-border-color, #0056b3);
+    // Note: The prompt didn't specify hover text color, so it will inherit.
+    // If needed, add: color: var(--button-hover-text-color, #ffffff);
+  }
+
+  &:focus {
+    outline: none;
+    box-shadow: 0 0 0 3px var(--button-focus-shadow-color, rgba(0, 123, 255, 0.5));
+  }
+}

src/app/app.component.ts

@@ -1,10 +1,49 @@
-import { Component } from '@angular/core';
+import { Component, Renderer2, Inject, OnInit } from '@angular/core';
+import { DOCUMENT } from '@angular/common';
 
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.scss']
 })
-export class AppComponent {
+export class AppComponent implements OnInit {
   title = 'app';
+  public isDarkMode: boolean = false;
+  private readonly THEME_KEY = 'theme-preference';
+
+  constructor(
+    private renderer: Renderer2,
+    @Inject(DOCUMENT) private document: Document
+  ) {}
+
+  ngOnInit(): void {
+    this.loadTheme();
+  }
+
+  private loadTheme(): void {
+    const storedPreference = localStorage.getItem(this.THEME_KEY);
+    if (storedPreference) {
+      this.isDarkMode = storedPreference === 'dark';
+    } else {
+      // Check for system preference if no stored preference and window is defined
+      if (typeof window !== 'undefined' && window.matchMedia) {
+        this.isDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;
+      }
+    }
+    this.updateTheme();
+  }
+
+  private updateTheme(): void {
+    if (this.isDarkMode) {
+      this.renderer.addClass(this.document.body, 'dark-theme');
+    } else {
+      this.renderer.removeClass(this.document.body, 'dark-theme');
+    }
+  }
+
+  public toggleDarkMode(): void {
+    this.isDarkMode = !this.isDarkMode;
+    this.updateTheme();
+    localStorage.setItem(this.THEME_KEY, this.isDarkMode ? 'dark' : 'light');
+  }
 }

src/styles/_dark-theme.scss

@@ -0,0 +1,38 @@
+// src/styles/_dark-theme.scss
+
+// This file is intended for specific dark-theme-only styles or more complex adjustments
+// that are not covered by the general CSS variable overrides in `_variables.scss`.
+// Most theme variable changes (like --background-color, --text-color) are handled
+// by the `body.dark-theme` class defined in `_variables.scss`.
+
+// Ensure components primarily use the CSS variables defined in _variables.scss, e.g.:
+// background-color: var(--background-color);
+// color: var(--text-color);
+
+// If there are components that don't naturally inherit these variables, or require
+// unique styling in dark mode, add specific overrides here.
+
+// Example for links to ensure they use the theme's primary color in dark mode:
+body.dark-theme a {
+  color: var(--primary-color); // --primary-color is updated to --dark-primary-color by body.dark-theme
+}
+
+// Example for headings, if they needed a color different from the general --text-color:
+// body.dark-theme h1,
+// body.dark-theme h2,
+// body.dark-theme h3 {
+//   color: var(--text-color); // Default behavior, but could be a more specific dark theme heading color
+// }
+
+// The div with class "gray" in app.component.html might need specific styling
+// if its current gray background doesn't work well in dark mode.
+// However, without knowing what "gray" class does, we'll assume it's either
+// not problematic or will be handled by general variable changes.
+// If it has its own background color that clashes, an override would be:
+// body.dark-theme .gray {
+//   background-color: var(--card-background-color); // Or another suitable dark theme background
+//   color: var(--text-color);
+// }
+
+// For now, this file is kept minimal as _variables.scss handles the core switching.
+// Add more specific rules here as the application develops and needs arise.

src/styles/_variables.scss

@@ -0,0 +1,92 @@
+// Light theme color variables
+:root {
+  --light-background-color: #ffffff;
+  --light-text-color: #333333;
+  --light-primary-color: #007bff;
+  --light-secondary-color: #6c757d;
+  --light-accent-color: #ffc107; // Example accent color
+  --light-border-color: #dee2e6;
+  --light-card-background-color: #f8f9fa;
+  // Button specific light theme variables
+  --light-button-background-color: var(--light-primary-color);
+  --light-button-text-color: #ffffff;
+  --light-button-border-color: var(--light-primary-color);
+  --light-button-hover-background-color: #0056b3; // Darker shade of blue for hover
+  --light-button-hover-text-color: #ffffff;
+  --light-button-hover-border-color: #004085; // Even darker blue for hover border
+  --light-button-focus-shadow-color: rgba(0, 123, 255, 0.5);
+}
+
+// Dark theme color variables
+// These are defined but not directly used by default.
+// They are referenced by the body.dark-theme class.
+:root {
+  --dark-background-color: #121212;
+  --dark-text-color: #e0e0e0;
+  --dark-primary-color: #3782d5; // Lighter blue for dark mode
+  --dark-secondary-color: #5a6268;
+  --dark-accent-color: #ffca2c; // Slightly adjusted accent for dark
+  --dark-border-color: #495057;
+  --dark-card-background-color: #1e1e1e;
+  // Button specific dark theme variables
+  --dark-button-background-color: var(--dark-primary-color);
+  --dark-button-text-color: #ffffff; // White text can work well on #3782d5
+  --dark-button-border-color: var(--dark-primary-color);
+  --dark-button-hover-background-color: #2c6cb0; // Darker shade of the dark primary
+  --dark-button-hover-text-color: #ffffff;
+  --dark-button-hover-border-color: #275f9a; // Even darker shade
+  --dark-button-focus-shadow-color: rgba(55, 130, 213, 0.5);
+}
+
+// General-purpose CSS variables
+// These will be used by components and default to light theme values.
+:root {
+  --background-color: var(--light-background-color);
+  --text-color: var(--light-text-color);
+  --primary-color: var(--light-primary-color);
+  --secondary-color: var(--light-secondary-color);
+  --accent-color: var(--light-accent-color);
+  --border-color: var(--light-border-color);
+  --card-background-color: var(--light-card-background-color);
+  --font-family-base: 'Arial', sans-serif; // Example font
+  --spacing-unit: 8px; // Example spacing unit
+
+  // General button variables
+  --button-background-color: var(--light-button-background-color);
+  --button-text-color: var(--light-button-text-color);
+  --button-border-color: var(--light-button-border-color);
+  --button-hover-background-color: var(--light-button-hover-background-color);
+  --button-hover-text-color: var(--light-button-hover-text-color);
+  --button-hover-border-color: var(--light-button-hover-border-color);
+  --button-focus-shadow-color: var(--light-button-focus-shadow-color);
+}
+
+// Dark theme override class
+// When body has the class .dark-theme, these variables will take precedence.
+body.dark-theme {
+  --background-color: var(--dark-background-color);
+  --text-color: var(--dark-text-color);
+  --primary-color: var(--dark-primary-color);
+  --secondary-color: var(--dark-secondary-color);
+  --accent-color: var(--dark-accent-color);
+  --border-color: var(--dark-border-color);
+  --card-background-color: var(--dark-card-background-color);
+
+  // Override button variables for dark theme
+  --button-background-color: var(--dark-button-background-color);
+  --button-text-color: var(--dark-button-text-color);
+  --button-border-color: var(--dark-button-border-color);
+  --button-hover-background-color: var(--dark-button-hover-background-color);
+  --button-hover-text-color: var(--dark-button-hover-text-color);
+  --button-hover-border-color: var(--dark-button-hover-border-color);
+  --button-focus-shadow-color: var(--dark-button-focus-shadow-color);
+}
+
+// Example of existing SCSS variables (if any)
+// $primary-color-scss: #007bff; // This is a SCSS variable, not a CSS variable
+// $secondary-color-scss: #6c757d;
+
+// You can also use SCSS variables to define CSS variables if needed, for example:
+// :root {
+//   --primary-color: #{$primary-color-scss};
+// }

src/styles/styles.scss

@@ -1,5 +1,6 @@
 // @import '~bootstrap/dist/css/bootstrap.css';
 @import 'src/styles/variables';
+@import 'src/styles/dark-theme'; // Import dark theme specific styles
 @import 'src/styles/mixins';
 @import 'src/styles/shared';
 @import 'src/styles/reset';