Skip to content

F
frontend
Commit 08de20eb authored by tom's avatar tom
Browse files
Options

fix hero banner config for dark color mode

parent 2ce0c41e
Hide whitespace changes
Inline Side-by-side
Showing with 32 additions and 17 deletions
theme/components/Button/Button.ts
View file @ 08de20eb
...@@ -154,33 +154,34 @@ const variantSubtle = defineStyle((props) => { ...@@ -154,33 +154,34 @@ const variantSubtle = defineStyle((props) => {
// for buttons in the hero banner // for buttons in the hero banner
const variantHero = defineStyle((props) => { const variantHero = defineStyle((props) => {
const buttonConfig = config.UI.homepage.heroBanner?.button;
return { return {
bg: mode( bg: mode(
config.UI.homepage.heroBanner?.button?._default?.background?.[0] || 'blue.600', buttonConfig?._default?.background?.[0] || 'blue.600',
config.UI.homepage.heroBanner?.button?._default?.background?.[1] || 'blue.600', buttonConfig?._default?.background?.[1] || buttonConfig?._default?.background?.[0] || 'blue.600',
)(props), )(props),
color: mode( color: mode(
config.UI.homepage.heroBanner?.button?._default?.text_color?.[0] || 'white', buttonConfig?._default?.text_color?.[0] || 'white',
config.UI.homepage.heroBanner?.button?._default?.text_color?.[1] || 'white', buttonConfig?._default?.text_color?.[1] || buttonConfig?._default?.text_color?.[0] || 'white',
)(props), )(props),
_hover: { _hover: {
bg: mode( bg: mode(
config.UI.homepage.heroBanner?.button?._hover?.background?.[0] || 'blue.400', buttonConfig?._hover?.background?.[0] || 'blue.400',
config.UI.homepage.heroBanner?.button?._hover?.background?.[1] || 'blue.400', buttonConfig?._hover?.background?.[1] || buttonConfig?._hover?.background?.[0] || 'blue.400',
)(props), )(props),
color: mode( color: mode(
config.UI.homepage.heroBanner?.button?._hover?.text_color?.[0] || 'white', buttonConfig?._hover?.text_color?.[0] || 'white',
config.UI.homepage.heroBanner?.button?._hover?.text_color?.[1] || 'white', buttonConfig?._hover?.text_color?.[1] || buttonConfig?._hover?.text_color?.[0] || 'white',
)(props), )(props),
}, },
'&[data-selected=true]': { '&[data-selected=true]': {
bg: mode( bg: mode(
config.UI.homepage.heroBanner?.button?._selected?.background?.[0] || 'blue.50', buttonConfig?._selected?.background?.[0] || 'blue.50',
config.UI.homepage.heroBanner?.button?._selected?.background?.[1] || 'blue.50', buttonConfig?._selected?.background?.[1] || buttonConfig?._selected?.background?.[0] || 'blue.50',
)(props), )(props),
color: mode( color: mode(
config.UI.homepage.heroBanner?.button?._selected?.text_color?.[0] || 'blackAlpha.800', buttonConfig?._selected?.text_color?.[0] || 'blackAlpha.800',
config.UI.homepage.heroBanner?.button?._selected?.text_color?.[1] || 'blackAlpha.800', buttonConfig?._selected?.text_color?.[1] || buttonConfig?._selected?.text_color?.[0] || 'blackAlpha.800',
)(props), )(props),
}, },
}; };
......
ui/home/HeroBanner.tsx
View file @ 08de20eb
...@@ -13,18 +13,32 @@ const BORDER_DEFAULT = 'none'; ...@@ -13,18 +13,32 @@ const BORDER_DEFAULT = 'none';
const HeroBanner = () => { const HeroBanner = () => {
const background = useColorModeValue( const background = useColorModeValue(
config.UI.homepage.heroBanner?.background?.[0] || config.UI.homepage.plate.background || BACKGROUND_DEFAULT, // light mode
config.UI.homepage.heroBanner?.background?.[1] || config.UI.homepage.plate.background || BACKGROUND_DEFAULT, config.UI.homepage.heroBanner?.background?.[0] ||
config.UI.homepage.plate.background ||
BACKGROUND_DEFAULT,
// dark mode
config.UI.homepage.heroBanner?.background?.[1] ||
config.UI.homepage.heroBanner?.background?.[0] ||
config.UI.homepage.plate.background ||
BACKGROUND_DEFAULT,
); );
const textColor = useColorModeValue( const textColor = useColorModeValue(
config.UI.homepage.heroBanner?.text_color?.[0] || config.UI.homepage.plate.textColor || TEXT_COLOR_DEFAULT, // light mode
config.UI.homepage.heroBanner?.text_color?.[1] || config.UI.homepage.plate.textColor || TEXT_COLOR_DEFAULT, config.UI.homepage.heroBanner?.text_color?.[0] ||
config.UI.homepage.plate.textColor ||
TEXT_COLOR_DEFAULT,
// dark mode
config.UI.homepage.heroBanner?.text_color?.[1] ||
config.UI.homepage.heroBanner?.text_color?.[0] ||
config.UI.homepage.plate.textColor ||
TEXT_COLOR_DEFAULT,
); );
const border = useColorModeValue( const border = useColorModeValue(
config.UI.homepage.heroBanner?.border?.[0] || BORDER_DEFAULT, config.UI.homepage.heroBanner?.border?.[0] || BORDER_DEFAULT,
config.UI.homepage.heroBanner?.border?.[1] || BORDER_DEFAULT, config.UI.homepage.heroBanner?.border?.[1] || config.UI.homepage.heroBanner?.border?.[0] || BORDER_DEFAULT,
); );
return ( return (
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment