@postxl/generators 1.0.10 → 1.0.13

package/dist/frontend-core/template/src/components/ui/data-grid/cell-variants/utils/gantt-timeline.tsx

@@ -1,4 +1,5 @@
 import { useRef } from 'react'
+
 import { GanttTimerangePicker } from './gantt-timerange-picker'
 
 // Gantt header component rendering the timeline scale
@@ -49,7 +50,7 @@ export const GanttTimeline = ({ header }: { header: any }) => {
           /* distribute space between years with flex-grow except for first and last as they might only be partial */
           <div
             key={year}
-            className="h-full relative flex grow border-l border-neutral-300 dark:border-neutral-700 first:border-none first:grow-0 last:grow-0 overflow-hidden"
+            className="h-full relative flex grow border-l border-muted-foreground/30 first:border-none first:grow-0 last:grow-0 overflow-hidden"
             style={
               // index == 0: first year, index == totalYears -1: last year
               index == 0 || index == totalYears - 1
@@ -62,7 +63,7 @@ export const GanttTimeline = ({ header }: { header: any }) => {
               <div className="absolute bottom-0 left-0 right-0 flex h-1.5 w-full">
                 {index == 0 && ts.getMonth() < 11 && (
                   <div
-                    className="h-full border-r border-dashed border-neutral-300 dark:border-neutral-700"
+                    className="h-full border-r border-dashed border-muted-foreground/30"
                     style={{ width: `${(firstMonthPartialMs / firstYearPartialMs) * 100}%` }}
                   />
                 )}
@@ -71,8 +72,8 @@ export const GanttTimeline = ({ header }: { header: any }) => {
                   length: (index == totalYears - 1 ? te.getMonth() : 12) - (index == 0 ? ts.getMonth() + 1 : 0),
                 }).map((_, monthIndex) => (
                   <div
-                    key={`${year}-${(index == 0 ? ts.getMonth() + 1 : 0) + monthIndex}`}
-                    className="grow h-full border-r border-dashed border-neutral-300 dark:border-neutral-700 last:border-0"
+                    key={`${year}-${monthIndex}`}
+                    className="grow h-full border-r border-dashed border-muted-foreground/30 last:border-0"
                   />
                 ))}
                 {/* last month with calculated width as it might only be partial */}
@@ -82,7 +83,7 @@ export const GanttTimeline = ({ header }: { header: any }) => {
               </div>
             )}
 
-            <span className="ps-0.5 -mt-px text-xs text-neutral-500 dark:text-neutral-400 select-none z-1">{year}</span>
+            <span className="ps-0.5 -mt-px text-xs text-muted-foreground select-none z-1">{year}</span>
           </div>
         ))}
       </div>

package/dist/frontend-core/template/src/components/ui/data-grid/data-grid-cell-wrapper.tsx

