style(theme): improve dark mode support with data-theme attribute

EndyKaufman · EndyKaufman · commit 0a30633b2cf3 · 2025-12-10T23:41:24.000+05:00
- Switch dark mode detection from class 'dark' to use data-theme="dark" attribute
- Update Tailwind config to enable dark mode with data-theme attribute
- Adjust dark theme CSS selectors to target [data-theme="dark"] for consistent styling
- Enhance ThemeService to add/remove 'dark' class alongside data-theme attribute for compatibility
- Refactor color scheme switcher styles to improve hover and text color effects
- Fix rendering logic and add missing imports in dashboards widgets add by type page
- Modify dashboards and widgets list layout and hover scale effects
- Clean up minor code style and formatting issues across components and services
- Add null check for optional clock widget timezones array to prevent runtime errors
diff --git a/web/src/app/app.ts b/web/src/app/app.ts
@@ -164,4 +164,4 @@ export class AppComponent implements OnInit {
       new Error('This feature is not available yet')
     );
   }
-}
+}
diff --git a/web/src/app/components/theme/color-scheme-switcher.component.ts b/web/src/app/components/theme/color-scheme-switcher.component.ts
@@ -24,6 +24,7 @@ import { ThemeService } from '../../services/theme.service';
               fill="none"
               strokeLinecap="round"
               strokeLinejoin="round"
+              class="text-gray-700"
             >
               <path stroke="none" d="M0 0h24v24H0z" fill="none" />
               <path
@@ -44,6 +45,7 @@ import { ThemeService } from '../../services/theme.service';
               fill="none"
               strokeLinecap="round"
               strokeLinejoin="round"
+              class="hover:bg-pastel-blue hover:text-white"
             >
               <path stroke="none" d="M0 0h24v24H0z" fill="none" />
               <path
diff --git a/web/src/app/formly/flat-input-wrapper.component.ts b/web/src/app/formly/flat-input-wrapper.component.ts
@@ -88,4 +88,4 @@ export class FlatInputWrapperComponent extends FieldWrapper<FormlyFieldConfig> {
     }
     return errors;
   }
