fix: Now use correct css to deal with dark theme

JF-Cozy · JF-Cozy · commit df4bb6130765 · 2026-03-25T16:44:39.000+01:00
for `BottomSheet`, `Modal` and `Dialog`
diff --git a/react/BottomSheet/BottomSheet.jsx b/react/BottomSheet/BottomSheet.jsx
@@ -436,11 +436,9 @@ BottomSheet.propTypes = {
 }
 
 const BottomSheetPortal = forwardRef(({ portalProps, ...props }, ref) => {
-  const { type, variant } = useCozyTheme()
+  const { type } = useCozyTheme()
   const CozyThemeWrapper = portalProps?.disablePortal ? Fragment : CozyTheme
-  const wrapperProps = portalProps?.disablePortal
-    ? undefined
-    : { type, variant }
+  const wrapperProps = portalProps?.disablePortal ? undefined : { type }
 
   return (
     <Portal {...portalProps}>
diff --git a/react/Dialog/index.jsx b/react/Dialog/index.jsx
@@ -6,15 +6,12 @@ import { useDialogEffects } from './DialogEffects'
 import { useCozyTheme } from '../providers/CozyTheme'
 
 const Dialog = ({ className, ...props }) => {
-  const { type, variant } = useCozyTheme()
+  const { type } = useCozyTheme()
 
   useDialogEffects(props.open, props.fullScreen)
 
   return (
-    <MUIDialog
-      className={cx(`TwakeTheme--${type}-${variant}`, className)}
-      {...props}
-    />
+    <MUIDialog className={cx(`TwakeTheme--${type}`, className)} {...props} />
   )
 }
 
diff --git a/react/deprecated/Modal/index.jsx b/react/deprecated/Modal/index.jsx
@@ -250,15 +250,12 @@ ModalContent.propTypes = {
 }
 
 const Modal = props => {
-  const { type, variant } = useCozyTheme()
+  const { type } = useCozyTheme()
 
   return (
     <ModalWithoutTheme
       {...props}
-      containerClassName={cx(
-        props.containerClassName,
-        `CozyTheme--${type}-${variant}`
-      )}
+      containerClassName={cx(props.containerClassName, `CozyTheme--${type}`)}
     />
   )
 }

Original file line number	Diff line number	Diff line change
`@@ -6,15 +6,12 @@ import { useDialogEffects } from './DialogEffects'`
`6`	`6`	`import { useCozyTheme } from '../providers/CozyTheme'`
`7`	`7`
`8`	`8`	`const Dialog = ({ className, ...props }) => {`
`9`		`- const { type, variant } = useCozyTheme()`
	`9`	`+ const { type } = useCozyTheme()`
`10`	`10`
`11`	`11`	`useDialogEffects(props.open, props.fullScreen)`
`12`	`12`
`13`	`13`	`return (`
`14`		`- <MUIDialog`
`15`		- className={cx(`TwakeTheme--${type}-${variant}`, className)}
`16`		`- {...props}`
`17`		`- />`
	`14`	+ <MUIDialog className={cx(`TwakeTheme--${type}`, className)} {...props} />
`18`	`15`	`)`
`19`	`16`	`}`
`20`	`17`
Original file line number	Diff line number	Diff line change
`@@ -250,15 +250,12 @@ ModalContent.propTypes = {`
`250`	`250`	`}`
`251`	`251`
`252`	`252`	`const Modal = props => {`
`253`		`- const { type, variant } = useCozyTheme()`
	`253`	`+ const { type } = useCozyTheme()`
`254`	`254`
`255`	`255`	`return (`
`256`	`256`	`<ModalWithoutTheme`
`257`	`257`	`{...props}`
`258`		`- containerClassName={cx(`
`259`		`- props.containerClassName,`
`260`		- `CozyTheme--${type}-${variant}`
`261`		`- )}`
	`258`	+ containerClassName={cx(props.containerClassName, `CozyTheme--${type}`)}
`262`	`259`	`/>`
`263`	`260`	`)`
`264`	`261`	`}`