datalens-tech · DaryaLari · Nov 11, 2025
diff --git a/src/shared/constants/widgets.ts b/src/shared/constants/widgets.ts
@@ -1,19 +1,14 @@
-import {type ValueOf} from '../types';
+import type {ColorSettings, ValueOf} from '../types';
 
 export const CustomPaletteBgColors = {
     LIKE_CHART: 'like-chart-bg',
     NONE: 'transparent',
 } as const;
 
 export const LIKE_CHART_COLOR_TOKEN = 'var(--g-color-base-float)';
+export const TRANSPARENT_COLOR_HEX = '#00000000';
 export const BASE_GREY_BACKGROUND_COLOR = 'var(--g-color-base-generic)';
 
-export type CustomPaletteBgColor = ValueOf<typeof CustomPaletteBgColors>;
-
-export function isCustomPaletteBgColor(color: string): color is CustomPaletteBgColor {
-    return Object.values(CustomPaletteBgColors).includes(color as CustomPaletteBgColor);
-}
-
 export const WIDGET_BG_HEAVY_COLORS_PRESET = [
     'var(--g-color-base-info-heavy)',
     'var(--g-color-base-positive-heavy)',
@@ -104,6 +99,13 @@ export const CONTROLS_PLACEMENT_MODE = {
 export function getDefaultWidgetBackgroundColor(
     isCommonChartDashSettingsEnabled?: boolean,
     defaultColor: string = CustomPaletteBgColors.NONE,
-) {
-    return isCommonChartDashSettingsEnabled ? '' : defaultColor;
+    enableMultiThemeColors = true,
+): ColorSettings['color'] {
+    return isCommonChartDashSettingsEnabled
+        ? getColorObject(undefined, enableMultiThemeColors)
+        : defaultColor;
+}
+
+export function getColorObject(color: string | undefined, enableMultiThemeColors: boolean) {
+    return enableMultiThemeColors ? {light: color, dark: color} : {common: color};
 }
diff --git a/src/shared/modules/dash-scheme-converter.ts b/src/shared/modules/dash-scheme-converter.ts
@@ -3,13 +3,23 @@ import omitBy from 'lodash/omitBy';
 
 import {DASH_CURRENT_SCHEME_VERSION} from '../constants/dash';
 import {DUPLICATED_WIDGET_BG_COLORS_PRESET} from '../constants/widgets';
-import type {BackgroundSettings, DashData, DashTab, DashTabItem} from '../types';
-import {DashTabConnectionKind, DashTabItemControlElementType, DashTabItemType} from '../types';
+import type {ColorSettings, DashData, DashTab, DashTabItem} from '../types';
+import {
+    DashTabConnectionKind,
+    DashTabItemControlElementType,
+    DashTabItemType,
+    isOldBackgroundSettings,
+} from '../types';
 
 const DATE_FORMAT_V7 = 'YYYY-MM-DD';
 
-function getActualBackground(background?: BackgroundSettings): BackgroundSettings | undefined {
-    if (background && DUPLICATED_WIDGET_BG_COLORS_PRESET.includes(background.color)) {
+function getActualBackground(background?: ColorSettings): ColorSettings | undefined {
+    if (
+        background &&
+        isOldBackgroundSettings(background) &&
+        background.color &&
+        DUPLICATED_WIDGET_BG_COLORS_PRESET.includes(background.color)
+    ) {
         return {
             color: background.color.replace('medium', 'light-hover'),
         };
@@ -22,20 +32,12 @@ export function migrateBgColor(item: DashTabItem): DashTabItem {
     const newItem: DashTabItem = Object.assign({...item}, {data: Object.assign({}, item.data)});
 
     if ('background' in newItem.data) {
-        if (
-            newItem.data.background &&
-            DUPLICATED_WIDGET_BG_COLORS_PRESET.includes(newItem.data.background.color)
-        ) {
-            newItem.data.background = getActualBackground(newItem.data.background);
-
-            return newItem;
-        }
+        newItem.data.background = getActualBackground(newItem.data.background);
+        return newItem;
     }
     if (newItem.type === DashTabItemType.Widget) {
-        newItem.data.tabs = newItem.data.tabs.map((tab) => ({
-            ...tab,
-            background: getActualBackground(tab.background),
-        }));
+        newItem.data.background = getActualBackground(newItem.data.tabs?.[0]?.background);
+        newItem.data.tabs.forEach((tab) => delete tab.background);
 
         return newItem;
     }

diff --git a/src/shared/types/dash.ts b/src/shared/types/dash.ts
@@ -1,4 +1,5 @@
 import type {ItemDropProps} from '@gravity-ui/dashkit';
+import type {ThemeType} from '@gravity-ui/uikit';
 
 import type {Operations} from '../modules';
 
@@ -89,6 +90,7 @@ export type DashSettings = {
     loadOnlyVisibleCharts?: boolean;
     margins?: [number, number];
     enableAssistant?: boolean;
+    background?: ActualColorSettings;
 };
 
 export interface DashData {
@@ -138,12 +140,19 @@ export type DashTabItem =
     | DashTabItemGroupControl
     | DashTabItemImage;
 
-export type BackgroundSettings = {
+export type OldBackgroundSettings = {
     enabled?: boolean;
-    color: string;
+    color?: string;
 };
+// TODO: remove
+export type BackgroundSettings = OldBackgroundSettings;
 
-export function isBackgroundSettings(value: unknown): value is BackgroundSettings {
+export type ColorType = ThemeType | 'common';
+export type ColorByTheme = Partial<Record<ColorType, string | undefined>>;
+export type ActualColorSettings = {color?: ColorByTheme; enabled?: undefined};
+export type ColorSettings = OldBackgroundSettings | ActualColorSettings;
+
+export function isOldBackgroundSettings(value: unknown): value is OldBackgroundSettings {
     return (
         typeof value === 'object' &&
         value !== null &&
@@ -155,6 +164,35 @@ export function isBackgroundSettings(value: unknown): value is BackgroundSetting
     );
 }
 
+export function isActualColorSettings(value: unknown): value is ActualColorSettings {
+    return (
+        typeof value === 'object' &&
+        value !== null &&
+        'color' in value &&
+        isColorByTheme(value.color)
+    );
+}
+
+export function isBackgroundSettings(value: unknown): value is ColorSettings {
+    return isOldBackgroundSettings(value) || isActualColorSettings(value);
+}
+
+export function isColorByTheme(value: unknown): value is ColorByTheme {
+    return (
+        typeof value === 'object' &&
+        value !== null &&
+        Object.entries(value).every(
+            ([key, val]) =>
+                ['light', 'dark', 'common'].includes(key) &&
+                ['string', 'undefined'].includes(typeof val),
+        )
+    );
+}
+
+export function isColorByThemeOrUndefined(value: unknown): value is ColorByTheme | undefined {
+    return isColorByTheme(value) || value === undefined;
+}
+
 export interface DashTabItemBase {
     id: string;
     namespace: string;
@@ -169,7 +207,7 @@ export interface DashTabItemText extends DashTabItemBase {
     data: {
         text: string;
         autoHeight?: boolean;
-        background?: BackgroundSettings;
+        background?: ColorSettings;
     };
 }
 
@@ -187,15 +225,15 @@ export interface DashTabItemTitle extends DashTabItemBase {
         size: DashTitleSize;
         showInTOC: boolean;
         autoHeight?: boolean;
-        background?: BackgroundSettings;
-        textColor?: string;
+        background?: ColorSettings;
+        textColor?: string | ColorByTheme;
         hint?: HintSettings;
     };
 }
 
 export interface DashTabItemWidget extends DashTabItemBase {
     type: DashTabItemType.Widget;
-    data: {hideTitle: boolean; tabs: DashTabItemWidgetTab[]};
+    data: {hideTitle: boolean; tabs: DashTabItemWidgetTab[]; background?: ColorSettings};
 }
 
 export interface DashTabItemWidgetTab {
@@ -210,7 +248,7 @@ export interface DashTabItemWidgetTab {
     params: StringParams;
     autoHeight?: boolean;
     enableActionParams?: boolean;
-    background?: BackgroundSettings;
+    background?: ColorSettings;
 }
 
 export interface DashTabItemControl extends DashTabItemBase {
@@ -386,7 +424,7 @@ export interface DashTabItemImage extends DashTabItemBase {
     data: {
         src: string;
         alt?: string;
-        background?: BackgroundSettings;
+        background?: ColorSettings;
         preserveAspectRatio?: boolean;
     };
 }
diff --git a/src/ui/components/DashKit/DashKit.ts b/src/ui/components/DashKit/DashKit.ts
@@ -1,5 +1,6 @@
 import type {Plugin, PluginDefaultLayout} from '@gravity-ui/dashkit';
 import {DashKit} from '@gravity-ui/dashkit';
+import type {ColorSettings} from 'shared';
 import {registry} from 'ui/registry';
 
 import {DL} from '../../constants';
@@ -34,21 +35,32 @@ const wrapPlugins = (plugins: Plugin[], pluginDefaultsGetter?: typeof currentDef
     });
 };
 
+export interface CommonPluginSettings {
+    background?: ColorSettings;
+}
+
 export const getConfiguredDashKit = (
     pluginDefaultsGetter: typeof currentDefaultsGetter = null,
-    options?: {disableHashNavigation?: boolean; disableTitleHints?: boolean},
+    options?: {
+        disableHashNavigation?: boolean;
+        disableTitleHints?: boolean;
+        settings: CommonPluginSettings;
+    },
 ) => {
     if (currentDefaultsGetter !== pluginDefaultsGetter || !isConfigured) {
         const titleSettings = {
+            ...options?.settings,
             hideAnchor: options?.disableHashNavigation,
             hideHint: options?.disableTitleHints,
         };
 
         const textSettings = {
+            ...options?.settings,
             apiHandler: MarkdownProvider.getMarkdown,
         };
 
         const controlSettings = {
+            ...options?.settings,
             getDistincts: getDistinctsAction(),
         };
 
@@ -58,8 +70,8 @@ export const getConfiguredDashKit = (
                 textPlugin.setSettings(textSettings),
                 pluginControl.setSettings(controlSettings),
                 pluginGroupControl.setSettings(controlSettings),
-                widgetPlugin,
-                pluginImage,
+                widgetPlugin.setSettings(options?.settings ?? {}),
+                pluginImage.setSettings(options?.settings ?? {}),
             ],
             pluginDefaultsGetter,
         );

diff --git a/src/ui/components/DashKit/plugins/Image/Image.tsx b/src/ui/components/DashKit/plugins/Image/Image.tsx
@@ -2,12 +2,13 @@ import React from 'react';
 
 import type {Plugin, PluginWidgetProps} from '@gravity-ui/dashkit';
 import block from 'bem-cn-lite';
-import type {DashTabItemImage} from 'shared';
-import {DashTabItemType} from 'shared';
+import type {ColorSettings, DashTabItemImage} from 'shared';
+import {CustomPaletteBgColors, DashTabItemType} from 'shared';
 
 import {useBeforeLoad} from '../../../../hooks/useBeforeLoad';
+import type {CommonPluginSettings} from '../../DashKit';
 import {useWidgetContext} from '../../context/WidgetContext';
-import {getPreparedWrapSettings} from '../../utils';
+import {usePreparedWrapSettings} from '../../utils';
 import {RendererWrapper} from '../RendererWrapper/RendererWrapper';
 
 import './Image.scss';
@@ -18,7 +19,24 @@ type Props = PluginWidgetProps & {
     data: DashTabItemImage['data'] & PluginWidgetProps['data'];
 };
 
-function PluginImage(props: Props, _ref?: React.LegacyRef<HTMLDivElement>) {
+type PluginImageObjectSettings = CommonPluginSettings;
+
+type PluginImage = Plugin<Props> & {
+    setSettings: (settings: PluginImageObjectSettings) => PluginImage;
+    background?: ColorSettings;
+};
+
+export const pluginImage: PluginImage = {
+    type: DashTabItemType.Image,
+    defaultLayout: {w: 12, h: 12, minH: 1, minW: 1},
+    setSettings: (settings: PluginImageObjectSettings) => {
+        pluginImage.background = settings.background;
+        return pluginImage;
+    },
+    renderer: PluginImageRenderer,
+};
+
+function PluginImageRenderer(props: Props, _ref?: React.LegacyRef<HTMLDivElement>) {
     const {
         id,
         data: {alt, background, src, preserveAspectRatio},
@@ -39,9 +57,11 @@ function PluginImage(props: Props, _ref?: React.LegacyRef<HTMLDivElement>) {
         w: null,
     };
 
-    const {classMod, style} = React.useMemo(() => {
-        return getPreparedWrapSettings(background);
-    }, [background]);
+    const {style} = usePreparedWrapSettings({
+        widgetBackground: background,
+        globalBackground: pluginImage.background,
+        defaultOldColor: CustomPaletteBgColors.NONE,
+    });
 
     React.useEffect(() => {
         handleUpdate?.();
@@ -56,13 +76,7 @@ function PluginImage(props: Props, _ref?: React.LegacyRef<HTMLDivElement>) {
     ]);
 
     return (
-        <RendererWrapper
-            id={id}
-            type={DashTabItemType.Image}
-            nodeRef={rootNodeRef}
-            classMod={classMod}
-            style={style}
-        >
+        <RendererWrapper id={id} type={DashTabItemType.Image} nodeRef={rootNodeRef} style={style}>
             <img
                 className={b({'preserve-aspect-ratio': preserveAspectRatio})}
                 alt={alt}
@@ -71,9 +85,3 @@ function PluginImage(props: Props, _ref?: React.LegacyRef<HTMLDivElement>) {
         </RendererWrapper>
     );
 }
-
-export const pluginImage: Plugin<Props> = {
-    type: DashTabItemType.Image,
-    defaultLayout: {w: 12, h: 12, minH: 1, minW: 1},
-    renderer: PluginImage,
-};
diff --git a/src/ui/components/DashKit/plugins/RendererWrapper/RendererWrapper.scss b/src/ui/components/DashKit/plugins/RendererWrapper/RendererWrapper.scss
@@ -3,6 +3,7 @@
 .dashkit-plugin-container {
     &__wrapper {
         height: 100%;
+        background-color: var(--dl-color-widget-background);
 
         &_widget {
             width: 100%;