@vendure/dashboard 3.5.0-minor-202510031341 → 3.5.0-minor-202510161257

package/src/lib/framework/page/list-page.stories.tsx

@@ -0,0 +1,217 @@
+import { DetailPageButton } from '@/vdb/components/shared/detail-page-button.js';
+import { Button } from '@/vdb/components/ui/button.js';
+import { PageActionBarRight } from '@/vdb/framework/layout-engine/page-layout.js';
+import { ListPage, ListPageProps } from '@/vdb/framework/page/list-page.js';
+import { graphql } from '@/vdb/graphql/graphql.js';
+import type { Meta, StoryObj } from '@storybook/react';
+import { PlusIcon } from 'lucide-react';
+
+import { DemoRouterProvider } from '../../../../.storybook/providers.js';
+
+// Sample GraphQL query for countries
+const countryItemFragment = graphql(`
+    fragment CountryItem on Country {
+        id
+        createdAt
+        updatedAt
+        name
+        code
+        enabled
+    }
+`);
+
+const countriesListQuery = graphql(
+    `
+        query CountriesList($options: CountryListOptions) {
+            countries(options: $options) {
+                items {
+                    ...CountryItem
+                }
+                totalItems
+            }
+        }
+    `,
+    [countryItemFragment],
+);
+
+const deleteCountryDocument = graphql(`
+    mutation DeleteCountry($id: ID!) {
+        deleteCountry(id: $id) {
+            result
+            message
+        }
+    }
+`);
+
+function ListPageStoryWrapper(props: Omit<ListPageProps<any, any, any, any>, 'route'>) {
+    return <DemoRouterProvider component={route => <ListPage {...props} route={() => route} />} />;
+}
+
+const meta = {
+    title: 'Layout/ListPage',
+    component: ListPageStoryWrapper,
+    parameters: {
+        layout: 'fullscreen',
+    },
+    tags: ['autodocs'],
+    argTypes: {
+        pageId: {
+            control: 'text',
+            description: 'Unique identifier for the list page',
+        },
+        title: {
+            control: 'text',
+            description: 'Page title displayed in the header',
+        },
+        listQuery: {
+            control: false,
+            description: 'GraphQL query document for fetching list data',
+        },
+        deleteMutation: {
+            control: false,
+            description: 'GraphQL mutation document for deleting items',
+        },
+        customizeColumns: {
+            control: false,
+            description: 'Customize column rendering and behavior',
+        },
+        defaultVisibility: {
+            control: 'object',
+            description: 'Default visible columns',
+        },
+    },
+} satisfies Meta<typeof ListPageStoryWrapper>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/**
+ * Basic example of a ListPage showing countries from the demo API.
+ * This demonstrates the minimal configuration needed to render a list.
+ */
+export const BasicList: Story = {
+    args: {
+        pageId: 'country-list',
+        listQuery: countriesListQuery,
+        title: 'Countries',
+        defaultVisibility: {
+            name: true,
+            code: true,
+            enabled: true,
+        },
+    },
+};
+
+/**
+ * ListPage with custom column rendering and delete mutation.
+ * Shows how to customize the name column to render as a detail page button.
+ */
+export const WithCustomColumns: Story = {
+    args: {
+        pageId: 'country-list-custom',
+        listQuery: countriesListQuery,
+        deleteMutation: deleteCountryDocument,
+        title: 'Countries',
+        defaultVisibility: {
+            name: true,
+            code: true,
+            enabled: true,
+        },
+        customizeColumns: {
+            name: {
+                cell: ({ row }) => <DetailPageButton id={row.original.id} label={row.original.name} />,
+            },
+        },
+    },
+};
+
+/**
+ * ListPage with search functionality.
+ * Demonstrates how to configure search to filter on multiple fields.
+ */
+export const WithSearch: Story = {
+    args: {
+        pageId: 'country-list-search',
+        listQuery: countriesListQuery,
+        title: 'Countries',
+        defaultVisibility: {
+            name: true,
+            code: true,
+            enabled: true,
+        },
+        onSearchTermChange: (searchTerm: string) => {
+            return {
+                name: {
+                    contains: searchTerm,
+                },
+                code: {
+                    contains: searchTerm,
+                },
+            };
+        },
+        transformVariables: (variables: any) => {
+            return {
+                ...variables,
+                options: {
+                    ...variables.options,
+                    filterOperator: 'OR',
+                },
+            };
+        },
+        customizeColumns: {
+            name: {
+                cell: ({ row }) => <DetailPageButton id={row.original.id} label={row.original.name} />,
+            },
+        },
+    },
+};
+
+/**
+ * Complete example with action bar and all features.
+ * Shows the full ListPage configuration including custom action buttons.
+ */
+export const Complete: Story = {
+    args: {
+        pageId: 'country-list-complete',
+        listQuery: countriesListQuery,
+        deleteMutation: deleteCountryDocument,
+        title: 'Countries',
+        defaultVisibility: {
+            name: true,
+            code: true,
+            enabled: true,
+        },
+        onSearchTermChange: (searchTerm: string) => {
+            return {
+                name: {
+                    contains: searchTerm,
+                },
+                code: {
+                    contains: searchTerm,
+                },
+            };
+        },
+        transformVariables: (variables: any) => {
+            return {
+                ...variables,
+                options: {
+                    ...variables.options,
+                    filterOperator: 'OR',
+                },
+            };
+        },
+        customizeColumns: {
+            name: {
+                cell: ({ row }) => <DetailPageButton id={row.original.id} label={row.original.name} />,
+            },
+        },
+        children: (
+            <PageActionBarRight>
+                <Button>
+                    <PlusIcon />
+                    Add Country
+                </Button>
+            </PageActionBarRight>
+        ),
+    },
+};

