feat: dark mode adaptions

src/app/components/dark-light-mode/dark-light-mode.component.html

@@ -1,5 +1,5 @@
 <button
     (click)="darkLightModeStore.mode() === 'light' ? darkLightModeStore.enableDarkMode() : darkLightModeStore.enableLightMode()"
-    class="flex h-9 w-9 items-center justify-center rounded-lg border border-gray-200 bg-white p-2 text-xs font-medium text-gray-700 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:outline-none focus:ring-2 focus:ring-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white dark:focus:ring-gray-500">
+    class="dark:hover: flex h-9 w-9 items-center justify-center rounded-lg border border-gray-200 bg-white p-2 text-xs font-medium text-gray-700 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:outline-none focus:ring-2 focus:ring-gray-300 dark:border-gray-600 dark:bg-gray-950 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-500">
     <fa-icon [icon]="darkLightModeStore.mode() === 'light' ? faSun : faMoon" size="xl"></fa-icon>
 </button>

src/app/components/dice/dice.component.html

@@ -1,9 +1,9 @@
 <form class="mx-auto max-w-sm">
     <div class="mb-5">
-        <label class="mb-2 block text-sm font-medium text-gray-900 dark:text-white" for="dice">Definition</label>
+        <label class="mb-2 block text-sm font-medium text-gray-900" for="dice">Definition</label>
         <input
             [(ngModel)]="dice"
-            class="block w-full rounded-lg border border-gray-300 bg-gray-50 p-2.5 text-sm text-gray-900 focus:border-blue-500 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:focus:border-blue-500 dark:focus:ring-blue-500"
+            class="block w-full rounded-lg border border-gray-300 bg-gray-50 p-2.5 text-sm text-gray-900 focus:border-blue-500 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700 dark:placeholder-gray-400 dark:focus:border-blue-500 dark:focus:ring-blue-500"
             id="dice"
             name="dice"
             placeholder="2d20"
@@ -13,7 +13,7 @@
     <button
         (click)="roll()"
         [disabled]="!dice"
-        class="w-full rounded-lg bg-blue-700 px-5 py-2.5 text-center text-sm font-medium text-white hover:bg-blue-800 focus:outline-none focus:ring-4 focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800 sm:w-auto"
+        class="w-full rounded-lg bg-blue-700 px-5 py-2.5 text-center text-sm font-medium  hover:bg-blue-800 focus:outline-none focus:ring-4 focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800 sm:w-auto"
         type="submit">
         Würfeln!
     </button>

src/app/components/header/header.component.html

@@ -1,17 +1,17 @@
-<nav class="fixed left-0 right-0 top-0 z-50 border-b border-gray-200 bg-white px-4 py-2.5 dark:border-gray-700 dark:bg-gray-800">
+<nav class="fixed left-0 right-0 top-0 z-50 border-b border-gray-200 bg-white px-4 py-2.5 dark:border-gray-700 dark:bg-gray-950">
     <div class="flex flex-wrap items-center justify-between">
         <div class="flex items-center justify-start">
             <button
                 aria-controls="drawer-navigation"
-                class="mr-2 cursor-pointer rounded-lg p-2 text-gray-600 hover:bg-gray-100 hover:text-gray-900 focus:bg-gray-100 focus:ring-2 focus:ring-gray-100 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white dark:focus:bg-gray-700 dark:focus:ring-gray-700 md:hidden"
+                class="dark:hover: mr-2 cursor-pointer rounded-lg p-2 text-gray-600 hover:bg-gray-100 hover:text-gray-900 focus:bg-gray-100 focus:ring-2 focus:ring-gray-100 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:bg-gray-700 dark:focus:ring-gray-700 md:hidden"
                 data-drawer-target="drawer-navigation"
                 data-drawer-toggle="drawer-navigation">
                 <fa-icon [icon]="faBars"></fa-icon>
                 <span class="sr-only">Toggle sidebar</span>
             </button>
             <div class="mr-4 flex items-center justify-between">
-                <fa-icon [icon]="faDiceD20" size="xl"></fa-icon>
-                <span class="self-center whitespace-nowrap pl-2 text-2xl font-semibold dark:text-white">Tipis P&P Tools</span>
+                <fa-icon class="dark:" [icon]="faDiceD20" size="xl"></fa-icon>
+                <span class="self-center whitespace-nowrap pl-2 text-2xl font-semibold">Tipis P&P Tools</span>
             </div>
         </div>
         <div class="flex items-center">

src/app/components/inputs/submit-button/submit-button.component.html

@@ -1,11 +1,11 @@
 <button
     [disabled]="disabled"