-}
+}
diff --git a/web/src/app/pages/dashboards/[dashboardId]/index.page.ts b/web/src/app/pages/dashboards/[dashboardId]/index.page.ts
@@ -161,7 +161,7 @@ export const routeMeta: RouteMeta = {
           @if (last) {
             <!-- "Add Widget" Button for when there are widgets -->
             <div
-              class="border-4 border-dashed border-gray-200 rounded-2xl transition-all duration-300 hover:border-pastel-blue/50 hover:bg-pastel-blue/5 cursor-pointer h-40 flex items-center justify-center dark:border-gray-700 dark:hover:bg-pastel-blue/10"
+              class="border-4 border-dashed border-gray-200 rounded-2xl transition-all duration-300 hover:border-pastel-blue/50 hover:bg-pastel-blue/5 cursor-pointer h-40 flex items-center justify-center"
             >
               <div class="text-center">
                 <p
@@ -176,7 +176,7 @@ export const routeMeta: RouteMeta = {
                       href="/dashboards/{{
                         dashboardAndWidgets.dashboard.id
                       }}/widgets/add/{{ widgetType }}"
-                      class="text-xs bg-gray-200 hover:bg-pastel-blue hover:text-white px-3 py-1 rounded-full transition-colors whitespace-nowrap"
+                      class="text-xs bg-gray-200 hover:bg-gray-300 hover:text-gray-700 px-3 py-1 rounded-full transition-colors whitespace-nowrap"
                     >
                       {{ widgetType | titlecase }}
                     </a>
@@ -205,7 +205,7 @@ export const routeMeta: RouteMeta = {
 
             <!-- "Add Widget" Button -->
             <div
-              class="border-4 border-dashed border-gray-200 rounded-2xl transition-all duration-300 hover:border-pastel-blue/50 hover:bg-pastel-blue/5 p-8 flex flex-col items-center justify-center dark:border-gray-700 dark:hover:bg-pastel-blue/10"
+              class="border-4 border-dashed border-gray-200 rounded-2xl transition-all duration-300 hover:border-pastel-blue/50 hover:bg-pastel-blue/5 p-8 flex flex-col items-center justify-center"
             >
               <p
                 class="text-gray-500 hover:text-pastel-blue font-bold text-lg flex items-center justify-center mb-4"
@@ -219,7 +219,7 @@ export const routeMeta: RouteMeta = {
                     href="/dashboards/{{
                       dashboardAndWidgets.dashboard.id
                     }}/widgets/add/{{ widgetType }}"
-                    class="text-xs bg-gray-200 hover:bg-pastel-blue hover:text-white px-3 py-1 rounded-full transition-colors whitespace-nowrap"
+                    class="text-xs bg-gray-200 hover:bg-gray-300 hover:text-gray-700 px-3 py-1 rounded-full transition-colors whitespace-nowrap"
                   >
                     {{ widgetType | titlecase }}
                   </a>
@@ -283,7 +283,6 @@ export default class DashboardsEditPageComponent {
 
   onSubmit(model: UpdateDashboardType) {
     this.setFormFields({});
-    // todo: при обновлении не выставляются серверные ошибки валидации, нужно починить
     this.dashboardsService
       .update(model)
       .pipe(
@@ -298,4 +297,4 @@ export default class DashboardsEditPageComponent {
       )
       .subscribe();
   }
-}
+}
diff --git a/web/src/app/pages/dashboards/[dashboardId]/widgets/add/[type]/index.page.ts b/web/src/app/pages/dashboards/[dashboardId]/widgets/add/[type]/index.page.ts
@@ -1,5 +1,5 @@
 import { RouteMeta } from '@analogjs/router';
-import { AsyncPipe, TitleCasePipe } from '@angular/common';
+import { AsyncPipe, NgIf, TitleCasePipe } from '@angular/common';
 import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
 import { ReactiveFormsModule, UntypedFormGroup } from '@angular/forms';
 import { ActivatedRoute, Router } from '@angular/router';
@@ -33,68 +33,72 @@ export const routeMeta: RouteMeta = {
     ReactiveFormsModule,
     FormlyForm,
     AsyncPipe,
-    TitleCasePipe,
+    NgIf,
     LucideAngularModule,
+    TitleCasePipe,
   ],
-  template: ` @if (data$ | async; as data) {
-    <h1 class="text-4xl font-extrabold text-gray-800 mb-2">
-      Add {{ data.type | titlecase }} Widget
-    </h1>
-    <p class="text-xl text-gray-500 mb-8">
-      <a
-        href="/dashboards/{{ data.dashboard.id }}"
-        class="text-gray-500 hover:text-pastel-blue transition-colors mb-10 mt-2 flex items-center"
-      >
-        <i-lucide name="arrow-left" class="w-6 h-6 mr-0 lg:mr-2"></i-lucide>
-        <span class="hidden lg:inline text-lg font-medium"
-          >Dashboard "{{ data.dashboard.name }}"</span
-        >
-      </a>
-      Configure your new widget.
-    </p>
+  template: `
+    @if (data$ | async; as data) {
+      <h1 class="text-4xl font-extrabold text-gray-800 mb-2">
+        Add {{ data.type | titlecase }} Widget
+      </h1>
 
-    <!-- Widget Configuration Panel -->
-    <div class="bg-white p-6 rounded-2xl long-shadow mb-8 space-y-4">
-      @if (formFields$ | async; as formlyFields) {
-        <form
-          [formGroup]="form"
-          (ngSubmit)="
-            onSubmit({ type: data.type, dashboardId: data.dashboard.id })
-          "
+      <p class="text-xl text-gray-500 mb-8">
+        <a
+          href="/dashboards/{{ data.dashboard.id }}"
+          class="text-gray-500 hover:text-pastel-blue transition-colors mb-10 mt-2 flex items-center"
         >
-          <formly-form
-            [form]="form"
-            [fields]="formlyFields || []"
-            [(model)]="formModel"
-          ></formly-form>
-          <div class="flex gap-4">
-            <a
-              href="/dashboards/{{ data.dashboard.id }}"
-              class="flex items-center text-lg font-bold py-3 px-6 rounded-xl text-white bg-gray-500 transition-all duration-300 transform hover:scale-[1.02] flat-btn-shadow mb-8 
-                bg-gradient-to-tr from-[#9CA3AF] to-[#6B7280] tracking-wide cursor-pointer"
-            >
-              <i-lucide name="x" class="w-5 h-5 mr-2"></i-lucide>
-              Cancel
-            </a>
+          <i-lucide name="arrow-left" class="w-6 h-6 mr-0 lg:mr-2"></i-lucide>
+          <span class="hidden lg:inline text-lg font-medium"
+            >Dashboard "{{ data.dashboard.name }}"</span
+          >
+        </a>
+        Configure your new widget.
+      </p>
 
-            <button
-              type="submit"
-              class="flex items-center text-lg font-bold py-3 px-6 rounded-xl text-white bg-pastel-blue transition-all duration-300 transform hover:scale-[1.02] flat-btn-shadow mb-8 
-                bg-gradient-to-tr from-[#8A89F0] to-[#A2C0F5] tracking-wide cursor-pointer"
-            >
-              <i-lucide name="plus" class="w-5 h-5 mr-2"></i-lucide>
-              Add Widget
-            </button>
-          </div>
-        </form>
-      }
-    </div>
-  }`,
+      <!-- Widget Configuration Panel -->
+      <div class="bg-white p-6 rounded-2xl long-shadow mb-8 space-y-4">
+        @if (formFields$ | async; as formlyFields) {
+          <form
+            [formGroup]="form"
+            (ngSubmit)="
+              onSubmit({ type: data.type, dashboardId: data.dashboard.id })
+            "
+          >
+            <formly-form
+              [form]="form"
+              [fields]="formlyFields || []"
+              [(model)]="formModel"
+            ></formly-form>
+            <div class="flex gap-4">
+              <a
+                href="/dashboards/{{ data.dashboard.id }}"
+                class="flex items-center text-lg font-bold py-3 px-6 rounded-xl text-white bg-gray-500 transition-all duration-300 transform hover:scale-[1.02] flat-btn-shadow mb-8 
+                  bg-gradient-to-tr from-[#9CA3AF] to-[#6B7280] tracking-wide cursor-pointer"
+              >
+                <i-lucide name="x" class="w-5 h-5 mr-2"></i-lucide>
+                Cancel
+              </a>
+
+              <button
+                type="submit"
+                class="flex items-center text-lg font-bold py-3 px-6 rounded-xl text-white bg-pastel-blue transition-all duration-300 transform hover:scale-[1.02] flat-btn-shadow mb-8 
+                  bg-gradient-to-tr from-[#8A89F0] to-[#A2C0F5] tracking-wide flex items-center justify-center cursor-pointer"
+              >
+                <i-lucide name="plus" class="w-5 h-5 mr-2"></i-lucide>
+                Create Widget
+              </button>
+            </div>
+          </form>
+        }
+      </div>
+    }
+  `,
 })
 export default class DashboardsWidgetsAddByTypePageComponent {
-  private readonly dashboardsService = inject(DashboardsService);
   private readonly widgetsService = inject(WidgetsService);
   private readonly errorHandlerService = inject(ErrorHandlerService);
+  private readonly dashboardsService = inject(DashboardsService);
   private readonly route = inject(ActivatedRoute);
   private readonly router = inject(Router);
   private readonly formHandlerService = inject(FormHandlerService);
diff --git a/web/src/app/pages/dashboards/index.page.ts b/web/src/app/pages/dashboards/index.page.ts
@@ -13,32 +13,32 @@ export const routeMeta: RouteMeta = {
 @Component({
   selector: 'dashboards-list-page',
   standalone: true,
-  imports: [AsyncPipe, LucideAngularModule],
   changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [AsyncPipe, LucideAngularModule],
   template: ` <h1 class="text-4xl font-extrabold text-gray-800 mb-2">
       Dashboards
     </h1>
     <p class="text-xl text-gray-500 mb-8">
-      Manage all your projects in one place.
+      Manage your dashboards and widgets.
     </p>
 
     <div
-      class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 xl:grid-cols-6 2xl:grid-cols-6 gap-8"
+      class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 gap-8"
     >
       @for (
         dashboard of dashboards$ | async;
         track dashboard.id;
         let last = $last
       ) {
         <a
-          class="bg-white p-6 rounded-2xl long-shadow transition-all duration-300 hover:scale-[1.01] cursor-pointer"
           href="/dashboards/{{ dashboard.id }}"
+          class="bg-white p-6 rounded-2xl long-shadow transition-all duration-300 hover:scale-[1.02] cursor-pointer"
         >
           <div class="flex justify-between items-start mb-4">
-            <!--i
-              data-lucide="database"
+            <i-lucide
+              name="layout-dashboard"
               class="w-10 h-10 text-pastel-blue bg-pastel-blue/10 p-2 rounded-lg"
-            ></i-->
+            ></i-lucide>
             <span
               class="text-sm font-medium text-gray-500 px-3 py-1 bg-gray-100 rounded-full"
               >{{ dashboard.isActive ? 'Active' : 'Draft' }}</span
@@ -61,7 +61,7 @@ export const routeMeta: RouteMeta = {
         </a>
         @if (last) {
           <a
-            class="border-4 border-dashed border-gray-200 rounded-2xl transition-all duration-300 hover:border-pastel-blue/50 hover:bg-pastel-blue/5 cursor-pointer h-40 flex items-center justify-center dark:border-gray-700 dark:hover:bg-pastel-blue/10"
+            class="border-4 border-dashed border-gray-200 rounded-2xl transition-all duration-300 hover:border-pastel-blue/50 hover:bg-pastel-blue/5 cursor-pointer h-40 flex items-center justify-center"
             href="/dashboards/new"
           >
             <i-lucide name="plus" class="w-6 h-6 mr-2"></i-lucide>
@@ -86,7 +86,7 @@ export const routeMeta: RouteMeta = {
           </p>
 
           <a
-            class="border-4 border-dashed border-gray-200 rounded-2xl transition-all duration-300 hover:border-pastel-blue/50 hover:bg-pastel-blue/5 cursor-pointer p-8 flex flex-col items-center justify-center dark:border-gray-700 dark:hover:bg-pastel-blue/10"
+            class="border-4 border-dashed border-gray-200 rounded-2xl transition-all duration-300 hover:border-pastel-blue/50 hover:bg-pastel-blue/5 cursor-pointer p-8 flex flex-col items-center justify-center"
             href="/dashboards/new"
           >
             <i-lucide name="plus" class="w-6 h-6 mr-2"></i-lucide>
diff --git a/web/src/app/pages/dashboards/new.page.ts b/web/src/app/pages/dashboards/new.page.ts
@@ -29,13 +29,15 @@ export const routeMeta: RouteMeta = {
   changeDetection: ChangeDetectionStrategy.OnPush,
   imports: [
     FormlyBootstrapModule,
-    AsyncPipe,
     ReactiveFormsModule,
     FormlyForm,
+    AsyncPipe,
     LucideAngularModule,
   ],
   template: `
-    <h1 class="text-4xl font-extrabold text-gray-800 mb-2">New dashboard</h1>
+    <h1 class="text-4xl font-extrabold text-gray-800 mb-2">
+      New Dashboard
+    </h1>
     <p class="text-xl text-gray-500 mb-8">
       <a
         href="/dashboards"
@@ -122,4 +124,4 @@ export default class DashboardsNewPageComponent {
       )
       .subscribe();
   }
-}
+}
diff --git a/web/src/app/pages/login.page.ts b/web/src/app/pages/login.page.ts
@@ -159,4 +159,4 @@ export default class LoginPageComponent {
       )
       .subscribe();
   }
-}
+}
diff --git a/web/src/app/services/theme.service.ts b/web/src/app/services/theme.service.ts
@@ -20,15 +20,23 @@ export class ThemeService extends LocalStorageService<ColorScheme> {
     e: StorageChangeType<string>
   ) => Promise<unknown>)[] = [
     async e => {
-      const htmlTag = this.document.querySelector('html');
-
+      const htmlTag = this.document.documentElement;
       const theme = e.newValue;
+
       if (!theme) {
         await this.set('light');
       } else {
+        // Set the data-theme attribute for any components that might use it
         if (htmlTag) {
           htmlTag.setAttribute('data-theme', theme);
         }
+
+        // Apply the appropriate class for Tailwind dark mode
+        if (theme === 'dark') {
+          this.document.documentElement.classList.add('dark');
+        } else {
+          this.document.documentElement.classList.remove('dark');
+        }
       }
     },
   ];
