@redocly/theme 0.61.0-next.1 → 0.61.0-next.2

package/lib/components/ColorModeSwitcher/ColorModeIcon.d.ts

@@ -1,6 +1,7 @@
 import type { JSX } from 'react';
+import type { ColorMode } from '../../core/types';
 export type ColorModeIconProps = {
-    mode?: 'dark' | 'light' | string;
+    mode?: ColorMode | string;
     className?: string;
 };
 export declare function ColorModeIcon(props: ColorModeIconProps): JSX.Element;

package/lib/components/ColorModeSwitcher/ColorModeIcon.js

@@ -9,14 +9,15 @@ const styled_components_1 = __importDefault(require("styled-components"));
 const ContrastIcon_1 = require("../../icons/ContrastIcon/ContrastIcon");
 const MoonIcon_1 = require("../../icons/MoonIcon/MoonIcon");
 const SunIcon_1 = require("../../icons/SunIcon/SunIcon");
+const constants_1 = require("../../core/constants");
 function ColorModeIcon(props) {
     return (react_1.default.createElement(ColorModeIconComponent, Object.assign({}, props, { "data-component-name": "ColorModeSwitcher/ColorModeIcon" })));
 }
 function Icon({ mode, className }) {
     switch (mode) {
-        case 'dark':
+        case constants_1.DEFAULT_COLOR_MODES.DARK:
             return react_1.default.createElement(SunIcon_1.SunIcon, { "data-testid": "dark" });
-        case 'light':
+        case constants_1.DEFAULT_COLOR_MODES.LIGHT:
             return react_1.default.createElement(MoonIcon_1.MoonIcon, { "data-testid": "light" });
         default:
             return react_1.default.createElement(ContrastIcon_1.ContrastIcon, { "data-testid": "custom", className: className + (mode ? ' ' + mode : '') });

package/lib/components/ColorModeSwitcher/ColorModeSwitcher.js

@@ -9,10 +9,7 @@ const hooks_1 = require("../../core/hooks");
 const ColorModeIcon_1 = require("../../components/ColorModeSwitcher/ColorModeIcon");
 const Button_1 = require("../../components/Button/Button");
 function ColorModeSwitcher({ className }) {
-    const { isSwitcherHidden, initActiveColorMode, switchColorMode, activeColorMode } = (0, hooks_1.useColorSwitcher)();
-    (0, hooks_1.useMount)(() => {
-        initActiveColorMode();
-    });
+    const { isSwitcherHidden, switchColorMode, activeColorMode } = (0, hooks_1.useColorSwitcher)();
     if (isSwitcherHidden) {
         return null;
     }

package/lib/components/Product/utils.d.ts

@@ -0,0 +1 @@
+export declare function getProductClassName(productName: string): string;

package/lib/components/Product/utils.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getProductClassName = getProductClassName;
+function getProductClassName(productName) {
+    return `product-${productName
+        .toLowerCase()
+        .replace(/[^a-z0-9]+/g, '-')
+        .replace(/^-+|-+$/g, '')}`;
+}
+//# sourceMappingURL=utils.js.map

package/lib/core/constants/common.d.ts

@@ -26,3 +26,7 @@ export declare enum MobileMenuType {
     PRODUCT = "PRODUCT",
     PAGE = "PAGE"
 }
+export declare const DEFAULT_COLOR_MODES: {
+    readonly LIGHT: "light";
+    readonly DARK: "dark";
+};

package/lib/core/constants/common.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.MobileMenuType = exports.MenuItemType = exports.DEFAULT_FEEDBACK_TYPE = exports.FEEDBACK_TYPES = exports.ICONS_CDN_URL = exports.CONTENT_ID = exports.DEFAULT_LOCALE_PLACEHOLDER = exports.REDOCLY_TEAMS_RBAC = void 0;
+exports.DEFAULT_COLOR_MODES = exports.MobileMenuType = exports.MenuItemType = exports.DEFAULT_FEEDBACK_TYPE = exports.FEEDBACK_TYPES = exports.ICONS_CDN_URL = exports.CONTENT_ID = exports.DEFAULT_LOCALE_PLACEHOLDER = exports.REDOCLY_TEAMS_RBAC = void 0;
 var config_1 = require("@redocly/config");
 Object.defineProperty(exports, "REDOCLY_TEAMS_RBAC", { enumerable: true, get: function () { return config_1.REDOCLY_TEAMS_RBAC; } });
 exports.DEFAULT_LOCALE_PLACEHOLDER = 'default_locale';
@@ -33,4 +33,8 @@ var MobileMenuType;
     MobileMenuType["PRODUCT"] = "PRODUCT";
     MobileMenuType["PAGE"] = "PAGE";
 })(MobileMenuType || (exports.MobileMenuType = MobileMenuType = {}));
+exports.DEFAULT_COLOR_MODES = {
+    LIGHT: 'light',
+    DARK: 'dark',
+};
 //# sourceMappingURL=common.js.map

package/lib/core/hooks/index.d.ts

@@ -48,3 +48,4 @@ export * from './use-connect-mcp-button';
 export * from './catalog/use-catalog-entity-details';
 export * from './catalog/use-catalog-entity-schema';
 export * from './catalog/use-catalog-table-header-cell-actions';
+export * from './use-store';

package/lib/core/hooks/index.js

@@ -64,4 +64,5 @@ __exportStar(require("./use-connect-mcp-button"), exports);
 __exportStar(require("./catalog/use-catalog-entity-details"), exports);
 __exportStar(require("./catalog/use-catalog-entity-schema"), exports);
 __exportStar(require("./catalog/use-catalog-table-header-cell-actions"), exports);
+__exportStar(require("./use-store"), exports);
 //# sourceMappingURL=index.js.map

package/lib/core/hooks/search/use-recent-searches.js

@@ -2,31 +2,19 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useRecentSearches = void 0;
 const react_1 = require("react");
+const use_store_1 = require("../use-store");
 const js_utils_1 = require("../../utils/js-utils");
 const RECENT_SEARCHES_KEY = 'recentSearches';
 const RECENT_SEARCHES_LIMIT = 5;
-const createRecentSearchesStore = () => {
-    const subscribers = new Set();
-    let cachedSnapshot;
-    const getSnapshot = () => {
-        if (!(0, js_utils_1.isBrowser)())
-            return [];
-        if (cachedSnapshot)
-            return cachedSnapshot;
-        try {
-            const stored = localStorage.getItem(RECENT_SEARCHES_KEY);
-            cachedSnapshot = stored ? JSON.parse(stored) : [];
-            return cachedSnapshot;
-        }
-        catch (e) {
-            cachedSnapshot = [];
-            return cachedSnapshot;
-        }
-    };
-    const updateItems = (value, isAdd) => {
+const recentSearchesStore = (0, use_store_1.createStore)({
+    storageKey: RECENT_SEARCHES_KEY,
+});
+const useRecentSearches = () => {
+    const [items, setItems] = (0, use_store_1.useStore)(recentSearchesStore, []);
+    const updateItems = (0, react_1.useCallback)((value, isAdd) => {
         if (!(0, js_utils_1.isBrowser)())
             return;
-        const currentItems = getSnapshot();
+        const currentItems = [...items];
         const valueIndex = currentItems.indexOf(value);
         if (valueIndex !== -1) {
             currentItems.splice(valueIndex, 1);
@@ -35,29 +23,14 @@ const createRecentSearchesStore = () => {
             currentItems.unshift(value);
         }
         const limitedItems = currentItems.slice(0, RECENT_SEARCHES_LIMIT);
-        localStorage.setItem(RECENT_SEARCHES_KEY, JSON.stringify(limitedItems));
-        cachedSnapshot = limitedItems;
-        subscribers.forEach((callback) => callback());
-    };
-    const subscribe = (callback) => {
-        subscribers.add(callback);
-        return () => subscribers.delete(callback);
-    };
-    return {
-        getSnapshot,
-        subscribe,
-        updateItems,
-    };
-};
-const recentSearchesStore = createRecentSearchesStore();
-const useRecentSearches = () => {
-    const items = (0, react_1.useSyncExternalStore)(recentSearchesStore.subscribe, recentSearchesStore.getSnapshot, () => []);
+        setItems(limitedItems);
+    }, [items, setItems]);
     const addSearchHistoryItem = (0, react_1.useCallback)((value) => {
-        recentSearchesStore.updateItems(value, true);
-    }, []);
+        updateItems(value, true);
+    }, [updateItems]);
     const removeSearchHistoryItem = (0, react_1.useCallback)((value) => {
-        recentSearchesStore.updateItems(value, false);
-    }, []);
+        updateItems(value, false);
+    }, [updateItems]);
     return { items, addSearchHistoryItem, removeSearchHistoryItem };
 };
 exports.useRecentSearches = useRecentSearches;