-    class="w-full rounded-lg border border-transparent bg-blue-700 px-5 py-2.5 text-center text-sm font-medium text-white
+    class="w-full rounded-lg border border-transparent bg-blue-700 px-5 py-2.5 text-center text-sm font-medium
     hover:bg-blue-800
     focus:outline-none focus:ring-4 focus:ring-blue-300
     disabled:cursor-not-allowed disabled:border-gray-200 disabled:bg-white disabled:text-gray-400
     dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800
-    disabled:dark:border-red-400 disabled:dark:bg-gray-800 sm:w-auto"
+    disabled:dark:border-red-400 disabled:dark:bg-gray-950 sm:w-auto"
     type="submit">
     <ng-content></ng-content>
 </button>

src/app/components/inputs/text-input/text-input.component.html

@@ -1,8 +1,8 @@
-<label [for]="id" class="mb-2 block text-sm font-medium text-gray-900 dark:text-white">{{ label }}</label>
+<label [for]="id" class="mb-2 block text-sm font-medium text-gray-900">{{ label }}</label>
 <input
     [attr.id]="id"
     [formControl]="control"
     [placeholder]="placeholder"
     [autocomplete]="autoComplete"
-    class="block w-full rounded-lg border border-gray-300 bg-gray-50 p-2.5 text-sm text-gray-900 focus:border-blue-500 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:focus:border-blue-500 dark:focus:ring-blue-500"
+    class="block w-full rounded-lg border border-gray-300 bg-gray-50 p-2.5 text-sm text-gray-900 focus:border-blue-500 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700 dark:placeholder-gray-400 dark:focus:border-blue-500 dark:focus:ring-blue-500"
     type="text" />

src/app/components/sidebar/sidebar-item-group/sidebar-item-group.component.html

@@ -1,6 +1,6 @@
 <button
     (click)="toggle()"
-    class="group flex w-full items-center rounded-lg p-2 text-base font-medium text-gray-900 transition duration-75 hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700">
+    class="group flex w-full items-center rounded-lg p-2 text-base font-medium transition duration-75 hover:bg-gray-100 dark:hover:bg-gray-700">
     <fa-icon [icon]="icon" class="mr-2" />
     {{ label }}
     <fa-icon class="ml-auto transition-transform" [icon]="faChevronRight" [class.rotate-90]="isOpen()" />

src/app/components/sidebar/sidebar-item/sidebar-item.component.html

@@ -1,7 +1,7 @@
 <a
     [routerLink]="link"
-    class="flex items-center rounded-lg p-2 text-base font-medium text-gray-900 hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700"
-    routerLinkActive="bg-slate-200">
+    class="flex items-center rounded-lg p-2 text-base font-medium hover:bg-gray-100 dark:hover:bg-gray-700"
+    routerLinkActive="bg-slate-200 dark:bg-slate-700">
     <fa-icon [icon]="icon"></fa-icon>
     <span class="ml-3"><ng-content></ng-content></span>
 </a>

src/app/components/sidebar/sidebar.component.html

@@ -1,9 +1,9 @@
 <aside
     aria-hidden="true"
     aria-label="Sidenav"
-    class="fixed left-0 top-0 z-40 h-screen w-64 -translate-x-full border-r border-gray-200 bg-white pt-10 transition-transform dark:border-gray-700 dark:bg-gray-800 md:translate-x-0"
+    class="fixed left-0 top-0 z-40 h-screen w-64 -translate-x-full border-r border-gray-200 bg-white pt-10 transition-transform dark:border-gray-700 dark:bg-gray-950 md:translate-x-0"
     id="drawer-navigation">
-    <div class="flex h-full flex-col overflow-y-auto bg-white px-3 py-5 dark:bg-gray-800">
+    <div class="flex h-full flex-col overflow-y-auto bg-white px-3 py-5 dark:bg-gray-950">
         <div class="space-y-2">
             <pap-sidebar-item-group [icon]="faDragon" label="Charakter">
                 <pap-sidebar-item [icon]="faDashboard" [link]="['/characters/1/dashboard']">Dashboard</pap-sidebar-item>

src/index.html

@@ -7,7 +7,7 @@
         <meta content="width=device-width, initial-scale=1" name="viewport" />
         <link href="favicon.ico" rel="icon" type="image/x-icon" />
     </head>
-    <body class="h-screen w-screen select-none overscroll-none text-base">
+    <body class="h-screen w-screen select-none overscroll-none text-base text-black dark:bg-gray-950 dark:text-white">
         <pap-root></pap-root>
     </body>
 </html>