@@ -51,7 +59,7 @@ export class ThemeService extends LocalStorageService<ColorScheme> {
     if (current) {
       await this.set(current);
     } else {
-      await this.switchTheme();
+      await this.set('light'); // Default to light theme
     }
   }
-}
+}
diff --git a/web/src/server/widgets/clock-widget.ts b/web/src/server/widgets/clock-widget.ts
@@ -1,7 +1,7 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { FormlyFieldConfig } from '@ngx-formly/core';
-import { delay, of, tap } from 'rxjs';
+import { of, tap } from 'rxjs';
 import { z } from 'zod';
 
 import { getClockName, linkFunctionsToWindow } from './clock-widget.utils';
@@ -50,7 +50,7 @@ export const ClockWidgetSchema = z.object({
   hourFormat: z
     .enum(ClockWidgetHourFormatKeys as any)
     .default(HourFormat['24h']),
-  timezones: z.array(ClockWidgetTimezoneSchema),
+  timezones: z.array(ClockWidgetTimezoneSchema).nullish().optional(),
 });
 
 export type ClockWidgetTimezoneType = z.infer<typeof ClockWidgetTimezoneSchema>;
@@ -209,7 +209,7 @@ export class ClockWidgetRender implements WidgetRender<ClockWidgetType> {
         : '--:--';
 
       // Get current times for the timezones
-      const mainTimeName = widget.options.timezones[0].name
+      const mainTimeName = widget.options.timezones[0]?.name
         ? getClockName(widget.id, 'main')
         : '--:--';
       const smallTime1Name = widget.options.timezones[1]
diff --git a/web/src/styles.css b/web/src/styles.css
diff --git a/web/tailwind.config.js b/web/tailwind.config.js

Original file line number	Diff line number	Diff line change
`@@ -164,4 +164,4 @@ export class AppComponent implements OnInit {`
`164`	`164`	`new Error('This feature is not available yet')`
`165`	`165`	`);`
`166`	`166`	`}`
`167`		`-}`
	`167`	`+}`
Original file line number	Diff line number	Diff line change
`@@ -88,4 +88,4 @@ export class FlatInputWrapperComponent extends FieldWrapper<FormlyFieldConfig> {`
`88`	`88`	`}`
`89`	`89`	`return errors;`
`90`	`90`	`}`
`91`		`-}`
	`91`	`+}`
Original file line number	Diff line number	Diff line change
`@@ -159,4 +159,4 @@ export default class LoginPageComponent {`
`159`	`159`	`)`
`160`	`160`	`.subscribe();`
`161`	`161`	`}`
`162`		`-}`
	`162`	`+}`