package/src/lib/framework/page/list-page.tsx

@@ -17,7 +17,13 @@ import { ColumnFiltersState, SortingState, Table } from '@tanstack/react-table';
 import { TableOptions } from '@tanstack/table-core';
 
 import { BulkAction } from '@/vdb/framework/extension-api/types/index.js';
-import { FullWidthPageBlock, Page, PageActionBar, PageLayout, PageTitle } from '../layout-engine/page-layout.js';
+import {
+    FullWidthPageBlock,
+    Page,
+    PageActionBar,
+    PageLayout,
+    PageTitle,
+} from '../layout-engine/page-layout.js';
 
 /**
  * @description
@@ -393,6 +399,7 @@ export interface ListPageProps<
  *                 body
  *                 customFields
  *             }
+ *             totalItems
  *         }
  *     }
  * `);

package/src/lib/graphql/api.ts

@@ -69,6 +69,20 @@ const awesomeClient = new AwesomeGraphQLClient({
     },
 });
 
+/**
+ * @description
+ * Handles the scenario where there's an invalid channel token in local storage.
+ * Most often seen in local development when testing multiple backends on the same
+ * localhost origin.
+ */
+function handleInvalidChannelToken(err: unknown) {
+    if (err instanceof Error) {
+        if ((err as any).extensions?.code === 'CHANNEL_NOT_FOUND') {
+            localStorage.removeItem(LS_KEY_SELECTED_CHANNEL_TOKEN);
+        }
+    }
+}
+
 export type VariablesAndRequestHeadersArgs<V extends Variables> =
     V extends Record<any, never>
         ? [variables?: V, requestHeaders?: HeadersInit]
