From 2188bff42fe17dedfc74694d7ca422a728c45622 Mon Sep 17 00:00:00 2001 From: Josh Black Date: Mon, 3 Feb 2025 12:58:40 -0600 Subject: [PATCH 1/2] fix(BaseStyles): set data-color-mode to auto when auto color mode --- packages/react/src/BaseStyles.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/react/src/BaseStyles.tsx b/packages/react/src/BaseStyles.tsx index d757a49e6b2..a837f8c76a2 100644 --- a/packages/react/src/BaseStyles.tsx +++ b/packages/react/src/BaseStyles.tsx @@ -54,7 +54,7 @@ export type BaseStylesProps = PropsWithChildren & { function BaseStyles(props: BaseStylesProps) { const {children, color, fontFamily, lineHeight, className, as: Component = 'div', style, ...rest} = props - const {colorScheme, dayScheme, nightScheme} = useTheme() + const {colorMode, colorScheme, dayScheme, nightScheme} = useTheme() const enabled = useFeatureFlag(CSS_MODULES_FEATURE_FLAG) if (enabled) { @@ -79,7 +79,7 @@ function BaseStyles(props: BaseStylesProps) { * valid color modes for primer/primitives: auto | light | dark * valid color modes for primer/primer: auto | day | night | light | dark */ - data-color-mode={colorScheme?.includes('dark') ? 'dark' : 'light'} + data-color-mode={colorMode === 'auto' ? 'auto' : colorScheme?.includes('dark') ? 'dark' : 'light'} data-light-theme={dayScheme} data-dark-theme={nightScheme} style={{ @@ -103,7 +103,7 @@ function BaseStyles(props: BaseStylesProps) { * valid color modes for primer/primitives: auto | light | dark * valid color modes for primer/primer: auto | day | night | light | dark */ - data-color-mode={colorScheme?.includes('dark') ? 'dark' : 'light'} + data-color-mode={colorMode === 'auto' ? 'auto' : colorScheme?.includes('dark') ? 'dark' : 'light'} data-light-theme={dayScheme} data-dark-theme={nightScheme} style={{ @@ -129,7 +129,7 @@ function BaseStyles(props: BaseStylesProps) { * valid color modes for primer/primitives: auto | light | dark * valid color modes for primer/primer: auto | day | night | light | dark */ - data-color-mode={colorScheme?.includes('dark') ? 'dark' : 'light'} + data-color-mode={colorMode === 'auto' ? 'auto' : colorScheme?.includes('dark') ? 'dark' : 'light'} data-light-theme={dayScheme} data-dark-theme={nightScheme} style={style} From 8b682e7c6e7827d34bcd8308bcbdc816359d2d99 Mon Sep 17 00:00:00 2001 From: Josh Black Date: Mon, 3 Feb 2025 12:59:17 -0600 Subject: [PATCH 2/2] chore: add changeset --- .changeset/strong-walls-approve.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/strong-walls-approve.md diff --git a/.changeset/strong-walls-approve.md b/.changeset/strong-walls-approve.md new file mode 100644 index 00000000000..19555bb39dd --- /dev/null +++ b/.changeset/strong-walls-approve.md @@ -0,0 +1,5 @@ +--- +"@primer/react": patch +--- + +Update BaseStyles to set data-color-mode to auto when colorMode in ThemeProvider is auto