package/lib/core/hooks/use-color-switcher.d.ts

@@ -1,6 +1,5 @@
 export declare const useColorSwitcher: () => {
     isSwitcherHidden: boolean | undefined;
-    initActiveColorMode: () => void;
     switchColorMode: (mode?: string) => void;
     activeColorMode: string;
 };

package/lib/core/hooks/use-color-switcher.js

@@ -4,36 +4,43 @@ exports.useColorSwitcher = void 0;
 const react_1 = require("react");
 const use_theme_config_1 = require("./use-theme-config");
 const use_theme_hooks_1 = require("./use-theme-hooks");
+const use_store_1 = require("./use-store");
+const constants_1 = require("../constants");
+const js_utils_1 = require("../utils/js-utils");
+const COLOR_MODE_KEY = 'colorSchema';
+const colorModeStore = (0, use_store_1.createStore)({
+    storageKey: COLOR_MODE_KEY,
+});
 const useColorSwitcher = () => {
+    var _a;
     const themeSettings = (0, use_theme_config_1.useThemeConfig)();
     const { useTelemetry } = (0, use_theme_hooks_1.useThemeHooks)();
     const telemetry = useTelemetry();
-    const colorMode = themeSettings.colorMode;
-    const modes = (colorMode === null || colorMode === void 0 ? void 0 : colorMode.modes) || ['light', 'dark'];
-    const defaultColor = modes[0] || 'light';
-    const [activeColorMode, setActiveColorMode] = (0, react_1.useState)(defaultColor);
-    const initActiveColorMode = () => {
-        const activeMode = Array.from(document.documentElement.classList).find((c) => modes.includes(c));
-        setActiveColorMode(activeMode || defaultColor);
-    };
+    const themeColorMode = themeSettings.colorMode;
+    const modes = (0, react_1.useMemo)(() => (themeColorMode === null || themeColorMode === void 0 ? void 0 : themeColorMode.modes) || [constants_1.DEFAULT_COLOR_MODES.LIGHT, constants_1.DEFAULT_COLOR_MODES.DARK], [themeColorMode]);
+    const documentMode = (0, react_1.useMemo)(() => {
+        if (!(0, js_utils_1.isBrowser)())
+            return;
+        return Array.from(document.documentElement.classList).find((c) => modes.includes(c));
+    }, [modes]);
+    const [activeColorMode, setActiveColorMode] = (0, use_store_1.useStore)(colorModeStore, (_a = documentMode !== null && documentMode !== void 0 ? documentMode : modes[0]) !== null && _a !== void 0 ? _a : constants_1.DEFAULT_COLOR_MODES.LIGHT);
     const switchColorMode = (mode) => {
         if (mode && !modes.includes(mode)) {
             return;
         }
         const activeIndex = modes.indexOf(activeColorMode);
-        // If specific mode is provided, use it, otherwise cycle through modes
         const newMode = mode || (activeIndex < modes.length - 1 ? modes[activeIndex + 1] : modes[0]);
-        localStorage.setItem('colorSchema', newMode);
-        document.documentElement.className = `${newMode} notransition`;
+        const root = document.documentElement;
+        modes.forEach((mode) => root.classList.remove(mode));
+        root.classList.add(newMode, 'notransition');
         window.requestAnimationFrame(() => {
-            document.documentElement.classList.remove('notransition');
+            root.classList.remove('notransition');
         });
         telemetry.sendColorModeSwitchedMessage({ from: activeColorMode, to: newMode });
         setActiveColorMode(newMode);
     };
     return {
-        isSwitcherHidden: colorMode === null || colorMode === void 0 ? void 0 : colorMode.hide,
-        initActiveColorMode,
+        isSwitcherHidden: themeColorMode === null || themeColorMode === void 0 ? void 0 : themeColorMode.hide,
         switchColorMode,
         activeColorMode,
     };

package/lib/core/hooks/use-product-picker.js

@@ -2,8 +2,9 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useProductPicker = useProductPicker;
 const react_router_dom_1 = require("react-router-dom");
+const utils_1 = require("../../components/Product/utils");
 const use_theme_hooks_1 = require("./use-theme-hooks");
-const utils_1 = require("../utils");
+const utils_2 = require("../utils");
 function useProductPicker() {
     const { useCurrentProduct, useProducts, useTelemetry, useLoadAndNavigate } = (0, use_theme_hooks_1.useThemeHooks)();
     const currentProduct = useCurrentProduct();
@@ -15,7 +16,16 @@ function useProductPicker() {
         if (!product)
             return;
         telemetry.sendProductPickedMessage({ product: product.slug });
-        loadAndNavigate({ navigate, to: (0, utils_1.withPathPrefix)(product.link) });
+        if (typeof document === 'undefined')
+            return;
+        if (product.name) {
+            const root = document.documentElement;
+            Array.from(root.classList)
+                .filter((c) => c.startsWith('product-'))
+                .forEach((c) => root.classList.remove(c));
+            root.classList.add((0, utils_1.getProductClassName)(product.name));
+        }
+        loadAndNavigate({ navigate, to: (0, utils_2.withPathPrefix)(product.link) });
     }
     return {
         currentProduct,

package/lib/core/hooks/use-store.d.ts

@@ -0,0 +1,17 @@
+type Store<T> = {
+    getValue: (defaultValue: T) => T;
+    setValue: (next: T) => void;
+    subscribe: (callback: () => void) => Unsubscribe;
+};
+type Unsubscribe = () => void;
+type CreateStoreProps<T> = {
+    storageKey: string;
+    storageType?: 'localStorage' | 'sessionStorage';
+    serializer?: {
+        parse: (value: string) => T;
+        serialize: (value: T) => string;
+    };
+};
+export declare function createStore<T>({ storageKey, storageType, serializer, }: CreateStoreProps<T>): Store<T>;
+export declare function useStore<T>(store: Store<T>, defaultValue: T): readonly [T, (next: T) => void];
+export {};

package/lib/core/hooks/use-store.js

@@ -0,0 +1,64 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createStore = createStore;
+exports.useStore = useStore;
+const react_1 = require("react");
+const js_utils_1 = require("../utils/js-utils");
+function createStore({ storageKey, storageType = 'localStorage', serializer = {
+    parse: (value) => JSON.parse(value),
+    serialize: (value) => JSON.stringify(value),
+}, }) {
+    const subscribers = new Set();
+    let cachedValue;
+    const shouldSerialize = (value) => typeof value !== 'string';
+    const getValue = (defaultValue) => {
+        if (!(0, js_utils_1.isBrowser)())
+            return defaultValue;
+        if (cachedValue !== undefined)
+            return cachedValue;
+        const value = window[storageType].getItem(storageKey);
+        if (!value) {
+            cachedValue = defaultValue;
+            return cachedValue;
+        }
+        if (!shouldSerialize(defaultValue)) {
+            cachedValue = value;
+            return cachedValue;
+        }
+        try {
+            cachedValue = JSON.parse(value);
+        }
+        catch (_a) {
+            cachedValue = defaultValue;
+        }
+        return cachedValue;
+    };
+    const setValue = (next) => {
+        if (!(0, js_utils_1.isBrowser)())
+            return;
+        try {
+            window[storageType].setItem(storageKey, shouldSerialize(next) ? serializer.serialize(next) : next);
+            cachedValue = next;
+            subscribers.forEach((callback) => callback());
+        }
+        catch (_a) {
+            return;
+        }
+    };
+    const subscribe = (callback) => {
+        subscribers.add(callback);
+        return () => {
+            subscribers.delete(callback);
+        };
+    };
+    return {
+        getValue,
+        setValue,
+        subscribe,
+    };
+}
+function useStore(store, defaultValue) {
+    const value = (0, react_1.useSyncExternalStore)(store.subscribe, () => store.getValue(defaultValue), () => defaultValue);
+    return [value, store.setValue];
+}
+//# sourceMappingURL=use-store.js.map

package/lib/core/types/common.d.ts

@@ -1 +1,3 @@
+import { DEFAULT_COLOR_MODES } from '../constants';
 export type Plural<T extends string> = `${T}s`;
+export type ColorMode = (typeof DEFAULT_COLOR_MODES)[keyof typeof DEFAULT_COLOR_MODES];

package/lib/core/utils/load-and-navigate.js

@@ -10,12 +10,13 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.loadAndNavigate = loadAndNavigate;
+const get_navbar_element_1 = require("./get-navbar-element");
 const with_load_progress_1 = require("./with-load-progress");
 let lastNavigatedPath;
 // this is copy from portal/src/client/app/utils/loadAndNavigate.ts, for case when we need to run Redoc without Realm
 function loadAndNavigate(_a) {
     return __awaiter(this, arguments, void 0, function* ({ navigate, to, origin = 'browser', options, }) {
-        var _b;
+        var _b, _c;
         lastNavigatedPath = to;
         const { pathname, hash, search } = new URL(to, window.location.origin + window.location.pathname);
         // use window-shared loader instead of importing to prevent circular import issue
@@ -38,7 +39,11 @@ function loadAndNavigate(_a) {
             if (hash) {
                 const el = document.getElementById(hash.slice(1));
                 if (el) {
-                    el.scrollIntoView();
+                    const navbar = (0, get_navbar_element_1.getNavbarElement)();
+                    const navbarHeight = (_c = navbar === null || navbar === void 0 ? void 0 : navbar.offsetHeight) !== null && _c !== void 0 ? _c : 0;
+                    const elementTop = el.getBoundingClientRect().top + window.scrollY;
+                    const scrollPosition = elementTop - navbarHeight;
+                    window.scrollTo({ top: scrollPosition, behavior: 'smooth' });
                 }
             }
             else {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redocly/theme",
-  "version": "0.61.0-next.1",
+  "version": "0.61.0-next.2",
   "description": "Shared UI components lib",
   "keywords": [
     "theme",
@@ -81,7 +81,7 @@
     "openapi-sampler": "1.6.2",
     "react-calendar": "5.1.0",
     "react-date-picker": "11.0.0",
-    "@redocly/config": "0.41.0"
+    "@redocly/config": "0.41.1"
   },
   "scripts": {
     "watch": "tsc -p tsconfig.build.json && (concurrently \"tsc -w -p tsconfig.build.json\" \"tsc-alias -w -p tsconfig.build.json\")",

package/src/components/ColorModeSwitcher/ColorModeIcon.tsx

@@ -2,13 +2,15 @@ import React from 'react';
 import styled from 'styled-components';
 
 import type { JSX } from 'react';
+import type { ColorMode } from '@redocly/theme/core/types';
 
 import { ContrastIcon } from '@redocly/theme/icons/ContrastIcon/ContrastIcon';
 import { MoonIcon } from '@redocly/theme/icons/MoonIcon/MoonIcon';
 import { SunIcon } from '@redocly/theme/icons/SunIcon/SunIcon';
+import { DEFAULT_COLOR_MODES } from '@redocly/theme/core/constants';
 
 export type ColorModeIconProps = {
-  mode?: 'dark' | 'light' | string;
+  mode?: ColorMode | string;
   className?: string;
 };
 
@@ -20,9 +22,9 @@ export function ColorModeIcon(props: ColorModeIconProps): JSX.Element {
 
 function Icon({ mode, className }: ColorModeIconProps) {
   switch (mode) {
-    case 'dark':
+    case DEFAULT_COLOR_MODES.DARK:
       return <SunIcon data-testid="dark" />;
-    case 'light':
+    case DEFAULT_COLOR_MODES.LIGHT:
       return <MoonIcon data-testid="light" />;
     default:
       return <ContrastIcon data-testid="custom" className={className + (mode ? ' ' + mode : '')} />;

package/src/components/ColorModeSwitcher/ColorModeSwitcher.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 
 import type { JSX } from 'react';
 
-import { useMount, useColorSwitcher } from '@redocly/theme/core/hooks';
+import { useColorSwitcher } from '@redocly/theme/core/hooks';
 import { ColorModeIcon } from '@redocly/theme/components/ColorModeSwitcher/ColorModeIcon';
 import { Button } from '@redocly/theme/components/Button/Button';
 
@@ -11,12 +11,7 @@ export type ColorModeSwitcherProps = {
 };
 
 export function ColorModeSwitcher({ className }: ColorModeSwitcherProps): JSX.Element | null {
-  const { isSwitcherHidden, initActiveColorMode, switchColorMode, activeColorMode } =
-    useColorSwitcher();
-
-  useMount(() => {
-    initActiveColorMode();
-  });
+  const { isSwitcherHidden, switchColorMode, activeColorMode } = useColorSwitcher();
 
   if (isSwitcherHidden) {
     return null;

package/src/components/Product/utils.ts

@@ -0,0 +1,6 @@
+export function getProductClassName(productName: string): string {
+  return `product-${productName
+    .toLowerCase()
+    .replace(/[^a-z0-9]+/g, '-')
+    .replace(/^-+|-+$/g, '')}`;
+}

package/src/core/constants/common.ts

@@ -30,3 +30,8 @@ export enum MobileMenuType {
   PRODUCT = 'PRODUCT',
   PAGE = 'PAGE',
 }
+
+export const DEFAULT_COLOR_MODES = {
+  LIGHT: 'light',
+  DARK: 'dark',
+} as const;

package/src/core/hooks/index.ts

@@ -48,3 +48,4 @@ export * from './use-connect-mcp-button';
 export * from './catalog/use-catalog-entity-details';
 export * from './catalog/use-catalog-entity-schema';
 export * from './catalog/use-catalog-table-header-cell-actions';
+export * from './use-store';

package/src/core/hooks/search/use-recent-searches.ts

@@ -1,83 +1,56 @@
-import { useCallback, useSyncExternalStore } from 'react';
+import { useCallback } from 'react';
 
+import { createStore, useStore } from '../use-store';
 import { isBrowser } from '../../utils/js-utils';
 
 const RECENT_SEARCHES_KEY = 'recentSearches';
 const RECENT_SEARCHES_LIMIT = 5;
 
-const createRecentSearchesStore = () => {
-  const subscribers = new Set<() => void>();
-  let cachedSnapshot: string[];
-
-  const getSnapshot = (): string[] => {
-    if (!isBrowser()) return [];
-
-    if (cachedSnapshot) return cachedSnapshot;
-
-    try {
-      const stored = localStorage.getItem(RECENT_SEARCHES_KEY);
-      cachedSnapshot = stored ? JSON.parse(stored) : [];
-      return cachedSnapshot;
-    } catch (e) {
-      cachedSnapshot = [];
-      return cachedSnapshot;
-    }
-  };
-
-  const updateItems = (value: string, isAdd: boolean) => {
-    if (!isBrowser()) return;
-
-    const currentItems = getSnapshot();
-    const valueIndex = currentItems.indexOf(value);
-
-    if (valueIndex !== -1) {
-      currentItems.splice(valueIndex, 1);
-    }
-
-    if (isAdd) {
-      currentItems.unshift(value);
-    }
-
-    const limitedItems = currentItems.slice(0, RECENT_SEARCHES_LIMIT);
-
-    localStorage.setItem(RECENT_SEARCHES_KEY, JSON.stringify(limitedItems));
-    cachedSnapshot = limitedItems;
-
-    subscribers.forEach((callback) => callback());
-  };
-
-  const subscribe = (callback: () => void) => {
-    subscribers.add(callback);
-    return () => subscribers.delete(callback);
-  };
-
-  return {
-    getSnapshot,
-    subscribe,
-    updateItems,
-  };
-};
-
-const recentSearchesStore = createRecentSearchesStore();
+const recentSearchesStore = createStore<string[]>({
+  storageKey: RECENT_SEARCHES_KEY,
+});
 
 export const useRecentSearches = (): {
   items: string[];
   addSearchHistoryItem: (value: string) => void;
   removeSearchHistoryItem: (value: string) => void;
 } => {
-  const items = useSyncExternalStore(
-    recentSearchesStore.subscribe,
-    recentSearchesStore.getSnapshot,
-    () => [],
+  const [items, setItems] = useStore<string[]>(recentSearchesStore, []);
+
+  const updateItems = useCallback(
+    (value: string, isAdd: boolean) => {
+      if (!isBrowser()) return;
+
+      const currentItems = [...items];
+      const valueIndex = currentItems.indexOf(value);
+      if (valueIndex !== -1) {
+        currentItems.splice(valueIndex, 1);
+      }
+
+      if (isAdd) {
+        currentItems.unshift(value);
+      }
+
+      const limitedItems = currentItems.slice(0, RECENT_SEARCHES_LIMIT);
+
+      setItems(limitedItems);
+    },
+    [items, setItems],
   );
 
-  const addSearchHistoryItem = useCallback((value: string) => {
-    recentSearchesStore.updateItems(value, true);
-  }, []);
+  const addSearchHistoryItem = useCallback(
+    (value: string) => {
+      updateItems(value, true);
+    },
+    [updateItems],
+  );
 
-  const removeSearchHistoryItem = useCallback((value: string) => {
-    recentSearchesStore.updateItems(value, false);
-  }, []);
+  const removeSearchHistoryItem = useCallback(
+    (value: string) => {
+      updateItems(value, false);
+    },
+    [updateItems],
+  );
 
   return { items, addSearchHistoryItem, removeSearchHistoryItem };
 };

package/src/core/hooks/use-color-switcher.ts

@@ -1,23 +1,35 @@
-import { useState } from 'react';
+import { useMemo } from 'react';
 
 import { useThemeConfig } from './use-theme-config';
 import { useThemeHooks } from './use-theme-hooks';
+import { createStore, useStore } from './use-store';
+import { DEFAULT_COLOR_MODES } from '../constants';
+import { isBrowser } from '../utils/js-utils';
+
+const COLOR_MODE_KEY = 'colorSchema';
+const colorModeStore = createStore<string>({
+  storageKey: COLOR_MODE_KEY,
+});
 
 export const useColorSwitcher = () => {
   const themeSettings = useThemeConfig();
   const { useTelemetry } = useThemeHooks();
   const telemetry = useTelemetry();
-  const colorMode = themeSettings.colorMode;
-  const modes = colorMode?.modes || ['light', 'dark'];
-  const defaultColor = modes[0] || 'light';
-  const [activeColorMode, setActiveColorMode] = useState(defaultColor);
-
-  const initActiveColorMode = (): void => {
-    const activeMode = Array.from(document.documentElement.classList).find((c) =>
-      modes.includes(c),
-    );
-    setActiveColorMode(activeMode || defaultColor);
-  };
+  const themeColorMode = themeSettings.colorMode;
+
+  const modes = useMemo(
+    () => themeColorMode?.modes || [DEFAULT_COLOR_MODES.LIGHT, DEFAULT_COLOR_MODES.DARK],
+    [themeColorMode],
+  );
+  const documentMode = useMemo(() => {
+    if (!isBrowser()) return;
+    return Array.from(document.documentElement.classList).find((c) => modes.includes(c));
+  }, [modes]);
+
+  const [activeColorMode, setActiveColorMode] = useStore<string>(
+    colorModeStore,
+    documentMode ?? modes[0] ?? DEFAULT_COLOR_MODES.LIGHT,
+  );
 
   const switchColorMode = (mode?: string): void => {
     if (mode && !modes.includes(mode)) {
@@ -25,23 +37,22 @@ export const useColorSwitcher = () => {
     }
 
     const activeIndex = modes.indexOf(activeColorMode);
-    // If specific mode is provided, use it, otherwise cycle through modes
     const newMode = mode || (activeIndex < modes.length - 1 ? modes[activeIndex + 1] : modes[0]);
 
-    localStorage.setItem('colorSchema', newMode);
-    document.documentElement.className = `${newMode} notransition`;
+    const root = document.documentElement;
+
+    modes.forEach((mode) => root.classList.remove(mode));
+    root.classList.add(newMode, 'notransition');
 
     window.requestAnimationFrame(() => {
-      document.documentElement.classList.remove('notransition');
+      root.classList.remove('notransition');
     });
     telemetry.sendColorModeSwitchedMessage({ from: activeColorMode, to: newMode });
-
     setActiveColorMode(newMode);
   };
 
   return {
-    isSwitcherHidden: colorMode?.hide,
-    initActiveColorMode,
+    isSwitcherHidden: themeColorMode?.hide,
     switchColorMode,
     activeColorMode,
   };

package/src/core/hooks/use-product-picker.ts

@@ -1,5 +1,7 @@
 import { useNavigate } from 'react-router-dom';
 
+import { getProductClassName } from '@redocly/theme/components/Product/utils';
+
 import { useThemeHooks } from './use-theme-hooks';
 import { withPathPrefix } from '../utils';
 
@@ -13,6 +15,16 @@ export function useProductPicker() {
   function setProduct(product: typeof currentProduct) {
     if (!product) return;
     telemetry.sendProductPickedMessage({ product: product.slug });
+    if (typeof document === 'undefined') return;
+
+    if (product.name) {
+      const root = document.documentElement;
+      Array.from(root.classList)
+        .filter((c) => c.startsWith('product-'))
+        .forEach((c) => root.classList.remove(c));
+      root.classList.add(getProductClassName(product.name));
+    }
+
     loadAndNavigate({ navigate, to: withPathPrefix(product.link) });
   }
   return {

package/src/core/hooks/use-store.ts

@@ -0,0 +1,95 @@
+import { useSyncExternalStore } from 'react';
+
+import { isBrowser } from '../utils/js-utils';
+
+type Store<T> = {
+  getValue: (defaultValue: T) => T;
+  setValue: (next: T) => void;
+  subscribe: (callback: () => void) => Unsubscribe;
+};
+
+type Unsubscribe = () => void;
+
+type CreateStoreProps<T> = {
+  storageKey: string;
+  storageType?: 'localStorage' | 'sessionStorage';
+  serializer?: {
+    parse: (value: string) => T;
+    serialize: (value: T) => string;
+  };
+};
+
+export function createStore<T>({
+  storageKey,
+  storageType = 'localStorage',
+  serializer = {
+    parse: (value: string) => JSON.parse(value) as T,
+    serialize: (value: T) => JSON.stringify(value),
+  },
+}: CreateStoreProps<T>): Store<T> {
+  const subscribers = new Set<() => void>();
+  let cachedValue: T;
+
+  const shouldSerialize = (value: unknown) => typeof value !== 'string';
+
+  const getValue = (defaultValue: T): T => {
+    if (!isBrowser()) return defaultValue;
+    if (cachedValue !== undefined) return cachedValue;
+
+    const value = window[storageType].getItem(storageKey);
+    if (!value) {
+      cachedValue = defaultValue;
+      return cachedValue;
+    }
+
+    if (!shouldSerialize(defaultValue)) {
+      cachedValue = value as T;
+      return cachedValue;
+    }
+
+    try {
+      cachedValue = JSON.parse(value) as T;
+    } catch {
+      cachedValue = defaultValue;
+    }
+
+    return cachedValue;
+  };
+
+  const setValue = (next: T): void => {
+    if (!isBrowser()) return;
+    try {
+      window[storageType].setItem(
+        storageKey,
+        shouldSerialize(next) ? serializer.serialize(next) : (next as string),
+      );
+      cachedValue = next;
+      subscribers.forEach((callback) => callback());
+    } catch {
+      return;
+    }
+  };
+
+  const subscribe = (callback: () => void): Unsubscribe => {
+    subscribers.add(callback);
+    return () => {
+      subscribers.delete(callback);
+    };
+  };
+
+  return {
+    getValue,
+    setValue,
+    subscribe,
+  };
+}
+
+export function useStore<T>(store: Store<T>, defaultValue: T) {
+  const value = useSyncExternalStore(
+    store.subscribe,
+    () => store.getValue(defaultValue),
+    () => defaultValue,
+  );
+
+  return [value, store.setValue] as const;
+}

package/src/core/types/common.ts

@@ -1 +1,5 @@
+import { DEFAULT_COLOR_MODES } from '../constants';
+
 export type Plural<T extends string> = `${T}s`;
+
+export type ColorMode = (typeof DEFAULT_COLOR_MODES)[keyof typeof DEFAULT_COLOR_MODES];

package/src/core/utils/load-and-navigate.ts

@@ -1,5 +1,6 @@
 import type { NavigateFunction, NavigateOptions } from 'react-router-dom';
 
+import { getNavbarElement } from './get-navbar-element';
 import { withLoadProgress } from './with-load-progress';
 
 export type HistoryOrigin = 'pm' | 'browser';
@@ -45,7 +46,11 @@ export async function loadAndNavigate({
     if (hash) {
       const el = document.getElementById(hash.slice(1));
       if (el) {
-        el.scrollIntoView();
+        const navbar = getNavbarElement();
+        const navbarHeight = navbar?.offsetHeight ?? 0;
+        const elementTop = el.getBoundingClientRect().top + window.scrollY;
+        const scrollPosition = elementTop - navbarHeight;
+        window.scrollTo({ top: scrollPosition, behavior: 'smooth' });
       }
     } else {
       window.scrollTo(0, 0);