Fix colorscheme (#9)

Co-authored-by: Myx <info@azaaxin.com>
2026-04-09 09:29:39 +00:00 · 2025-01-25 00:10:36 +01:00
parent 7fb70594d6
commit a6a0399f1a
12 changed files with 713 additions and 48 deletions
--- a/bytefy.webapp/package-lock.json
+++ b/bytefy.webapp/package-lock.json
@@ -20,9 +20,10 @@
        "@ng-icons/core": "^29.5.1",
        "@ng-icons/css.gg": "^29.5.1",
        "@ng-icons/heroicons": "^29.5.1",
+        "@primeng/themes": "^19.0.5",
        "angularx-qrcode": "^18.0.2",
        "primeicons": "^7.0.0",
-        "primeng": "^18.0.0-beta.3",
+        "primeng": "^18.0.2",
        "rxjs": "~7.8.0",
        "tailwindcss-primeui": "^0.3.4",
        "tslib": "^2.3.0",
@@ -3271,21 +3272,29 @@
        "node": ">=14"
      }
    },
-    "node_modules/@primeuix/styled": {
-      "version": "0.2.0",
-      "resolved": "https://registry.npmjs.org/@primeuix/styled/-/styled-0.2.0.tgz",
-      "integrity": "sha512-3Q6bDrmwTW88tzJsFIFenC0VyXLj0+/wYw+TZnJ/4CCDfehR4WfTs4EZdpuFtYqvmbpJ6zWXAiwSCNdSYTZkyA==",
+    "node_modules/@primeng/themes": {
+      "version": "19.0.5",
+      "resolved": "https://registry.npmjs.org/@primeng/themes/-/themes-19.0.5.tgz",
+      "integrity": "sha512-HHXAncyolxyuOR5p+7XtcY3Hg1J6MzbjrdVY3BoQZrRR0nQmatOUQkG/whmJ2dsATq2UHgOykT/a2s70kFF1Sw==",
      "dependencies": {
-        "@primeuix/utils": "^0.2.0"
+        "@primeuix/styled": "^0.3.2"
+      }
+    },
+    "node_modules/@primeuix/styled": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/@primeuix/styled/-/styled-0.3.2.tgz",
+      "integrity": "sha512-ColZes0+/WKqH4ob2x8DyNYf1NENpe5ZguOvx5yCLxaP8EIMVhLjWLO/3umJiDnQU4XXMLkn2mMHHw+fhTX/mw==",
+      "dependencies": {
+        "@primeuix/utils": "^0.3.2"
      },
      "engines": {
        "node": ">=12.11.0"
      }
    },
    "node_modules/@primeuix/utils": {
-      "version": "0.2.0",
-      "resolved": "https://registry.npmjs.org/@primeuix/utils/-/utils-0.2.0.tgz",
-      "integrity": "sha512-AaDIeRFlsbkVTk2s0mlEjnGSLi31X669NVwo+n+AVAnBdDiQznjipNTpHbOobVBtjOKZize74PChK6uoaSBRUw==",
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/@primeuix/utils/-/utils-0.3.2.tgz",
+      "integrity": "sha512-B+nphqTQeq+i6JuICLdVWnDMjONome2sNz0xI65qIOyeB4EF12CoKRiCsxuZ5uKAkHi/0d1LqlQ9mIWRSdkavw==",
      "engines": {
        "node": ">=12.11.0"
      }
@@ -9862,19 +9871,23 @@
      "integrity": "sha512-jK3Et9UzwzTsd6tzl2RmwrVY/b8raJ3QZLzoDACj+oTJ0oX7L9Hy+XnVwgo4QVKlKpnP/Ur13SXV/pVh4LzaDw=="
    },
    "node_modules/primeng": {
-      "version": "18.0.0-beta.3",
-      "resolved": "https://registry.npmjs.org/primeng/-/primeng-18.0.0-beta.3.tgz",
-      "integrity": "sha512-nX2sxTHRiggoaDrgFsnAfIihVFvZR4RfpH9JwOy4BL7wQ8cG0SYvSf1E5TTorJOED9/nPwrtVGUoHrDUsiNX+A==",
+      "version": "18.0.2",
+      "resolved": "https://registry.npmjs.org/primeng/-/primeng-18.0.2.tgz",
+      "integrity": "sha512-Tt4KmbstxRmrUdxvVjV1j/1L3SnN8QdkPdC5hRHWQjOCheX71BA0aQ7aTJ4CXZZuw6wiDKlb7Jrm0aqTixE7+A==",
      "dependencies": {
-        "@primeuix/styled": "0.2.0",
+        "@primeuix/styled": "^0.3.2",
+        "@primeuix/utils": "^0.3.2",
        "tslib": "^2.3.0"
      },
      "peerDependencies": {
+        "@angular/animations": "^17.0.0 || ^18.0.0",
+        "@angular/cdk": "^17.0.0 || ^18.0.0",
        "@angular/common": "^17.0.0 || ^18.0.0",
        "@angular/core": "^17.0.0 || ^18.0.0",
        "@angular/forms": "^17.0.0 || ^18.0.0",
-        "rxjs": "^6.0.0 || ^7.8.1",
-        "zone.js": "~0.14.0"
+        "@angular/platform-browser": "^17.0.0 || ^18.0.0",
+        "@angular/router": "^17.0.0 || ^18.0.0",
+        "rxjs": "^6.0.0 || ^7.8.1"
      }
    },
    "node_modules/proc-log": {
--- a/bytefy.webapp/package.json
+++ b/bytefy.webapp/package.json
@@ -22,9 +22,10 @@
    "@ng-icons/core": "^29.5.1",
    "@ng-icons/css.gg": "^29.5.1",
    "@ng-icons/heroicons": "^29.5.1",
+    "@primeng/themes": "^19.0.5",
    "angularx-qrcode": "^18.0.2",
    "primeicons": "^7.0.0",
-    "primeng": "^18.0.0-beta.3",
+    "primeng": "^18.0.2",
    "rxjs": "~7.8.0",
    "tailwindcss-primeui": "^0.3.4",
    "tslib": "^2.3.0",
--- a/bytefy.webapp/src/app/app.component.html
+++ b/bytefy.webapp/src/app/app.component.html
@@ -1,4 +1,4 @@
-<div class="darkmode">
+<div>
  <app-header></app-header>
  <div class="main-content">
    <router-outlet></router-outlet>
--- a/bytefy.webapp/src/app/app.component.scss
+++ b/bytefy.webapp/src/app/app.component.scss
@@ -3,10 +3,6 @@
    justify-content: center;
 }