@@ -186,10 +186,10 @@ export function DataGridCellWrapper<TData>({
           'text-center': align === 'center',
         },
         {
-          'ring-1 ring-neutral-950 ring-inset dark:ring-neutral-300': isFocused,
+          'ring-1 ring-foreground ring-inset dark:ring-secondary-foreground': isFocused,
           'bg-yellow-100 dark:bg-yellow-900/30': isSearchMatch && !isActiveSearchMatch,
           'bg-orange-200 dark:bg-orange-900/50': isActiveSearchMatch,
-          'bg-neutral-900/10 dark:bg-neutral-50/10': isSelected && !isEditing,
+          'bg-accent-foreground/10': isSelected && !isEditing,
           'cursor-default': !isEditing,
           '**:data-[slot=grid-cell-content]:line-clamp-1': !isEditing && rowHeight === 'short',
           '**:data-[slot=grid-cell-content]:line-clamp-2': !isEditing && rowHeight === 'medium',

package/dist/frontend-core/template/src/components/ui/data-grid/data-grid-cell.tsx

@@ -1,13 +1,14 @@
 import type { Cell, Table } from '@tanstack/react-table'
-import { ShortTextCell } from './cell-variants/short-text-cell'
-import { LongTextCell } from './cell-variants/long-text-cell'
-import { NumberCell } from './cell-variants/number-cell'
-import { SelectCell } from './cell-variants/select-cell'
-import { MultiSelectCell } from './cell-variants/multi-select-cell'
+
 import { CheckboxCell } from './cell-variants/checkbox-cell'
 import { DateCell } from './cell-variants/date-cell'
-import { ReactNodeCell } from './cell-variants/react-node-cell'
 import { GanttCell } from './cell-variants/gantt-cell'
+import { LongTextCell } from './cell-variants/long-text-cell'
+import { MultiSelectCell } from './cell-variants/multi-select-cell'
+import { NumberCell } from './cell-variants/number-cell'
+import { ReactNodeCell } from './cell-variants/react-node-cell'
+import { SelectCell } from './cell-variants/select-cell'
+import { ShortTextCell } from './cell-variants/short-text-cell'
 
 type DataGridCellProps<TData> = {
   cell: Cell<TData, unknown>

package/dist/frontend-core/template/src/components/ui/data-grid/data-grid-column-header.tsx

@@ -28,6 +28,7 @@ import {
 } from '@components/ui/dropdown-menu/dropdown-menu'
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@components/ui/tooltip/tooltip'
 import { cn } from '@lib/utils'
+
 import { GanttTimeline } from './cell-variants/utils/gantt-timeline'
 
 function getColumnVariant(variant?: Cell['variant']): {
@@ -139,7 +140,7 @@ export function DataGridColumnHeader<TData, TValue>({
       <DropdownMenu>
         <DropdownMenuTrigger
           className={cn(
-            'flex size-full items-center justify-between gap-2 p-2 text-sm bg-sidebar-accent/80 font-bold hover:bg-neutral-100/40 data-[state=open]:bg-neutral-100/40 [&_svg]:size-4 dark:hover:bg-neutral-800/40 dark:data-[state=open]:bg-neutral-800/40',
+            'flex size-full items-center justify-between gap-2 p-2 text-sm bg-sidebar-accent/80 font-bold hover:bg-secondary/40 data-[state=open]:bg-secondary/40 [&_svg]:size-4',
             isAnyColumnResizing && 'pointer-events-none',
             className,
           )}
@@ -151,7 +152,7 @@ export function DataGridColumnHeader<TData, TValue>({
               <TooltipProvider>
                 <Tooltip delayDuration={100}>
                   <TooltipTrigger asChild>
-                    <columnVariant.icon className="size-3.5 shrink-0 text-neutral-500 dark:text-neutral-400" />
+                    <columnVariant.icon className="size-3.5 shrink-0 text-muted-foreground" />
                   </TooltipTrigger>
                   <TooltipContent side="top">
                     <p>{columnVariant.label}</p>
@@ -161,13 +162,13 @@ export function DataGridColumnHeader<TData, TValue>({
             )}
             <span className="truncate">{label}</span>
           </div>
-          <ChevronDownIcon className="shrink-0 text-neutral-500 dark:text-neutral-400" />
+          <ChevronDownIcon className="shrink-0 text-muted-foreground" />
         </DropdownMenuTrigger>
         <DropdownMenuContent align="start" sideOffset={0} className="w-60">
           {column.getCanSort() && (
             <>
               <DropdownMenuCheckboxItem
-                className="relative pr-8 pl-2 [&>span:first-child]:right-2 [&>span:first-child]:left-auto [&_svg]:text-neutral-500 dark:[&_svg]:text-neutral-400"
+                className="relative pr-8 pl-2 [&>span:first-child]:right-2 [&>span:first-child]:left-auto [&_svg]:text-muted-foreground"
                 checked={column.getIsSorted() === 'asc'}
                 onClick={() => onSortingChange('asc')}
               >
@@ -175,7 +176,7 @@ export function DataGridColumnHeader<TData, TValue>({
                 Sort asc
               </DropdownMenuCheckboxItem>
               <DropdownMenuCheckboxItem
-                className="relative pr-8 pl-2 [&>span:first-child]:right-2 [&>span:first-child]:left-auto [&_svg]:text-neutral-500 dark:[&_svg]:text-neutral-400"
+                className="relative pr-8 pl-2 [&>span:first-child]:right-2 [&>span:first-child]:left-auto [&_svg]:text-muted-foreground"
                 checked={column.getIsSorted() === 'desc'}
                 onClick={() => onSortingChange('desc')}
               >
@@ -195,29 +196,23 @@ export function DataGridColumnHeader<TData, TValue>({
               {column.getCanSort() && <DropdownMenuSeparator />}
 
               {isPinnedLeft ? (
-                <DropdownMenuItem className="[&_svg]:text-neutral-500 dark:[&_svg]:text-neutral-400" onClick={onUnpin}>
+                <DropdownMenuItem className="[&_svg]:text-muted-foreground" onClick={onUnpin}>
                   <PinOffIcon />
                   Unpin from left
                 </DropdownMenuItem>
               ) : (
-                <DropdownMenuItem
-                  className="[&_svg]:text-neutral-500 dark:[&_svg]:text-neutral-400"
-                  onClick={onLeftPin}
-                >
+                <DropdownMenuItem className="[&_svg]:text-muted-foreground" onClick={onLeftPin}>
                   <PinIcon />
                   Pin to left
                 </DropdownMenuItem>
               )}
               {isPinnedRight ? (
-                <DropdownMenuItem className="[&_svg]:text-neutral-500 dark:[&_svg]:text-neutral-400" onClick={onUnpin}>
+                <DropdownMenuItem className="[&_svg]:text-muted-foreground" onClick={onUnpin}>
                   <PinOffIcon />
                   Unpin from right
                 </DropdownMenuItem>
               ) : (
-                <DropdownMenuItem
-                  className="[&_svg]:text-neutral-500 dark:[&_svg]:text-neutral-400"
-                  onClick={onRightPin}
-                >
+                <DropdownMenuItem className="[&_svg]:text-muted-foreground" onClick={onRightPin}>
                   <PinIcon />
                   Pin to right
                 </DropdownMenuItem>
@@ -228,7 +223,7 @@ export function DataGridColumnHeader<TData, TValue>({
             <>
               <DropdownMenuSeparator />
               <DropdownMenuCheckboxItem
-                className="relative pr-8 pl-2 [&>span:first-child]:right-2 [&>span:first-child]:left-auto [&_svg]:text-neutral-500 dark:[&_svg]:text-neutral-400"
+                className="relative pr-8 pl-2 [&>span:first-child]:right-2 [&>span:first-child]:left-auto [&_svg]:text-muted-foreground"
                 checked={!column.getIsVisible()}
                 onClick={() => column.toggleVisibility(false)}
               >
@@ -292,12 +287,10 @@ function DataGridColumnResizerImpl<TData, TValue>({ header, table, label }: Data
       className={cn(
         'right-0 absolute top-0 z-50 h-full w-0 touch-none select-none cursor-ew-resize focus:outline-none',
         // visible thin line (use right positioning and a stable 1px width)
-        "before:content-[''] before:absolute before:inset-y-0 before:right-0 before:translate-x-1/2 before:w-px before:h-full before:bg-neutral-700 dark:before:bg-neutral-400 before:opacity-0 before:transition-opacity before:duration-150",
+        "before:content-[''] before:absolute before:inset-y-0 before:right-0 before:translate-x-1/2 before:w-px before:h-full before:bg-accent-foreground/70 before:opacity-0 before:transition-opacity before:duration-150",
         // large invisible hit area
         "after:content-[''] after:absolute after:inset-y-0 after:right-0 after:translate-x-1/2 after:w-[18px] after:h-full after:bg-transparent",
-        header.column.getIsResizing()
-          ? 'before:opacity-100 before:bg-neutral-900 dark:before:bg-neutral-50'
-          : 'hover:before:opacity-100',
+        header.column.getIsResizing() ? 'before:opacity-100 before:bg-accent-foreground' : 'hover:before:opacity-100',
       )}
       style={{ willChange: 'transform, opacity', transform: 'translateZ(0)' }}
       onDoubleClick={onDoubleClick}

package/dist/frontend-core/template/src/components/ui/data-grid/data-grid-row.tsx

@@ -79,7 +79,7 @@ function DataGridRowImpl<TData>({
       ref={rowRef}
       tabIndex={-1}
       className={cn(
-        'absolute flex w-full border-b h-[calc(var(--line-height-sm)*(var(--line-count))+12px)]',
+        'absolute flex w-full border-b h-[calc(var(--data-grid-line-height)*(var(--line-count))+12px)]',
         className,
       )}
       style={{ '--line-count': `${getLineCount(rowHeight)}` } as React.CSSProperties}
@@ -107,7 +107,7 @@ function DataGridRowImpl<TData>({
             {typeof cell.column.columnDef.header === 'function' ? (
               <div
                 className={cn('size-full px-3 py-1.5', {
-                  'bg-neutral-900/10 dark:bg-neutral-50/10': isRowSelected,
+                  'bg-accent-foreground/10': isRowSelected,
                 })}
               >
                 {flexRender(cell.column.columnDef.cell, cell.getContext())}

package/dist/frontend-core/template/src/components/ui/data-grid/data-grid-search.tsx

@@ -152,7 +152,7 @@ function DataGridSearchImpl({
     <div
       role="search"
       data-slot="grid-search"
-      className="fade-in-0 slide-in-from-top-2 absolute top-4 right-4 z-50 flex animate-in flex-col gap-2 rounded-lg border border-neutral-200 bg-white p-2 shadow-lg dark:border-neutral-800 dark:bg-neutral-950"
+      className="fade-in-0 slide-in-from-top-2 absolute top-4 right-4 z-50 flex animate-in flex-col gap-2 rounded-lg border border-border bg-background p-2 shadow-lg"
     >
       <div className="flex items-center gap-2">
         <Input
@@ -195,7 +195,7 @@ function DataGridSearchImpl({
           </Button>
         </div>
       </div>
-      <div className="flex items-center gap-1 whitespace-nowrap text-neutral-500 text-xs dark:text-neutral-400">
+      <div className="flex items-center gap-1 whitespace-nowrap text-muted-foreground">
         {searchMatches.length > 0 ? (
           <span>
             {matchIndex + 1} of {searchMatches.length}

package/dist/frontend-core/template/src/components/ui/data-grid/data-grid-utils.ts

@@ -20,21 +20,10 @@ export function parseCellKey(cellKey: string): Required<CellPosition> {
 }
 
 export function getRowHeightValue(rowHeight: RowHeightValue): number {
-  // TODO: find a way to use the css variable directly (currently the style might not be loaded yet which would lead to wrong numbers)
-  const lineHeight = /* Number.parseFloat(
-    getComputedStyle(document.documentElement)
-      .getPropertyValue('--line-height-sm')
-      .trim()
-      .replaceAll(/[^\d.-]/g, ''),
-  ) */ 16
-  /* const rowHeightMap: Record<RowHeightValue, number> = {
-    short: lineHeight * getLineCount(rowHeight) + 12,
-    medium: lineHeight * getLineCount(rowHeight) + 12,
-    tall: lineHeight * getLineCount(rowHeight) + 12,
-    'extra-tall': lineHeight * getLineCount(rowHeight) + 12,
-  } */
+  // TODO: Make lineHeight configurable / use css variable: --data-grid-line-height
+  const lineHeight = 16
 
-  return /* rowHeightMap[rowHeight] */ lineHeight * getLineCount(rowHeight) + 12
+  return lineHeight * getLineCount(rowHeight) + 12
 }
 
 export function getLineCount(rowHeight: RowHeightValue): number {

package/dist/frontend-core/template/src/components/ui/data-grid/data-grid-view-menu.tsx

@@ -251,7 +251,7 @@ export function DataGridViewMenu<TData>({ table, ...props }: DataGridViewMenuPro
           size="sm"
           className="ml-auto hidden h-8 font-normal lg:flex"
         >
-          <MixerHorizontalIcon className="text-neutral-500 dark:text-neutral-400" />
+          <MixerHorizontalIcon className="text-muted-foreground" />
           View
         </Button>
       </PopoverTrigger>
@@ -310,7 +310,7 @@ export function DataGridViewMenu<TData>({ table, ...props }: DataGridViewMenuPro
                             startPointerDrag(e, column.id)
                           }}
                           className={cn(
-                            'size-4 text-neutral-400',
+                            'size-4 text-muted-foreground',
                             searchQuery.trim() !== '' && 'opacity-10',
                             searchQuery.trim() === '' && (isDragging ? 'cursor-grabbing' : 'cursor-grab'),
                           )}
@@ -326,7 +326,7 @@ export function DataGridViewMenu<TData>({ table, ...props }: DataGridViewMenuPro
                               ? column.getIsVisible()
                                 ? 'opacity-100'
                                 : 'opacity-0'
-                              : 'opacity-50 text-neutral-400',
+                              : 'opacity-50 text-muted-foreground',
                           )}
                         />
                       </CommandItem>

package/dist/frontend-core/template/src/components/ui/data-grid/data-grid.tsx

@@ -82,7 +82,7 @@ export function DataGrid<TData>({
         data-slot="grid"
         tabIndex={0}
         ref={dataGridRef}
-        className="relative grid select-none overflow-auto rounded-md border border-neutral-200 focus:outline-none dark:border-neutral-800"
+        className="relative grid select-none overflow-auto rounded-md border border-border focus:outline-none"
         style={{
           ...columnSizeVars,
           // dynamically include measured header/footer heights (falling back to previous magic numbers)
@@ -98,7 +98,7 @@ export function DataGrid<TData>({
           role="rowgroup"
           data-slot="grid-header"
           ref={headerRef}
-          className="sticky top-0 z-10 grid border-b bg-white dark:bg-neutral-950"
+          className="sticky top-0 z-10 grid border-b bg-background"
         >
           {table.getHeaderGroups().map((headerGroup, rowIndex) => (
             <div
@@ -139,7 +139,7 @@ export function DataGrid<TData>({
                     }}
                   >
                     {header.isPlaceholder ? null : typeof header.column.columnDef.header === 'function' ? (
-                      <div className="size-full px-3 py-1.5 bg-sidebar-accent/80 hover:bg-neutral-100/40 dark:hover:bg-neutral-800/40">
+                      <div className="size-full px-3 py-1.5 bg-secondary/80 hover:bg-secondary/40">
                         {flexRender(header.column.columnDef.header, header.getContext())}
                       </div>
                     ) : (
@@ -183,7 +183,7 @@ export function DataGrid<TData>({
             role="rowgroup"
             data-slot="grid-footer"
             ref={footerRef}
-            className="sticky bottom-0 z-10 grid border-t bg-white dark:bg-neutral-950"
+            className="sticky bottom-0 z-10 grid border-t bg-background"
           >
             <div
               role="row"
@@ -195,7 +195,7 @@ export function DataGrid<TData>({
               <div
                 role="gridcell"
                 tabIndex={0}
-                className="relative flex h-9 grow items-center bg-neutral-100/30 transition-colors hover:bg-neutral-100/50 focus:bg-neutral-100/50 focus:outline-none dark:bg-neutral-800/30 dark:hover:bg-neutral-800/50 dark:focus:bg-neutral-800/50"
+                className="relative flex h-9 grow items-center bg-secondary/30 transition-colors hover:bg-secondary/50 focus:bg-secondary/50 focus:outline-none"
                 style={{
                   width: table.getTotalSize(),
                   minWidth: table.getTotalSize(),
@@ -203,7 +203,7 @@ export function DataGrid<TData>({
                 onClick={onRowAdd}
                 onKeyDown={onAddRowKeyDown}
               >
-                <div className="sticky left-0 flex items-center gap-2 px-3 text-neutral-500 dark:text-neutral-400">
+                <div className="sticky left-0 flex items-center gap-2 px-3 text-muted-foreground">
                   <PlusIcon className="size-3.5" />
                   <span className="text-sm">Add row</span>
                 </div>

package/dist/frontend-core/template/src/components/ui/data-grid/styles.css

@@ -0,0 +1,3 @@
+@theme inline {
+  --data-grid-line-height: 16px;
+}

package/dist/frontend-core/template/src/components/ui/data-table/data-table.tsx

@@ -1,6 +1,6 @@
 import '@glideapps/glide-data-grid/dist/index.css'
 
-import { useTheme } from '@context-providers/theme-context-provider'
+import { type Theme as ContextTheme, useTheme } from '@context-providers/theme-context-provider'
 import {
   type CellClickedEventArgs,
   DataEditor,
@@ -125,20 +125,19 @@ export function DataTable<Row extends object, ColumnId extends string = string>(
 }: DataTableProps<Row, ColumnId>) {
   const sortOrder = currentSort?.order === 'asc' ? 'sortAscending' : 'sortDescending'
   const [managedColumns, setManagedColumns] = useState<ManagedDataTableColumn<Row, ColumnId>[]>([])
-  const { theme, isThemeReady } = useTheme()
+  const { brand, colorMode } = useTheme()
+  const theme: ContextTheme = `${brand} ${colorMode}`
   const [tableTheme, setTableTheme] = useState<Partial<Theme> | undefined>()
 
-  const getTheme = useCallback(() => getTableTheme(theme), [theme])
-
   useEffect(() => {
-    // we need this timeout to make sure 'getTableTheme' returns the correct css variables
-    if (isThemeReady) {
-      setTimeout(() => {
-        const newTheme = getTheme()
-        setTableTheme(newTheme)
-      }, 0)
-    }
-  }, [getTheme, isThemeReady, theme])
+    const observer = new MutationObserver(() => {
+      setTableTheme(getTableTheme(theme))
+    })
+
+    observer.observe(document.documentElement, { attributes: true, attributeFilter: ['style', 'class'] })
+
+    return () => observer.disconnect()
+  }, [theme])
 
   useEffect(() => {
     setManagedColumns(

package/dist/frontend-core/template/src/context-providers/auth-context-provider.tsx

@@ -154,7 +154,7 @@ export function AuthProvider({ children }: Readonly<{ children: React.ReactNode
     }
 
     if (userData && isUserSuccessfullyLoaded) {
-      const userDataResult: ViewerResult = Result.fromObject(userData as unknown as any)
+      const userDataResult: ViewerResult = Result.fromObject(userData as unknown as any) as unknown as ViewerResult
       if (userDataResult.isOk()) {
         const value = userDataResult.unwrap()
         console.log('User data loaded successfully:', value)

package/dist/frontend-core/template/src/context-providers/theme-context-provider.tsx

@@ -1,100 +1,85 @@
-import { createContext, useEffect, useMemo, useState } from 'react'
+import { createContext, useEffect, useMemo } from 'react'
 import useLocalStorageState from 'use-local-storage-state'
 
 import { createUseContext } from '@lib/react'
 
-export type Theme = 'dark' | 'light' | 'system'
-type ThemeLightDark = 'dark' | 'light'
+const ALLOWED_BRANDS = ['client', 'default'] as const
+
+export type ColorMode = 'dark' | 'light' | 'system'
+export type Brand = (typeof ALLOWED_BRANDS)[number]
+export type Theme = `${Brand} ${ColorMode}`
+type ResolvedColorMode = 'dark' | 'light'
 
 type ThemeProviderProps = {
   children: React.ReactNode
-  defaultTheme?: Theme
+  defaultBrand?: Brand
+  defaultColorMode?: ColorMode
   storageKey?: string
 }
 
 type ThemeProviderState = {
-  theme: Theme
-  setTheme: (theme: Theme) => void
-  isThemeReady: boolean
-}
-
-const initialState: ThemeProviderState = {
-  theme: 'system',
-  setTheme: () => null,
-  isThemeReady: false,
+  brand: Brand
+  colorMode: ColorMode
+  setColorMode: (colorMode: ColorMode) => void
+  setBrand: (brand: Brand) => void
 }
 
-const ThemeContext = createContext<ThemeProviderState>(initialState)
-const STORAGE_KEY = 'usp-theme-mode'
-
-function nextFrame(): Promise<void> {
-  return new Promise((r) => requestAnimationFrame(() => r()))
+type ThemeStorage = {
+  brand: Brand
+  colorMode: ColorMode
 }
 
-/**
- * here we wait until the css var '--theme-ready-flag' is set, so we know the css is loaded
- * we need this 'hack' because we set the values of the DataTable with js and read the values from the css file.
- * to make sure these values are not undefined, we need to wait until the css is loaded.
- */
-async function waitForThemeApplied(expected: Theme, timeoutMs = 500): Promise<boolean> {
-  const start = performance.now()
-  // Give the browser a paint opportunity
-  await nextFrame()
-
-  while (performance.now() - start < timeoutMs) {
-    const value = getComputedStyle(document.documentElement)
-      .getPropertyValue('--theme-ready-flag')
-      .replaceAll(/['"\s]/g, '')
-    if (value === expected) {
-      return true
-    }
-    await nextFrame()
-  }
-  return false
+const initialState: ThemeProviderState = {
+  brand: 'default',
+  colorMode: 'system',
+  setColorMode: () => null,
+  setBrand: () => null,
 }
 
-export function ThemeProvider({ children, defaultTheme = 'system', ...props }: Readonly<ThemeProviderProps>) {
-  const [theme, setTheme] = useLocalStorageState(STORAGE_KEY, {
-    defaultValue: defaultTheme,
+const ThemeContext = createContext<ThemeProviderState>(initialState)
+const STORAGE_KEY = 'PXL-theme-mode'
+
+export function ThemeProvider({
+  children,
+  defaultBrand = 'default',
+  defaultColorMode = 'system',
+  ...props
+}: Readonly<ThemeProviderProps>) {
+  const [themeStorage, setThemeStorage] = useLocalStorageState<ThemeStorage>(STORAGE_KEY, {
+    defaultValue: { brand: defaultBrand, colorMode: defaultColorMode },
   })
-  const [isThemeReady, setIsThemeReady] = useState(false)
+  const { brand, colorMode } = themeStorage
 
   useEffect(() => {
     const root = globalThis.document.documentElement
 
-    root.classList.remove('light', 'dark')
+    root.classList.remove('light', 'dark', ...ALLOWED_BRANDS)
+    root.classList.add(brand)
 
-    let applied: ThemeLightDark
-    if (theme === 'system') {
-      applied = globalThis.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
-      root.classList.add(applied)
+    let resolvedColorMode: ResolvedColorMode
+    if (colorMode === 'system') {
+      resolvedColorMode = globalThis.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
+      setThemeStorage({ brand, colorMode: resolvedColorMode })
+      root.classList.add(resolvedColorMode)
       return
     }
-    applied = theme
-    root.classList.add(theme)
 
-    let cancelled = false
-
-    void (async () => {
-      // Option A: wait for computed variable
-      const ok = await waitForThemeApplied(applied)
-      if (!cancelled) {
-        setIsThemeReady(ok)
-      }
-    })()
-
-    return () => {
-      cancelled = true
-    }
-  }, [theme])
+    resolvedColorMode = colorMode
+    root.classList.add(resolvedColorMode)
+  }, [brand, colorMode, setThemeStorage])
 
   const value = useMemo(
     () => ({
-      theme,
-      setTheme,
-      isThemeReady,
+      brand,
+      colorMode,
+      setColorMode: (newColorMode: ColorMode) => {
+        setThemeStorage({ brand, colorMode: newColorMode })
+      },
+      setBrand: (newBrand: Brand) => {
+        setThemeStorage({ brand: newBrand, colorMode })
+      },
     }),
-    [isThemeReady, setTheme, theme],
+    [brand, colorMode, setThemeStorage],
   )
 
   return (

package/dist/frontend-core/template/src/main.tsx

@@ -32,7 +32,7 @@ function App() {
     <QueryClientProvider client={queryClient}>
       <TRPCProvider trpcClient={trpcClient} queryClient={queryClient}>
         <AuthProvider>
-          <ThemeProvider defaultTheme="light">
+          <ThemeProvider>
             <AppRouter />
           </ThemeProvider>
         </AuthProvider>

package/dist/frontend-core/template/src/pages/dashboard/dashboard.page.tsx

@@ -1,30 +1,29 @@
 import { useAuth } from '@context-providers/auth-context-provider'
-import { useTheme } from '@context-providers/theme-context-provider'
-import { MoonIcon, PersonIcon, SunIcon } from '@radix-ui/react-icons'
+import { ColorMode } from '@context-providers/theme-context-provider'
+import { PersonIcon } from '@radix-ui/react-icons'
+import { Post } from '@types'
 
+import { useState } from 'react'
 import { toast } from 'sonner'
 
+import { UpdatePostModal } from '@components/forms/post/update'
 import { Button } from '@components/ui/button/button'
+import { ColorModeToggle } from '@components/ui/color-mode-toggle/color-mode-toggle'
 import { ContentFrame } from '@components/ui/content-frame/content-frame'
-import { APP_CONFIG } from '@lib/config'
-import { useState } from 'react'
-import { Post } from '@types'
-import { usePosts } from '@hooks/use-posts'
-import { UpdatePostModal } from '@components/forms/post/update'
 import { Spreadsheet } from '@components/ui/spreadsheet'
 import model from '@components/ui/spreadsheet/model.json'
 import type { Model } from '@components/ui/spreadsheet/types'
+import { usePosts } from '@hooks/use-posts'
+import { APP_CONFIG } from '@lib/config'
 
 export const DashboardPage = () => {
   const { logout, user } = useAuth()
-  const { theme, setTheme } = useTheme()
 
   const [selectedPost, setSelectedPost] = useState<Post | null>(null)
   const [isUpdateModalOpen, setIsUpdateModalOpen] = useState(false)
 
-  const onToggleTheme = () => {
-    setTheme(theme === 'light' ? 'dark' : 'light')
-    toast.info("As you may see now it's " + (theme === 'light' ? 'dark' : 'light') + ' theme')
+  const onToggleTheme = (nextMode: ColorMode) => {
+    toast.info("As you may see now it's " + nextMode + ' color mode')
   }
   const { list } = usePosts()
 
@@ -42,9 +41,7 @@ export const DashboardPage = () => {
       <ContentFrame
         title={APP_CONFIG.AUTH ? 'Dashboard (authorized route)' : 'Dashboard'}
         controls={[
-          <Button key="btn-theme" onClick={onToggleTheme} __e2e_test_id__="button-toggle-theme">
-            {theme === 'light' ? <MoonIcon /> : <SunIcon />}
-          </Button>,
+          <ColorModeToggle key="btn-color-mode" onClick={onToggleTheme} />,
           APP_CONFIG.AUTH && (
             <Button key="btn-logout" onClick={logout}>
               <PersonIcon /> Logout