fascano/web-menu-react-version-
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update theme variables

Browse Source
This commit is contained in:
Mohammed Al-yaseen
2025-11-10 08:49:14 +03:00
parent 60a20b4583
commit 96fc04e71e
4 changed files with 235 additions and 213 deletions
Download Patch File Download Diff File Expand all files Collapse all files

347
src/ThemeConstants.ts
View File

@@ -17,7 +17,7 @@ export const errorColor = "#DC3545";
export const errorColorDark = "#d9363e";
export const DisabledColor = "#424242";
export const WHITE_COLOR = {
export const lightColors = {
50: "#e0f1ff",
100: "#b0d2ff",
200: "#7fb0ff",
@@ -30,19 +30,20 @@ export const WHITE_COLOR = {
900: "#001620",
borderColor: "#E7EAF3B2",
primaryColor: "#FFD633",
primaryColor2: "#09237D",
secondaryColor: "#09237D",
whiteColor: "#FFF",
blackColor: "#000000e0",
sidebarBg: "#FFFFFF",
tableBg: "#FFFFFF",
cardBg: "#FFFFFF",
headerBg: "#FFFFFF",
hoverBg: "#F1F5F9",
activeBg: "#E2E8F0",
bgColor: "#f7f7f7",
secondaryBgColor: "#ffffff",
fgColor: "#181818",
secondaryFgColor: "#0a0a0a",
};
// Enhanced Dark theme colors with better contrast and modern aesthetics
export const DARK_COLOR = {
export const darkColors = {
// Background colors - from darkest to lightest
50: "#0a0a0a", // Deepest background
100: "#141414", // Main background
@@ -61,7 +62,7 @@ export const DARK_COLOR = {
primaryColor: "#FFD633",
primaryColorHover: "#FFD633",
primaryColorActive: "#E6B800",
primaryColor2: "#FFD633",
secondaryColor: "#FFD633",
// Background colors
whiteColor: "#0a0a0a", // Main background
@@ -89,15 +90,17 @@ export const DARK_COLOR = {
overlayBg: "rgba(0, 0, 0, 0.45)",
maskBg: "rgba(0, 0, 0, 0.65)",
bgColor: "#181818",
fgColor: "#f7f7f7",
secondaryBgColor: "#0a0a0a",
secondaryFgColor: "#ffffff",
// Shadow colors
shadowLight: "0 1px 2px 0 rgba(0, 0, 0, 0.3)",
shadowMedium: "0 4px 6px -1px rgba(0, 0, 0, 0.4)",
shadowHeavy: "0 10px 15px -3px rgba(0, 0, 0, 0.5)",
};
export const componentBackground = "#f7f7f7";
export const darkComponentBackground = "#181818";
export const SharedThemeVars = {
borderRadius: 8,
borderRadiusLG: 8,
@@ -110,9 +113,9 @@ export const SharedThemeVars = {
export const LightThemeVars = {
...SharedThemeVars,
white: componentBackground,
colorBgElevated: componentBackground,
colorBgLayout: componentBackground,
white: lightColors.bgColor,
colorBgElevated: lightColors.bgColor,
colorBgLayout: lightColors.bgColor,
// ------ Pro colors
proSiderColor: "#1E5083",
@@ -121,19 +124,19 @@ export const LightThemeVars = {
export const DarkThemeVars = {
...SharedThemeVars,
white: darkComponentBackground,
colorBgElevated: DARK_COLOR[200],
colorBgContainer: DARK_COLOR[300],
colorBgLayout: darkComponentBackground,
colorText: DARK_COLOR.textPrimary,
colorTextSecondary: DARK_COLOR.textSecondary,
colorTextTertiary: DARK_COLOR.textTertiary,
colorTextQuaternary: DARK_COLOR.textQuaternary,
colorBorder: DARK_COLOR.borderColor,
colorBorderSecondary: DARK_COLOR.borderColorLight,
white: darkColors.bgColor,
colorBgElevated: darkColors[200],
colorBgContainer: darkColors[300],
colorBgLayout: darkColors.bgColor,
colorText: darkColors.textPrimary,
colorTextSecondary: darkColors.textSecondary,
colorTextTertiary: darkColors.textTertiary,
colorTextQuaternary: darkColors.textQuaternary,
colorBorder: darkColors.borderColor,
colorBorderSecondary: darkColors.borderColorLight,
// ------ Pro colors
proSiderColor: DARK_COLOR[200],
proSiderColor: darkColors[200],
proHeaderColor: colors.primary,
};
@@ -146,8 +149,8 @@ export const themeConfig: ThemeConfig = {
borderRadius: 8,
// Futuristic button styles
controlHeight: 40,
colorTextLabel: WHITE_COLOR.blackColor,
colorBgLayout: componentBackground,
colorTextLabel: lightColors.blackColor,
colorBgLayout: lightColors.bgColor,
},
components: {
Breadcrumb: {
@@ -155,9 +158,9 @@ export const themeConfig: ThemeConfig = {
itemColor: "rgba(0,0,0,.8)",
},
Button: {
colorLink: WHITE_COLOR["600"],
colorLinkActive: WHITE_COLOR["700"],
colorLinkHover: WHITE_COLOR["300"],
colorLink: lightColors["600"],
colorLinkActive: lightColors["700"],
colorLinkHover: lightColors["300"],
borderRadius: 1000,
borderRadiusLG: 1000,
// defaultShadow: "none",
@@ -166,8 +169,8 @@ export const themeConfig: ThemeConfig = {
colorBgContainer: "none",
},
Card: {
colorBgContainer: WHITE_COLOR.cardBg,
colorBorderSecondary: WHITE_COLOR["borderColor"],
colorBgContainer: lightColors.whiteColor,
colorBorderSecondary: lightColors["borderColor"],
boxShadow: "0 1px 3px rgba(0,0,0,0.1)",
padding: 16,
paddingLG: 16,
@@ -175,37 +178,37 @@ export const themeConfig: ThemeConfig = {
borderRadiusLG: 24,
},
Carousel: {
colorBgContainer: WHITE_COLOR["800"],
colorBgContainer: lightColors["800"],
dotWidth: 8,
},
Rate: {
colorFillContent: WHITE_COLOR["100"],
colorText: WHITE_COLOR["600"],
colorFillContent: lightColors["100"],
colorText: lightColors["600"],
},
Segmented: {
colorBgLayout: WHITE_COLOR["hoverBg"],
colorBgLayout: lightColors["hoverBg"],
borderRadius: 6,
colorTextLabel: "#000000",
},
Table: {
borderColor: WHITE_COLOR["100"],
headerBg: WHITE_COLOR.primaryColor,
headerColor: WHITE_COLOR.whiteColor,
rowSelectedBg: WHITE_COLOR.primaryColor,
borderColor: lightColors["100"],
headerBg: lightColors.primaryColor,
headerColor: lightColors.whiteColor,
rowSelectedBg: lightColors.primaryColor,
cellPaddingBlock: 8,
colorBgContainer: WHITE_COLOR.tableBg,
colorFillAlter: WHITE_COLOR.hoverBg,
colorBgContainer: lightColors.whiteColor,
colorFillAlter: lightColors.hoverBg,
},
Tabs: {
colorBorderSecondary: WHITE_COLOR["100"],
colorBorderSecondary: lightColors["100"],
},
Timeline: {
dotBg: "none",
},
Typography: {
colorLink: WHITE_COLOR["600"],
colorLinkActive: WHITE_COLOR["700"],
colorLinkHover: WHITE_COLOR["300"],
colorLink: lightColors["600"],
colorLinkActive: lightColors["700"],
colorLinkHover: lightColors["300"],
linkHoverDecoration: "underline",
},
Drawer: {
@@ -215,15 +218,15 @@ export const themeConfig: ThemeConfig = {
controlHeightLG: 30,
},
Menu: {
colorItemBg: WHITE_COLOR.sidebarBg,
colorItemText: WHITE_COLOR["800"],
colorItemTextSelected: WHITE_COLOR.primaryColor2,
colorItemBgSelected: WHITE_COLOR.activeBg,
colorItemBgHover: WHITE_COLOR.hoverBg,
colorItemBg: lightColors.whiteColor,
colorItemText: lightColors["800"],
colorItemTextSelected: lightColors.secondaryColor,
colorItemBgSelected: lightColors.activeBg,
colorItemBgHover: lightColors.hoverBg,
},
Layout: {
headerBg: WHITE_COLOR.headerBg,
bodyBg: componentBackground,
headerBg: lightColors.whiteColor,
bodyBg: lightColors.bgColor,
},
Input: {
borderRadiusLG: 1000,
@@ -243,7 +246,7 @@ export const themeConfig: ThemeConfig = {
Select: {
borderRadius: 1000,
multipleItemHeightLG: 32,
optionSelectedBg: WHITE_COLOR.activeBg,
optionSelectedBg: lightColors.activeBg,
},
},
};
@@ -252,12 +255,12 @@ export const themeConfig: ThemeConfig = {
export const darkThemeConfig: ThemeConfig = {
token: {
// Primary colors
colorPrimary: DARK_COLOR.primaryColor,
colorPrimaryHover: DARK_COLOR.primaryColorHover,
colorPrimaryActive: DARK_COLOR.primaryColorActive,
colorLink: DARK_COLOR.primaryColor,
colorLinkHover: DARK_COLOR.primaryColorHover,
colorLinkActive: DARK_COLOR.primaryColorActive,
colorPrimary: darkColors.primaryColor,
colorPrimaryHover: darkColors.primaryColorHover,
colorPrimaryActive: darkColors.primaryColorActive,
colorLink: darkColors.primaryColor,
colorLinkHover: darkColors.primaryColorHover,
colorLinkActive: darkColors.primaryColorActive,
// Typography
fontFamily: "var(--font-roboto)",
@@ -275,57 +278,57 @@ export const darkThemeConfig: ThemeConfig = {
controlHeightSM: 32,
// Background colors
colorBgContainer: DARK_COLOR[300],
colorBgElevated: DARK_COLOR[200],
colorBgLayout: darkComponentBackground,
colorBgSpotlight: DARK_COLOR[400],
colorBgMask: DARK_COLOR.maskBg,
colorBgContainer: darkColors[300],
colorBgElevated: darkColors[200],
colorBgLayout: darkColors.bgColor,
colorBgSpotlight: darkColors[400],
colorBgMask: darkColors.maskBg,
// Text colors
colorText: DARK_COLOR.textPrimary,
colorTextSecondary: DARK_COLOR.textSecondary,
colorTextTertiary: DARK_COLOR.textTertiary,
colorTextQuaternary: DARK_COLOR.textQuaternary,
colorTextPlaceholder: DARK_COLOR.textDisabled,
colorTextDisabled: DARK_COLOR.textDisabled,
colorTextLabel: DARK_COLOR.textSecondary,
colorTextDescription: DARK_COLOR.textTertiary,
colorText: darkColors.textPrimary,
colorTextSecondary: darkColors.textSecondary,
colorTextTertiary: darkColors.textTertiary,
colorTextQuaternary: darkColors.textQuaternary,
colorTextPlaceholder: darkColors.textDisabled,
colorTextDisabled: darkColors.textDisabled,
colorTextLabel: darkColors.textSecondary,
colorTextDescription: darkColors.textTertiary,
// Border colors
colorBorder: DARK_COLOR.borderColor,
colorBorderSecondary: DARK_COLOR.borderColorLight,
colorBorder: darkColors.borderColor,
colorBorderSecondary: darkColors.borderColorLight,
// Fill colors
colorFill: DARK_COLOR[400],
colorFillSecondary: DARK_COLOR[500],
colorFillTertiary: DARK_COLOR[600],
colorFillQuaternary: DARK_COLOR[700],
colorFill: darkColors[400],
colorFillSecondary: darkColors[500],
colorFillTertiary: darkColors[600],
colorFillQuaternary: darkColors[700],
// Success, warning, error colors
colorSuccess: DARK_COLOR.success,
colorWarning: DARK_COLOR.warning,
colorError: DARK_COLOR.error,
colorInfo: DARK_COLOR.info,
colorSuccess: darkColors.success,
colorWarning: darkColors.warning,
colorError: darkColors.error,
colorInfo: darkColors.info,
// Shadow
boxShadow: DARK_COLOR.shadowLight,
boxShadowSecondary: DARK_COLOR.shadowMedium,
boxShadow: darkColors.shadowLight,
boxShadowSecondary: darkColors.shadowMedium,
},
components: {
// Layout components
Layout: {
headerBg: DARK_COLOR.headerBg,
siderBg: DARK_COLOR.sidebarBg,
bodyBg: darkComponentBackground,
footerBg: DARK_COLOR.headerBg,
headerBg: darkColors.headerBg,
siderBg: darkColors.sidebarBg,
bodyBg: darkColors.bgColor,
footerBg: darkColors.headerBg,
},
// Card component
Card: {
colorBgContainer: ProBlack2,
colorBorderSecondary: DARK_COLOR.borderColor,
boxShadow: DARK_COLOR.shadowLight,
boxShadowTertiary: DARK_COLOR.shadowMedium,
colorBorderSecondary: darkColors.borderColor,
boxShadow: darkColors.shadowLight,
boxShadowTertiary: darkColors.shadowMedium,
padding: 16,
paddingLG: 20,
paddingSM: 12,
@@ -335,11 +338,11 @@ export const darkThemeConfig: ThemeConfig = {
// Button component
Button: {
colorPrimary: DARK_COLOR.primaryColor,
colorPrimaryHover: DARK_COLOR.primaryColorHover,
colorPrimaryActive: DARK_COLOR.primaryColorActive,
colorBgContainer: DARK_COLOR[300],
colorBorder: DARK_COLOR.borderColor,
colorPrimary: darkColors.primaryColor,
colorPrimaryHover: darkColors.primaryColorHover,
colorPrimaryActive: darkColors.primaryColorActive,
colorBgContainer: darkColors[300],
colorBorder: darkColors.borderColor,
controlHeight: 40,
controlHeightLG: 48,
controlHeightSM: 32,
@@ -350,19 +353,19 @@ export const darkThemeConfig: ThemeConfig = {
// Input components
Input: {
colorBgContainer: DARK_COLOR[300],
colorBorder: DARK_COLOR.borderColor,
colorText: DARK_COLOR.textPrimary,
colorTextPlaceholder: DARK_COLOR.textDisabled,
colorBgContainer: darkColors[300],
colorBorder: darkColors.borderColor,
colorText: darkColors.textPrimary,
colorTextPlaceholder: darkColors.textDisabled,
borderRadiusLG: 1000,
fontSize: 12,
fontSizeLG: 12,
},
InputNumber: {
colorBgContainer: DARK_COLOR[300],
colorBorder: DARK_COLOR.borderColor,
colorText: DARK_COLOR.textPrimary,
colorBgContainer: darkColors[300],
colorBorder: darkColors.borderColor,
colorText: darkColors.textPrimary,
borderRadiusLG: 1000,
fontSize: 12,
fontSizeLG: 12,
@@ -370,118 +373,118 @@ export const darkThemeConfig: ThemeConfig = {
// Select component
Select: {
colorBgContainer: DARK_COLOR[300],
colorBgElevated: DARK_COLOR[200],
colorBorder: DARK_COLOR.borderColor,
colorText: DARK_COLOR.textPrimary,
colorTextPlaceholder: DARK_COLOR.textDisabled,
colorBgContainer: darkColors[300],
colorBgElevated: darkColors[200],
colorBorder: darkColors.borderColor,
colorText: darkColors.textPrimary,
colorTextPlaceholder: darkColors.textDisabled,
borderRadius: 1000,
optionSelectedBg: DARK_COLOR.activeBg,
optionSelectedBg: darkColors.activeBg,
},
// Menu component
Menu: {
colorItemBg: DARK_COLOR.sidebarBg,
colorItemText: DARK_COLOR.textPrimary,
colorItemTextSelected: DARK_COLOR.primaryColor,
colorItemBgSelected: DARK_COLOR.activeBg,
colorItemBgHover: DARK_COLOR.hoverBg,
colorSubItemBg: DARK_COLOR[200],
colorItemBg: darkColors.sidebarBg,
colorItemText: darkColors.textPrimary,
colorItemTextSelected: darkColors.primaryColor,
colorItemBgSelected: darkColors.activeBg,
colorItemBgHover: darkColors.hoverBg,
colorSubItemBg: darkColors[200],
colorActiveBarWidth: 3,
colorActiveBarBorderSize: 0,
},
// Table component
Table: {
colorBgContainer: DARK_COLOR.tableBg,
colorFillAlter: DARK_COLOR[200],
colorFillContent: DARK_COLOR[300],
colorFillSecondary: DARK_COLOR[400],
headerBg: DARK_COLOR[400],
headerColor: DARK_COLOR.textPrimary,
rowSelectedBg: DARK_COLOR.activeBg,
rowHoverBg: DARK_COLOR.hoverBg,
borderColor: DARK_COLOR.borderColor,
headerSplitColor: DARK_COLOR.borderColor,
colorBgContainer: darkColors.tableBg,
colorFillAlter: darkColors[200],
colorFillContent: darkColors[300],
colorFillSecondary: darkColors[400],
headerBg: darkColors[400],
headerColor: darkColors.textPrimary,
rowSelectedBg: darkColors.activeBg,
rowHoverBg: darkColors.hoverBg,
borderColor: darkColors.borderColor,
headerSplitColor: darkColors.borderColor,
},
// Drawer component
Drawer: {
colorBgElevated: DARK_COLOR[200],
colorBgMask: DARK_COLOR.maskBg,
colorBorder: DARK_COLOR.borderColor,
colorSplit: DARK_COLOR.borderColor,
colorBgElevated: darkColors[200],
colorBgMask: darkColors.maskBg,
colorBorder: darkColors.borderColor,
colorSplit: darkColors.borderColor,
},
// Modal component
Modal: {
colorBgElevated: DARK_COLOR[200],
colorBgMask: DARK_COLOR.maskBg,
colorIcon: DARK_COLOR.textSecondary,
colorIconHover: DARK_COLOR.textPrimary,
colorBgElevated: darkColors[200],
colorBgMask: darkColors.maskBg,
colorIcon: darkColors.textSecondary,
colorIconHover: darkColors.textPrimary,
},
// Tabs component
Tabs: {
colorBgContainer: DARK_COLOR[300],
colorBorderSecondary: DARK_COLOR.borderColor,
colorText: DARK_COLOR.textPrimary,
colorTextDescription: DARK_COLOR.textSecondary,
colorPrimary: DARK_COLOR.primaryColor,
colorPrimaryHover: DARK_COLOR.primaryColorHover,
colorPrimaryActive: DARK_COLOR.primaryColorActive,
colorBgContainer: darkColors[300],
colorBorderSecondary: darkColors.borderColor,
colorText: darkColors.textPrimary,
colorTextDescription: darkColors.textSecondary,
colorPrimary: darkColors.primaryColor,
colorPrimaryHover: darkColors.primaryColorHover,
colorPrimaryActive: darkColors.primaryColorActive,
},
// Typography component
Typography: {
colorText: DARK_COLOR.textPrimary,
colorTextSecondary: DARK_COLOR.textSecondary,
colorTextDescription: DARK_COLOR.textTertiary,
colorLink: DARK_COLOR.primaryColor,
colorLinkHover: DARK_COLOR.primaryColorHover,
colorLinkActive: DARK_COLOR.primaryColorActive,
colorText: darkColors.textPrimary,
colorTextSecondary: darkColors.textSecondary,
colorTextDescription: darkColors.textTertiary,
colorLink: darkColors.primaryColor,
colorLinkHover: darkColors.primaryColorHover,
colorLinkActive: darkColors.primaryColorActive,
},
// Breadcrumb component
Breadcrumb: {
colorText: DARK_COLOR.textSecondary,
colorTextDescription: DARK_COLOR.textTertiary,
linkColor: DARK_COLOR.textSecondary,
lastItemColor: DARK_COLOR.textPrimary,
colorText: darkColors.textSecondary,
colorTextDescription: darkColors.textTertiary,
linkColor: darkColors.textSecondary,
lastItemColor: darkColors.textPrimary,
},
// Divider component
Divider: {
colorSplit: DARK_COLOR.borderColor,
colorSplit: darkColors.borderColor,
},
// Rate component
Rate: {
colorFillContent: DARK_COLOR[400],
colorText: DARK_COLOR.primaryColor,
colorFillContent: darkColors[400],
colorText: darkColors.primaryColor,
},
// Segmented component
Segmented: {
colorBgLayout: DARK_COLOR[200],
colorBgElevated: DARK_COLOR[300],
colorText: DARK_COLOR.textPrimary,
colorTextLabel: DARK_COLOR.textPrimary,
colorBgLayout: darkColors[200],
colorBgElevated: darkColors[300],
colorText: darkColors.textPrimary,
colorTextLabel: darkColors.textPrimary,
borderRadius: 8,
},
// Calendar component
Calendar: {
colorBgContainer: DARK_COLOR[300],
colorBgElevated: DARK_COLOR[200],
colorText: DARK_COLOR.textPrimary,
colorTextSecondary: DARK_COLOR.textSecondary,
colorBorder: DARK_COLOR.borderColor,
colorBgContainer: darkColors[300],
colorBgElevated: darkColors[200],
colorText: darkColors.textPrimary,
colorTextSecondary: darkColors.textSecondary,
colorBorder: darkColors.borderColor,
},
// Carousel component
Carousel: {
colorBgContainer: DARK_COLOR[400],
colorBgContainer: darkColors[400],
dotWidth: 8,
dotHeight: 8,
dotActiveWidth: 24,
@@ -489,18 +492,18 @@ export const darkThemeConfig: ThemeConfig = {
// Timeline component
Timeline: {
colorText: DARK_COLOR.textPrimary,
colorTextSecondary: DARK_COLOR.textSecondary,
colorSplit: DARK_COLOR.borderColor,
colorText: darkColors.textPrimary,
colorTextSecondary: darkColors.textSecondary,
colorSplit: darkColors.borderColor,
},
// DatePicker component
DatePicker: {
colorBgContainer: DARK_COLOR[300],
colorBgElevated: DARK_COLOR[200],
colorBorder: DARK_COLOR.borderColor,
colorText: DARK_COLOR.textPrimary,
colorTextPlaceholder: DARK_COLOR.textDisabled,
colorBgContainer: darkColors[300],
colorBgElevated: darkColors[200],
colorBorder: darkColors.borderColor,
colorText: darkColors.textPrimary,
colorTextPlaceholder: darkColors.textDisabled,
borderRadius: 1000,
},
},