-.darkmode {
-  background-color: #121212;
-}
-
 ::ng-deep {
    .p-panel {
      border-radius: unset !important;
--- a/bytefy.webapp/src/app/app.component.ts
+++ b/bytefy.webapp/src/app/app.component.ts
@@ -1,9 +1,7 @@
-import { Component, OnInit } from '@angular/core';
+import { Component } from '@angular/core';
 import { RouterOutlet } from '@angular/router';
 import { HeaderComponent } from './header/header.component';
-import { PrimeNGConfig } from 'primeng/api';
 import { FooterComponent } from './footer/footer.component';
-import { Lara } from 'primeng/themes/lara';

@Component({
  selector: 'app-root',
@@ -12,17 +10,6 @@ import { Lara } from 'primeng/themes/lara';
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
 })
-export class AppComponent implements OnInit{
+export class AppComponent {
  title = 'tools';
-
-  constructor(private config: PrimeNGConfig) {
-    this.config.theme.set({ 
-      preset: Lara,
-      darkModeSelector: '.darkmode' 
-    });
-  }
-  ngOnInit(): void {
-    const element = document.querySelector('html');
-    element?.classList.toggle('darkmode');
-  }
 }
--- a/bytefy.webapp/src/app/app.config.ts
+++ b/bytefy.webapp/src/app/app.config.ts
@@ -1,15 +1,21 @@
 import { ApplicationConfig, importProvidersFrom } from '@angular/core';
 import { provideRouter } from '@angular/router';
-
 import { routes } from './app.routes';
 import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';
 import { provideNgIconsConfig } from '@ng-icons/core';
 import { HttpClientXsrfModule, provideHttpClient } from '@angular/common/http';
+import { providePrimeNG } from 'primeng/config';
+import { bytefy_dark } from './bytefy-dark-theme';

 export const appConfig: ApplicationConfig = {
  providers: [
    provideRouter(routes), 
    provideAnimationsAsync("animations"), 
+    providePrimeNG({ 
+      theme: {
+          preset: bytefy_dark
+      }
+    }),
    provideNgIconsConfig({
      size: '1.5em',
    }),
--- a/bytefy.webapp/src/app/bytefy-dark-theme.ts
+++ b/bytefy.webapp/src/app/bytefy-dark-theme.ts
@@ -0,0 +1,664 @@
+import Lara from "@primeng/themes/lara";
+import { definePreset } from "@primeng/themes";
+
+export const bytefy_dark = definePreset(Lara, {
+  primitive: {
+    borderRadius: {
+      none: "0",
+      xs: "2px",
+      sm: "4px",
+      md: "6px",
+      lg: "8px",
+      xl: "12px",
+    },
+    emerald: {
+      50: "#ecfdf5",
+      100: "#d1fae5",
+      200: "#a7f3d0",
+      300: "#6ee7b7",
+      400: "#34d399",
+      500: "#10b981",
+      600: "#059669",
+      700: "#047857",
+      800: "#065f46",
+      900: "#064e3b",
+      950: "#022c22",
+    },
+    green: {
+      50: "#f0fdf4",
+      100: "#dcfce7",
+      200: "#bbf7d0",
+      300: "#86efac",
+      400: "#4ade80",
+      500: "#22c55e",
+      600: "#16a34a",
+      700: "#15803d",
+      800: "#166534",
+      900: "#14532d",
+      950: "#052e16",
+    },
+    lime: {
+      50: "#f7fee7",
+      100: "#ecfccb",
+      200: "#d9f99d",
+      300: "#bef264",
+      400: "#a3e635",
+      500: "#84cc16",
+      600: "#65a30d",
+      700: "#4d7c0f",
+      800: "#3f6212",
+      900: "#365314",
+      950: "#1a2e05",
+    },
+    red: {
+      50: "#fef2f2",
+      100: "#fee2e2",
+      200: "#fecaca",
+      300: "#fca5a5",
+      400: "#f87171",
+      500: "#ef4444",
+      600: "#dc2626",
+      700: "#b91c1c",
+      800: "#991b1b",
+      900: "#7f1d1d",
+      950: "#450a0a",
+    },
+    orange: {
+      50: "#fff7ed",
+      100: "#ffedd5",
+      200: "#fed7aa",
+      300: "#fdba74",
+      400: "#fb923c",
+      500: "#f97316",
+      600: "#ea580c",
+      700: "#c2410c",
+      800: "#9a3412",
+      900: "#7c2d12",
+      950: "#431407",
+    },
+    amber: {
+      50: "#fffbeb",
+      100: "#fef3c7",
+      200: "#fde68a",
+      300: "#fcd34d",
+      400: "#fbbf24",
+      500: "#f59e0b",
+      600: "#d97706",
+      700: "#b45309",
+      800: "#92400e",
+      900: "#78350f",
+      950: "#451a03",
+    },
+    yellow: {
+      50: "#fefce8",
+      100: "#fef9c3",
+      200: "#fef08a",
+      300: "#fde047",
+      400: "#facc15",
+      500: "#eab308",
+      600: "#ca8a04",
+      700: "#a16207",
+      800: "#854d0e",
+      900: "#713f12",
+      950: "#422006",
+    },
+    teal: {
+      50: "#f0fdfa",
+      100: "#ccfbf1",
+      200: "#99f6e4",
+      300: "#5eead4",
+      400: "#2dd4bf",
+      500: "#14b8a6",
+      600: "#0d9488",
+      700: "#0f766e",
+      800: "#115e59",
+      900: "#134e4a",
+      950: "#042f2e",
+    },
+    cyan: {
+      50: "#ecfeff",
+      100: "#cffafe",
+      200: "#a5f3fc",
+      300: "#67e8f9",
+      400: "#22d3ee",
+      500: "#06b6d4",
+      600: "#0891b2",
+      700: "#0e7490",
+      800: "#155e75",
+      900: "#164e63",
+      950: "#083344",
+    },
+    sky: {
+      50: "#f0f9ff",
+      100: "#e0f2fe",
+      200: "#bae6fd",
+      300: "#7dd3fc",
+      400: "#38bdf8",
+      500: "#0ea5e9",
+      600: "#0284c7",
+      700: "#0369a1",
+      800: "#075985",
+      900: "#0c4a6e",
+      950: "#082f49",
+    },
+    blue: {
+      50: "#eff6ff",
+      100: "#dbeafe",
+      200: "#bfdbfe",
+      300: "#93c5fd",
+      400: "#60a5fa",
+      500: "#3b82f6",
+      600: "#2563eb",
+      700: "#1d4ed8",
+      800: "#1e40af",
+      900: "#1e3a8a",
+      950: "#172554",
+    },
+    indigo: {
+      50: "#eef2ff",
+      100: "#e0e7ff",
+      200: "#c7d2fe",
+      300: "#a5b4fc",
+      400: "#818cf8",
+      500: "#6366f1",
+      600: "#4f46e5",
+      700: "#4338ca",
+      800: "#3730a3",
+      900: "#312e81",
+      950: "#1e1b4b",
+    },
+    violet: {
+      50: "#f5f3ff",
+      100: "#ede9fe",
+      200: "#ddd6fe",
+      300: "#c4b5fd",
+      400: "#a78bfa",
+      500: "#8b5cf6",
+      600: "#7c3aed",
+      700: "#6d28d9",
+      800: "#5b21b6",
+      900: "#4c1d95",
+      950: "#2e1065",
+    },
+    purple: {
+      50: "#faf5ff",
+      100: "#f3e8ff",
+      200: "#e9d5ff",
+      300: "#d8b4fe",
+      400: "#c084fc",
+      500: "#a855f7",
+      600: "#9333ea",
+      700: "#7e22ce",
+      800: "#6b21a8",
+      900: "#581c87",
+      950: "#3b0764",
+    },
+    fuchsia: {
+      50: "#fdf4ff",
+      100: "#fae8ff",
+      200: "#f5d0fe",
+      300: "#f0abfc",
+      400: "#e879f9",
+      500: "#d946ef",
+      600: "#c026d3",
+      700: "#a21caf",
+      800: "#86198f",
+      900: "#701a75",
+      950: "#4a044e",
+    },
+    pink: {
+      50: "#fdf2f8",
+      100: "#fce7f3",
+      200: "#fbcfe8",
+      300: "#f9a8d4",
+      400: "#f472b6",
+      500: "#ec4899",
+      600: "#db2777",
+      700: "#be185d",
+      800: "#9d174d",
+      900: "#831843",
+      950: "#500724",
+    },
+    rose: {
+      50: "#fff1f2",
+      100: "#ffe4e6",
+      200: "#fecdd3",
+      300: "#fda4af",
+      400: "#fb7185",
+      500: "#f43f5e",
+      600: "#e11d48",
+      700: "#be123c",
+      800: "#9f1239",
+      900: "#881337",
+      950: "#4c0519",
+    },
+    slate: {
+      50: "#f8fafc",
+      100: "#f1f5f9",
+      200: "#e2e8f0",
+      300: "#cbd5e1",
+      400: "#94a3b8",
+      500: "#64748b",
+      600: "#475569",
+      700: "#334155",
+      800: "#1e293b",
+      900: "#0f172a",
+      950: "#020617",
+    },
+    gray: {
+      50: "#f9fafb",
+      100: "#f3f4f6",
+      200: "#e5e7eb",
+      300: "#d1d5db",
+      400: "#9ca3af",
+      500: "#6b7280",
+      600: "#4b5563",
+      700: "#374151",
+      800: "#1f2937",
+      900: "#111827",
+      950: "#030712",
+    },
+    zinc: {
+      50: "#fafafa",
+      100: "#f4f4f5",
+      200: "#e4e4e7",
+      300: "#d4d4d8",
+      400: "#a1a1aa",
+      500: "#71717a",
+      600: "#52525b",
+      700: "#3f3f46",
+      800: "#27272a",
+      900: "#18181b",
+      950: "#09090b",
+    },
+    neutral: {
+      50: "#fafafa",
+      100: "#f5f5f5",
+      200: "#e5e5e5",
+      300: "#d4d4d4",
+      400: "#a3a3a3",
+      500: "#737373",
+      600: "#525252",
+      700: "#404040",
+      800: "#262626",
+      900: "#171717",
+      950: "#0a0a0a",
+    },
+    stone: {
+      50: "#fafaf9",
+      100: "#f5f5f4",
+      200: "#e7e5e4",
+      300: "#d6d3d1",
+      400: "#a8a29e",
+      500: "#78716c",
+      600: "#57534e",
+      700: "#44403c",
+      800: "#292524",
+      900: "#1c1917",
+      950: "#0c0a09",
+    },
+  },
+  semantic: {
+    transitionDuration: "0.2s",
+    focusRing: {
+      width: "1px",
+      style: "solid",
+      color: "{primary.color}",
+      offset: "2px",
+      shadow: "none",
+    },
+    disabledOpacity: "0.6",
+    iconSize: "1rem",
+    anchorGutter: "2px",
+    primary: {
+      50: "#ecfdf5",
+      100: "#d1fae5",
+      200: "#a7f3d0",
+      300: "#6ee7b7",
+      400: "#34d399",
+      500: "#10b981",
+      600: "#059669",
+      700: "#047857",
+      800: "#065f46",
+      900: "#064e3b",
+      950: "#022c22",
+    },
+    formField: {
+      paddingX: "0.75rem",
+      paddingY: "0.5rem",
+      sm: {
+        fontSize: "0.875rem",
+        paddingX: "0.625rem",
+        paddingY: "0.375rem",
+      },
+      lg: {
+        fontSize: "1.125rem",
+        paddingX: "0.875rem",
+        paddingY: "0.625rem",
+      },
+      borderRadius: "{border.radius.md}",
+      focusRing: {
+        width: "0",
+        style: "none",
+        color: "transparent",
+        offset: "0",
+        shadow: "none",
+      },
+      transitionDuration: "{transition.duration}",
+    },
+    list: {
+      padding: "0.25rem 0.25rem",
+      gap: "2px",
+      header: {
+        padding: "0.5rem 1rem 0.25rem 1rem",
+      },
+      option: {
+        padding: "0.5rem 0.75rem",
+        borderRadius: "{border.radius.sm}",
+      },
+      optionGroup: {
+        padding: "0.5rem 0.75rem",
+        fontWeight: "600",
+      },
+    },
+    content: {
+      borderRadius: "{border.radius.md}",
+    },
+    mask: {
+      transitionDuration: "0.15s",
+    },
+    navigation: {
+      list: {
+        padding: "0.25rem 0.25rem",
+        gap: "2px",
+      },
+      item: {
+        padding: "0.5rem 0.75rem",
+        borderRadius: "{border.radius.sm}",
+        gap: "0.5rem",
+      },
+      submenuLabel: {
+        padding: "0.5rem 0.75rem",
+        fontWeight: "600",
+      },
+      submenuIcon: {
+        size: "0.875rem",
+      },
+    },
+    overlay: {
+      select: {
+        borderRadius: "{border.radius.md}",
+        shadow:
+          "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1)",
+      },
+      popover: {
+        borderRadius: "{border.radius.md}",
+        padding: "0.75rem",
+        shadow:
+          "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1)",
+      },
+      modal: {
+        borderRadius: "{border.radius.xl}",
+        padding: "1.25rem",
+        shadow:
+          "0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1)",
+      },
+      navigation: {
+        shadow:
+          "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1)",
+      },
+    },
+    colorScheme: {
+      light: {
+        surface: {
+          0: "#ffffff",
+          50: "#fafafa",
+          100: "#f4f4f5",
+          200: "#e4e4e7",
+          300: "#d4d4d8",
+          400: "#a1a1aa",
+          500: "#71717a",
+          600: "#52525b",
+          700: "#3f3f46",
+          800: "#27272a",
+          900: "#18181b",
+          950: "#09090b",
+        },
+        primary: {
+          color: "{primary.400}",
+          contrastColor: "{surface.900}",
+          hoverColor: "{primary.300}",
+          activeColor: "{primary.200}",
+        },
+        highlight: {
+          background: "color-mix(in srgb, {primary.400}, transparent 84%)",
+          focusBackground: "color-mix(in srgb, {primary.400}, transparent 76%)",
+          color: "rgba(255,255,255,.87)",
+          focusColor: "rgba(255,255,255,.87)",
+        },
+        mask: {
+          background: "rgba(0,0,0,0.6)",
+          color: "{surface.200}",
+        },
+        formField: {
+          background: "{surface.950}",
+          disabledBackground: "{surface.700}",
+          filledBackground: "{surface.800}",
+          filledHoverBackground: "{surface.800}",
+          filledFocusBackground: "{surface.800}",
+          borderColor: "{surface.600}",
+          hoverBorderColor: "{surface.500}",
+          focusBorderColor: "{primary.color}",
+          invalidBorderColor: "{red.300}",
+          color: "{surface.0}",
+          disabledColor: "{surface.400}",
+          placeholderColor: "{surface.400}",
+          invalidPlaceholderColor: "{red.400}",
+          floatLabelColor: "{surface.400}",
+          floatLabelFocusColor: "{primary.color}",
+          floatLabelActiveColor: "{surface.400}",
+          floatLabelInvalidColor: "{form.field.invalid.placeholder.color}",
+          iconColor: "{surface.400}",
+          shadow: "0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(18, 18, 23, 0.05)",
+        },
+        text: {
+          color: "{surface.0}",
+          hoverColor: "{surface.0}",
+          mutedColor: "{surface.400}",
+          hoverMutedColor: "{surface.300}",
+        },
+        content: {
+          background: "{surface.900}",
+          hoverBackground: "{surface.800}",
+          borderColor: "{surface.700}",
+          color: "{text.color}",
+          hoverColor: "{text.hover.color}",
+        },
+        overlay: {
+          select: {
+            background: "{surface.900}",
+            borderColor: "{surface.700}",
+            color: "{text.color}",
+          },
+          popover: {
+            background: "{surface.900}",
+            borderColor: "{surface.700}",
+            color: "{text.color}",
+          },
+          modal: {
+            background: "{surface.900}",
+            borderColor: "{surface.700}",
+            color: "{text.color}",
+          },
+        },
+        list: {
+          option: {
+            focusBackground: "{surface.800}",
+            selectedBackground: "{highlight.background}",
+            selectedFocusBackground: "{highlight.focus.background}",
+            color: "{text.color}",
+            focusColor: "{text.hover.color}",
+            selectedColor: "{highlight.color}",
+            selectedFocusColor: "{highlight.focus.color}",
+            icon: {
+              color: "{surface.500}",
+              focusColor: "{surface.400}",
+            },
+          },
+          optionGroup: {
+            background: "transparent",
+            color: "{text.muted.color}",
+          },
+        },
+        navigation: {
+          item: {
+            focusBackground: "{surface.800}",
+            activeBackground: "{surface.800}",
+            color: "{text.color}",
+            focusColor: "{text.hover.color}",
+            activeColor: "{text.hover.color}",
+            icon: {
+              color: "{surface.500}",
+              focusColor: "{surface.400}",
+              activeColor: "{surface.400}",
+            },
+          },
+          submenuLabel: {
+            background: "transparent",
+            color: "{text.muted.color}",
+          },
+          submenuIcon: {
+            color: "{surface.500}",
+            focusColor: "{surface.400}",
+            activeColor: "{surface.400}",
+          },
+        },
+      },
+      dark: {
+        surface: {
+          0: "#ffffff",
+          50: "#fafafa",
+          100: "#f4f4f5",
+          200: "#e4e4e7",
+          300: "#d4d4d8",
+          400: "#a1a1aa",
+          500: "#71717a",
+          600: "#52525b",
+          700: "#3f3f46",
+          800: "#27272a",
+          900: "#18181b",
+          950: "#09090b",
+        },
+        primary: {
+          color: "{primary.400}",
+          contrastColor: "{surface.900}",
+          hoverColor: "{primary.300}",
+          activeColor: "{primary.200}",
+        },
+        highlight: {
+          background: "color-mix(in srgb, {primary.400}, transparent 84%)",
+          focusBackground: "color-mix(in srgb, {primary.400}, transparent 76%)",
+          color: "rgba(255,255,255,.87)",
+          focusColor: "rgba(255,255,255,.87)",
+        },
+        mask: {
+          background: "rgba(0,0,0,0.6)",
+          color: "{surface.200}",
+        },
+        formField: {
+          background: "{surface.950}",
+          disabledBackground: "{surface.700}",
+          filledBackground: "{surface.800}",
+          filledHoverBackground: "{surface.800}",
+          filledFocusBackground: "{surface.800}",
+          borderColor: "{surface.600}",
+          hoverBorderColor: "{surface.500}",
+          focusBorderColor: "{primary.color}",
+          invalidBorderColor: "{red.300}",
+          color: "{surface.0}",
+          disabledColor: "{surface.400}",
+          placeholderColor: "{surface.400}",
+          invalidPlaceholderColor: "{red.400}",
+          floatLabelColor: "{surface.400}",
+          floatLabelFocusColor: "{primary.color}",
+          floatLabelActiveColor: "{surface.400}",
+          floatLabelInvalidColor: "{form.field.invalid.placeholder.color}",
+          iconColor: "{surface.400}",
+          shadow: "0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(18, 18, 23, 0.05)",
+        },
+        text: {
+          color: "{surface.0}",
+          hoverColor: "{surface.0}",
+          mutedColor: "{surface.400}",
+          hoverMutedColor: "{surface.300}",
+        },
+        content: {
+          background: "{surface.900}",
+          hoverBackground: "{surface.800}",
+          borderColor: "{surface.700}",
+          color: "{text.color}",
+          hoverColor: "{text.hover.color}",
+        },
+        overlay: {
+          select: {
+            background: "{surface.900}",
+            borderColor: "{surface.700}",
+            color: "{text.color}",
+          },
+          popover: {
+            background: "{surface.900}",
+            borderColor: "{surface.700}",
+            color: "{text.color}",
+          },
+          modal: {
+            background: "{surface.900}",
+            borderColor: "{surface.700}",
+            color: "{text.color}",
+          },
+        },
+        list: {
+          option: {
+            focusBackground: "{surface.800}",
+            selectedBackground: "{highlight.background}",
+            selectedFocusBackground: "{highlight.focus.background}",
+            color: "{text.color}",
+            focusColor: "{text.hover.color}",
+            selectedColor: "{highlight.color}",
+            selectedFocusColor: "{highlight.focus.color}",
+            icon: {
+              color: "{surface.500}",
+              focusColor: "{surface.400}",
+            },
+          },
+          optionGroup: {
+            background: "transparent",
+            color: "{text.muted.color}",
+          },
+        },
+        navigation: {
+          item: {
+            focusBackground: "{surface.800}",
+            activeBackground: "{surface.800}",
+            color: "{text.color}",
+            focusColor: "{text.hover.color}",
+            activeColor: "{text.hover.color}",
+            icon: {
+              color: "{surface.500}",
+              focusColor: "{surface.400}",
+              activeColor: "{surface.400}",
+            },
+          },
+          submenuLabel: {
+            background: "transparent",
+            color: "{text.muted.color}",
+          },
+          submenuIcon: {
+            color: "{surface.500}",
+            focusColor: "{surface.400}",
+            activeColor: "{surface.400}",
+          },
+        },
+      },
+    },
+  },
+});
--- a/bytefy.webapp/src/app/header/header.component.ts
+++ b/bytefy.webapp/src/app/header/header.component.ts
@@ -17,8 +17,6 @@ export class HeaderComponent implements OnInit {
 	isDarkMode: boolean = true;

  ngOnInit() {
-    this.isDarkMode = window?.matchMedia?.('(prefers-color-scheme:dark)')?.matches;
-
      this.items = [
          {
 						label: 'Tools',
--- a/bytefy.webapp/src/app/shared/dual-textarea/dual-textarea.component.ts
+++ b/bytefy.webapp/src/app/shared/dual-textarea/dual-textarea.component.ts
@@ -2,7 +2,7 @@ import { CommonModule } from '@angular/common';
 import { Component, Input, Output, EventEmitter, input } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { FloatLabelModule } from 'primeng/floatlabel';
-import { InputTextareaModule } from 'primeng/inputtextarea';
+import { TextareaModule } from 'primeng/textarea';
 import { PanelModule } from 'primeng/panel';
 import { TagModule } from 'primeng/tag';
 import { PageComponent } from '../page/page.component';
@@ -14,7 +14,7 @@ import { PageComponent } from '../page/page.component';
  standalone: true,
  imports: [
    FloatLabelModule, 
-    InputTextareaModule, 
+    TextareaModule, 
    FormsModule, 
    PanelModule, 
    CommonModule,
--- a/bytefy.webapp/src/tools/client-side/guid/guid.component.ts
+++ b/bytefy.webapp/src/tools/client-side/guid/guid.component.ts
@@ -1,5 +1,5 @@
 import { Component, OnInit } from '@angular/core';
-import { InputTextareaModule } from 'primeng/inputtextarea';
+import { TextareaModule } from 'primeng/textarea';
 import { FormsModule } from '@angular/forms';
 import { FloatLabelModule } from 'primeng/floatlabel';
 import { RadioButtonModule,  } from 'primeng/radiobutton';
@@ -29,7 +29,7 @@ interface setting {
    PanelModule,
    DividerModule,
    FloatLabelModule, 
-    InputTextareaModule, 
+    TextareaModule, 
    FormsModule, 
    RadioButtonModule, 
    CommonModule, 
--- a/bytefy.webapp/src/tools/client-side/qr-code-generator/qr-code-generator.component.html
+++ b/bytefy.webapp/src/tools/client-side/qr-code-generator/qr-code-generator.component.html
@@ -48,12 +48,12 @@
      </p-toolbar>
    </div>
    <textarea
+      pInputTextarea
      *ngIf="extendedInput"
      (keyup)="onDataTextInputChanged($event)"
      [value]="qrCodeData"
-      pInputTextarea 
-      [autoResize]="true" 
-      [fluid]="true" 
+      autoResize
+      fluid
      rows="5" 
      cols="30" 
      placeholder="Contents of QR Code"
--- a/bytefy.webapp/src/tools/client-side/qr-code-generator/qr-code-generator.component.ts
+++ b/bytefy.webapp/src/tools/client-side/qr-code-generator/qr-code-generator.component.ts
@@ -7,7 +7,7 @@ import { InputTextModule } from 'primeng/inputtext';
 import { ButtonModule } from 'primeng/button';
 import { ToolbarModule } from 'primeng/toolbar';
 import { CommonModule } from '@angular/common';
-import { InputTextareaModule } from 'primeng/inputtextarea';
+import { TextareaModule } from 'primeng/textarea';
 import { FloatLabelModule } from 'primeng/floatlabel';
 import { FileUploadModule } from 'primeng/fileupload';
 import { DomSanitizer, SafeUrl } from '@angular/platform-browser';
@@ -35,7 +35,7 @@ export interface QrCodeError {
    ToolbarModule, 
    CommonModule, 
    FloatLabelModule, 
-    InputTextareaModule,
+    TextareaModule,
    FileUploadModule,
    MessageModule,
    SelectButtonModule,