@@ -79,7 +93,10 @@ function query<T, V extends Variables = Variables>(
     variables?: V,
 ): Promise<T> {
     const documentString = typeof document === 'string' ? document : print(document);
-    return awesomeClient.request(documentString, variables) as any;
+    return awesomeClient.request(documentString, variables).catch(err => {
+        handleInvalidChannelToken(err);
+        throw err;
+    }) as any;
 }
 
 function mutate<T, V extends Variables = Variables>(

package/src/lib/graphql/graphql-env.d.ts

@@ -416,7 +416,7 @@ export type introspection_types = {
     'TaxCategorySortParameter': { kind: 'INPUT_OBJECT'; name: 'TaxCategorySortParameter'; isOneOf: false; inputFields: [{ name: 'id'; type: { kind: 'ENUM'; name: 'SortOrder'; ofType: null; }; defaultValue: null }, { name: 'createdAt'; type: { kind: 'ENUM'; name: 'SortOrder'; ofType: null; }; defaultValue: null }, { name: 'updatedAt'; type: { kind: 'ENUM'; name: 'SortOrder'; ofType: null; }; defaultValue: null }, { name: 'name'; type: { kind: 'ENUM'; name: 'SortOrder'; ofType: null; }; defaultValue: null }]; };
     'TaxLine': { kind: 'OBJECT'; name: 'TaxLine'; fields: { 'description': { name: 'description'; type: { kind: 'NON_NULL'; name: never; ofType: { kind: 'SCALAR'; name: 'String'; ofType: null; }; } }; 'taxRate': { name: 'taxRate'; type: { kind: 'NON_NULL'; name: never; ofType: { kind: 'SCALAR'; name: 'Float'; ofType: null; }; } }; }; };
     'TaxRate': { kind: 'OBJECT'; name: 'TaxRate'; fields: { 'category': { name: 'category'; type: { kind: 'NON_NULL'; name: never; ofType: { kind: 'OBJECT'; name: 'TaxCategory'; ofType: null; }; } }; 'createdAt': { name: 'createdAt'; type: { kind: 'NON_NULL'; name: never; ofType: { kind: 'SCALAR'; name: 'DateTime'; ofType: null; }; } }; 'customFields': { name: 'customFields'; type: { kind: 'SCALAR'; name: 'JSON'; ofType: null; } }; 'customerGroup': { name: 'customerGroup'; type: { kind: 'OBJECT'; name: 'CustomerGroup'; ofType: null; } }; 'enabled': { name: 'enabled'; type: { kind: 'NON_NULL'; name: never; ofType: { kind: 'SCALAR'; name: 'Boolean'; ofType: null; }; } }; 'id': { name: 'id'; type: { kind: 'NON_NULL'; name: never; ofType: { kind: 'SCALAR'; name: 'ID'; ofType: null; }; } }; 'name': { name: 'name'; type: { kind: 'NON_NULL'; name: never; ofType: { kind: 'SCALAR'; name: 'String'; ofType: null; }; } }; 'updatedAt': { name: 'updatedAt'; type: { kind: 'NON_NULL'; name: never; ofType: { kind: 'SCALAR'; name: 'DateTime'; ofType: null; }; } }; 'value': { name: 'value'; type: { kind: 'NON_NULL'; name: never; ofType: { kind: 'SCALAR'; name: 'Float'; ofType: null; }; } }; 'zone': { name: 'zone'; type: { kind: 'NON_NULL'; name: never; ofType: { kind: 'OBJECT'; name: 'Zone'; ofType: null; }; } }; }; };
-    'TaxRateFilterParameter': { kind: 'INPUT_OBJECT'; name: 'TaxRateFilterParameter'; isOneOf: false; inputFields: [{ name: 'id'; type: { kind: 'INPUT_OBJECT'; name: 'IDOperators'; ofType: null; }; defaultValue: null }, { name: 'createdAt'; type: { kind: 'INPUT_OBJECT'; name: 'DateOperators'; ofType: null; }; defaultValue: null }, { name: 'updatedAt'; type: { kind: 'INPUT_OBJECT'; name: 'DateOperators'; ofType: null; }; defaultValue: null }, { name: 'name'; type: { kind: 'INPUT_OBJECT'; name: 'StringOperators'; ofType: null; }; defaultValue: null }, { name: 'enabled'; type: { kind: 'INPUT_OBJECT'; name: 'BooleanOperators'; ofType: null; }; defaultValue: null }, { name: 'value'; type: { kind: 'INPUT_OBJECT'; name: 'NumberOperators'; ofType: null; }; defaultValue: null }, { name: '_and'; type: { kind: 'LIST'; name: never; ofType: { kind: 'NON_NULL'; name: never; ofType: { kind: 'INPUT_OBJECT'; name: 'TaxRateFilterParameter'; ofType: null; }; }; }; defaultValue: null }, { name: '_or'; type: { kind: 'LIST'; name: never; ofType: { kind: 'NON_NULL'; name: never; ofType: { kind: 'INPUT_OBJECT'; name: 'TaxRateFilterParameter'; ofType: null; }; }; }; defaultValue: null }]; };
+    'TaxRateFilterParameter': { kind: 'INPUT_OBJECT'; name: 'TaxRateFilterParameter'; isOneOf: false; inputFields: [{ name: 'zoneId'; type: { kind: 'INPUT_OBJECT'; name: 'IDOperators'; ofType: null; }; defaultValue: null }, { name: 'categoryId'; type: { kind: 'INPUT_OBJECT'; name: 'IDOperators'; ofType: null; }; defaultValue: null }, { name: 'id'; type: { kind: 'INPUT_OBJECT'; name: 'IDOperators'; ofType: null; }; defaultValue: null }, { name: 'createdAt'; type: { kind: 'INPUT_OBJECT'; name: 'DateOperators'; ofType: null; }; defaultValue: null }, { name: 'updatedAt'; type: { kind: 'INPUT_OBJECT'; name: 'DateOperators'; ofType: null; }; defaultValue: null }, { name: 'name'; type: { kind: 'INPUT_OBJECT'; name: 'StringOperators'; ofType: null; }; defaultValue: null }, { name: 'enabled'; type: { kind: 'INPUT_OBJECT'; name: 'BooleanOperators'; ofType: null; }; defaultValue: null }, { name: 'value'; type: { kind: 'INPUT_OBJECT'; name: 'NumberOperators'; ofType: null; }; defaultValue: null }, { name: '_and'; type: { kind: 'LIST'; name: never; ofType: { kind: 'NON_NULL'; name: never; ofType: { kind: 'INPUT_OBJECT'; name: 'TaxRateFilterParameter'; ofType: null; }; }; }; defaultValue: null }, { name: '_or'; type: { kind: 'LIST'; name: never; ofType: { kind: 'NON_NULL'; name: never; ofType: { kind: 'INPUT_OBJECT'; name: 'TaxRateFilterParameter'; ofType: null; }; }; }; defaultValue: null }]; };
     'TaxRateList': { kind: 'OBJECT'; name: 'TaxRateList'; fields: { 'items': { name: 'items'; type: { kind: 'NON_NULL'; name: never; ofType: { kind: 'LIST'; name: never; ofType: { kind: 'NON_NULL'; name: never; ofType: { kind: 'OBJECT'; name: 'TaxRate'; ofType: null; }; }; }; } }; 'totalItems': { name: 'totalItems'; type: { kind: 'NON_NULL'; name: never; ofType: { kind: 'SCALAR'; name: 'Int'; ofType: null; }; } }; }; };
     'TaxRateListOptions': { kind: 'INPUT_OBJECT'; name: 'TaxRateListOptions'; isOneOf: false; inputFields: [{ name: 'skip'; type: { kind: 'SCALAR'; name: 'Int'; ofType: null; }; defaultValue: null }, { name: 'take'; type: { kind: 'SCALAR'; name: 'Int'; ofType: null; }; defaultValue: null }, { name: 'sort'; type: { kind: 'INPUT_OBJECT'; name: 'TaxRateSortParameter'; ofType: null; }; defaultValue: null }, { name: 'filter'; type: { kind: 'INPUT_OBJECT'; name: 'TaxRateFilterParameter'; ofType: null; }; defaultValue: null }, { name: 'filterOperator'; type: { kind: 'ENUM'; name: 'LogicalOperator'; ofType: null; }; defaultValue: null }]; };
     'TaxRateSortParameter': { kind: 'INPUT_OBJECT'; name: 'TaxRateSortParameter'; isOneOf: false; inputFields: [{ name: 'id'; type: { kind: 'ENUM'; name: 'SortOrder'; ofType: null; }; defaultValue: null }, { name: 'createdAt'; type: { kind: 'ENUM'; name: 'SortOrder'; ofType: null; }; defaultValue: null }, { name: 'updatedAt'; type: { kind: 'ENUM'; name: 'SortOrder'; ofType: null; }; defaultValue: null }, { name: 'name'; type: { kind: 'ENUM'; name: 'SortOrder'; ofType: null; }; defaultValue: null }, { name: 'value'; type: { kind: 'ENUM'; name: 'SortOrder'; ofType: null; }; defaultValue: null }]; };

package/src/lib/hooks/use-alerts.ts

@@ -0,0 +1,84 @@
+import { AlertSeverity, DashboardAlertDefinition } from '@/vdb/framework/extension-api/types/alerts.js';
+import { useAlertsContext } from '@/vdb/providers/alerts-provider.js';
+import { useMemo } from 'react';
+
+/**
+ * @description
+ * An individual Alert item.
+ *
+ * @docsCategory hooks
+ * @docsPage useAlerts
+ * @since 3.5.0
+ */
+export interface Alert {
+    definition: DashboardAlertDefinition;
+    active: boolean;
+    currentSeverity?: AlertSeverity;
+    lastData: any;
+    dismiss: () => void;
+}
+
+/**
+ * @description
+ * Returns information about all registered Alerts, including how many are
+ * active and at what severity.
+ *
+ * @docsCategory hooks
+ * @docsPage useAlerts
+ * @docsWeight 0
+ * @since 3.5.0
+ */
+export function useAlerts(): { alerts: Alert[]; activeCount: number; highestSeverity: AlertSeverity } {
+    const { alertDefs, rawResults, dismissedAlerts, setDismissedAlerts } = useAlertsContext();
+
+    const alerts = useMemo(() => {
+        return rawResults.map((result, idx) => {
+            const alertDef = alertDefs[idx];
+            const dismissedAt = dismissedAlerts.get(alertDef.id);
+            const isDismissed =
+                dismissedAt !== undefined &&
+                result.dataUpdatedAt !== undefined &&
+                dismissedAt > result.dataUpdatedAt;
+            const active = alertDef.shouldShow(result.data) && !isDismissed;
+            const currentSeverity = getSeverity(alertDef, result.data);
+            return {
+                definition: alertDef,
+                active,
+                lastData: result.data,
+                currentSeverity,
+                dismiss: () => {
+                    setDismissedAlerts(prev => new Map(prev).set(alertDef.id, Date.now()));
+                },
+            };
+        });
+    }, [rawResults, alertDefs, dismissedAlerts]);
+
+    const activeCount = useMemo(() => alerts.filter(alert => alert.active).length, [alerts]);
+    const highestSeverity: AlertSeverity =
+        alerts.length > 0
+            ? alerts.reduce((highest, a) => {
+                  if (highest === 'warning' && a.currentSeverity === 'error') {
+                      return 'error';
+                  }
+                  if (
+                      highest === 'info' &&
+                      (a.currentSeverity === 'warning' || a.currentSeverity === 'error')
+                  ) {
+                      return a.currentSeverity;
+                  }
+                  return highest;
+              }, 'info' as AlertSeverity)
+            : 'info';
+
+    return { alerts, activeCount, highestSeverity };
+}
+
+function getSeverity(alertDef: DashboardAlertDefinition, data: any) {
+    if (typeof alertDef.severity === 'string') {
+        return alertDef.severity;
+    } else if (typeof alertDef.severity === 'function') {
+        return alertDef.severity(data);
+    } else {
+        return 'info';
+    }
+}

package/src/lib/hooks/use-floating-bulk-actions.ts

@@ -32,9 +32,8 @@ export function useFloatingBulkActions({
         }
 
         const updatePosition = () => {
-            // Find the container by searching upwards from the current component
-            const currentElement = document.activeElement || document.body;
-            const container = currentElement.closest(containerSelector) as HTMLElement;
+            // Find the container in the document
+            const container = document.querySelector(containerSelector) as HTMLElement;
             if (!container) return;
 
             const containerRect = container.getBoundingClientRect();

package/src/lib/index.ts

@@ -204,6 +204,8 @@ export * from './framework/document-extension/extend-document.js';
 export * from './framework/document-introspection/add-custom-fields.js';
 export * from './framework/document-introspection/get-document-structure.js';
 export * from './framework/document-introspection/hooks.js';
+export * from './framework/document-introspection/include-only-selected-list-fields.js';
+export * from './framework/document-introspection/testing-utils.js';
 export * from './framework/extension-api/define-dashboard-extension.js';
 export * from './framework/extension-api/display-component-extensions.js';
 export * from './framework/extension-api/extension-api-types.js';
@@ -249,6 +251,7 @@ export * from './framework/layout-engine/page-provider.js';
 export * from './framework/nav-menu/nav-menu-extensions.js';
 export * from './framework/page/detail-page-route-loader.js';
 export * from './framework/page/detail-page.js';
+export * from './framework/page/list-page.stories.js';
 export * from './framework/page/list-page.js';
 export * from './framework/page/page-api.js';
 export * from './framework/page/page-types.js';
@@ -256,14 +259,11 @@ export * from './framework/page/use-detail-page.js';
 export * from './framework/page/use-extended-router.js';
 export * from './framework/registry/global-registry.js';
 export * from './framework/registry/registry-types.js';
-export * from './graphql/api.js';
-export * from './graphql/common-operations.js';
-export * from './graphql/fragments.js';
-export * from './graphql/graphql.js';
-export * from './graphql/settings-store-operations.js';
 export * from './hooks/use-auth.js';
 export * from './hooks/use-channel.js';
 export * from './hooks/use-custom-field-config.js';
+export * from './hooks/use-display-locale.js';
+export * from './hooks/use-dynamic-translations.js';
 export * from './hooks/use-extended-detail-query.js';
 export * from './hooks/use-extended-list-query.js';
 export * from './hooks/use-floating-bulk-actions.js';
@@ -276,6 +276,13 @@ export * from './hooks/use-permissions.js';
 export * from './hooks/use-saved-views.js';
 export * from './hooks/use-server-config.js';
 export * from './hooks/use-theme.js';
+export * from './hooks/use-ui-language-loader.js';
 export * from './hooks/use-user-settings.js';
+export * from './lib/load-i18n-messages.js';
 export * from './lib/trans.js';
 export * from './lib/utils.js';
+export * from './graphql/api.js';
+export * from './graphql/common-operations.js';
+export * from './graphql/fragments.js';
+export * from './graphql/graphql.js';
+export * from './graphql/settings-store-operations.js';

package/src/lib/providers/alerts-provider.tsx

@@ -0,0 +1,60 @@
+import { getAlertRegistry } from '@/vdb/framework/alert/alert-extensions.js';
+import { DashboardAlertDefinition } from '@/vdb/framework/extension-api/types/alerts.js';
+import { useQueries, UseQueryOptions } from '@tanstack/react-query';
+import { createContext, ReactNode, useContext, useEffect, useState } from 'react';
+
+interface AlertsContextValue {
+    alertDefs: DashboardAlertDefinition[];
+    rawResults: any[];
+    dismissedAlerts: Map<string, number>;
+    setDismissedAlerts: React.Dispatch<React.SetStateAction<Map<string, number>>>;
+    enabledQueries: boolean;
+}
+
+const AlertsContext = createContext<AlertsContextValue | undefined>(undefined);
+
+export function AlertsProvider({ children }: { children: ReactNode }) {
+    const initialDelayMs = 5_000;
+    const [alertDefs, setAlertDefs] = useState<DashboardAlertDefinition[]>([]);
+    const [enabledQueries, setEnabledQueries] = useState(false);
+    const [dismissedAlerts, setDismissedAlerts] = useState<Map<string, number>>(new Map());
+
+    useEffect(() => {
+        setAlertDefs(Array.from(getAlertRegistry().values()));
+    }, []);
+
+    useEffect(() => {
+        const timer = setTimeout(() => {
+            setEnabledQueries(true);
+        }, initialDelayMs);
+        return () => clearTimeout(timer);
+    }, []);
+
+    const rawResults = useQueries({
+        queries: alertDefs.map(
+            alert =>
+                ({
+                    queryKey: ['alert', alert.id],
+                    queryFn: () => alert.check(),
+                    refetchInterval: alert.recheckInterval,
+                    enabled: enabledQueries,
+                }) as UseQueryOptions,
+        ),
+    });
+
+    return (
+        <AlertsContext.Provider
+            value={{ alertDefs, rawResults, dismissedAlerts, setDismissedAlerts, enabledQueries }}
+        >
+            {children}
+        </AlertsContext.Provider>
+    );
+}
+
+export function useAlertsContext() {
+    const context = useContext(AlertsContext);
+    if (!context) {
+        throw new Error('useAlertsContext must be used within AlertsProvider');
+    }
+    return context;
+}

package/src/lib/providers/channel-provider.tsx

@@ -16,6 +16,7 @@ const channelFragment = graphql(`
         defaultCurrencyCode
         pricesIncludeTax
         availableLanguageCodes
+        availableCurrencyCodes
     }
 `);
 

package/src/lib/providers/theme-provider.tsx

@@ -29,15 +29,18 @@ export function ThemeProvider({ children, defaultTheme = 'system', ...props }: R
 
         root.classList.remove('light', 'dark');
 
-        if (settings.theme === 'system') {
+        const activeTheme =
+            defaultTheme !== 'system' && settings.theme === 'system' ? defaultTheme : settings.theme;
+
+        if (activeTheme === 'system') {
             const systemTheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
 
             root.classList.add(systemTheme);
             return;
         }
 
-        root.classList.add(settings.theme);
-    }, [settings.theme]);
+        root.classList.add(activeTheme);
+    }, [settings.theme, defaultTheme]);
 
     return (
         <ThemeProviderContext.Provider