VE-252 Combine dark and light themes for mui v6 #1009
+360
−430
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,70 +1,72 @@ | ||
| .dark { | ||
| background: #1b1c1d; | ||
|
|
||
| .sb-nopreview_main { | ||
| background: #1b1c1d; | ||
| } | ||
|
|
||
| .sb-nopreview_heading { | ||
| text-align: center; | ||
| } | ||
|
|
||
| .sb-errordisplay { | ||
| background: #2c2f33; | ||
| color: white; | ||
| } | ||
|
|
||
| .sb-errordisplay_main { | ||
| background: #1e1e1e; | ||
| box-shadow: 0 0 64px rgba(255, 255, 255, 0.1); | ||
| } | ||
|
|
||
| .sb-errordisplay_code { | ||
| background: #1c1c1c; | ||
| color: #d4d4d4; | ||
| } | ||
|
|
||
| .sb-preparing-story, | ||
| .sb-preparing-docs { | ||
| background-color: #1b1c1d; | ||
| } | ||
|
|
||
| .sb-loader { | ||
| border-color: rgba(158, 158, 158, 0.29); | ||
| } | ||
|
|
||
| .sb-previewBlock { | ||
| background: #2c2f33; | ||
| border: 1px solid rgba(255, 255, 255, 0.1); | ||
| box-shadow: rgba(255, 255, 255, 0.1) 0 1px 3px 0; | ||
| } | ||
|
|
||
| .sb-previewBlock_header { | ||
| box-shadow: rgba(255, 255, 255, 0.1) 0 -1px 0 0 inset; | ||
| } | ||
|
|
||
| .sb-previewBlock_icon { | ||
| background: #3c3f43; | ||
| } | ||
|
|
||
| .sb-argstableBlock th span, | ||
| .sb-argstableBlock td span { | ||
| background-color: rgba(255, 255, 255, 0.1); | ||
| } | ||
|
|
||
| .sb-argstableBlock-body { | ||
| box-shadow: | ||
| rgba(255, 255, 255, 0.1) 0 1px 3px 1px, | ||
| rgba(255, 255, 255, 0.065) 0 0 0 1px; | ||
| } | ||
|
|
||
| .sb-argstableBlock-body tr:not(:first-child) { | ||
| border-top: 1px solid #3c3f43; | ||
| } | ||
|
|
||
| .sb-argstableBlock-body td { | ||
| background: #1b1c1d; | ||
| } | ||
|
|
||
| .sb-argstableBlock-body button { | ||
| background-color: rgba(255, 255, 255, 0.1); | ||
| } | ||
| } | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -59,7 +59,15 @@ export function SidebarFilter({ | |
| <IconButton | ||
| data-testid="filter-close-button" | ||
| onClick={() => setOpen(false)} | ||
| sx={theme => ({ | ||
| color: "#9e9e9e", | ||
| position: "absolute", | ||
| right: 12, | ||
| top: 12, | ||
| ...theme.applyStyles("dark", { | ||
| color: "#ffffff" | ||
| }) | ||
| })} | ||
|
There was a problem hiding this comment. Why are you introducing more hardcoded colours? Lets not add to the problem. There was a problem hiding this comment. Aligned with @Sowbhagya-ipg to go with default action.active for icon buttons |
||
| > | ||
| <Close /> | ||
| </IconButton> | ||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,6 +1,7 @@ | ||
| /* eslint-disable no-undef */ | ||
|
|
||
| import type {} from "@mui/x-data-grid/themeAugmentation"; | ||
| import type {} from "@mui/material/themeCssVarsAugmentation"; | ||
|
|
||
| import { | ||
| ThemeProvider as MuiThemeProvider, | ||
|
|
@@ -17,14 +18,6 @@ import darkScrollbar from "@mui/material/darkScrollbar"; | |
| // extend the theme to include custom properties | ||
| // https://mui.com/material-ui/customization/theming/#custom-variables | ||
| declare module "@mui/material/styles" { | ||
| // allow configuration using `createTheme` | ||
| // eslint-disable-next-line no-unused-vars | ||
| interface ThemeOptions { | ||
|
|
@@ -33,17 +26,21 @@ declare module "@mui/material/styles" { | |
| maxWidth?: number; | ||
| }; | ||
| }; | ||
| colorSchemes?: { | ||
| dark?: ThemeOptions; | ||
| light?: ThemeOptions; | ||
| }; | ||
| } | ||
| // eslint-disable-next-line no-unused-vars | ||
| interface Theme { | ||
| layout: { | ||
| content: { | ||
| maxWidth: number; | ||
| }; | ||
| }; | ||
| colorSchemes?: { | ||
| dark?: ThemeOptions; | ||
| light?: ThemeOptions; | ||
| }; | ||
| } | ||
| } | ||
|
|
@@ -82,6 +79,15 @@ const defaultComponents = { | |
| } | ||
| } | ||
| }, | ||
| MuiFormControl: { | ||
| styleOverrides: { | ||
| root: { | ||
| "& .MuiFormLabel-root, .MuiFormHelperText-root ": { | ||
| color: "var(--ipg-palette-text-secondary)" | ||
|
There was a problem hiding this comment. Using |
||
| } | ||
| } | ||
| } | ||
| }, | ||
| MuiFormLabel: { | ||
| styleOverrides: { | ||
| asterisk: { | ||
|
|
@@ -93,7 +99,8 @@ const defaultComponents = { | |
| styleOverrides: { | ||
| tooltip: { | ||
| fontFamily: "Montserrat, Arial, sans-serif", | ||
| fontSize: "12px", | ||
| fontWeight: 400 | ||
| } | ||
| } | ||
| } | ||
|
|
@@ -119,6 +126,16 @@ const mainTheme: ThemeOptions = { | |
| } | ||
| } | ||
| }, | ||
| MuiAutocomplete: { | ||
| styleOverrides: { | ||
| clearIndicator: { | ||
| color: "#ffffff" | ||
| }, | ||
| popupIndicator: { | ||
| color: "#ffffff" | ||
| } | ||
| } | ||
| }, | ||
| MuiCssBaseline: { | ||
| styleOverrides: { | ||
| body: darkScrollbar() | ||
|
|
@@ -151,7 +168,6 @@ const mainTheme: ThemeOptions = { | |
| }) | ||
| } | ||
| }, | ||
| MuiStepper: { | ||
| styleOverrides: { | ||
| root: { | ||
|
|
@@ -179,8 +195,7 @@ const mainTheme: ThemeOptions = { | |
| }, | ||
| "&:hover": { | ||
| backgroundColor: "rgba(0, 95, 168, 0.15)" | ||
| } | ||
| } | ||
| } | ||
| } | ||
|
|
@@ -233,30 +248,34 @@ export default function ThemeProvider({ | |
| }: ThemeProviderProps) { | ||
| // wrap mui theme provider and children in theme context | ||
| return ( | ||
| <MuiThemeProvider theme={mainThemeWithColorSchemes} defaultMode="light"> | ||
| <ControlledThemeWrapper theme={controlledTheme}> | ||
| {children} | ||
| </ControlledThemeWrapper> | ||
| </MuiThemeProvider> | ||
| ); | ||
| } | ||
|
|
||
| /** | ||
| * ControlledThemeWrapper Component | ||
| * | ||
| * This component is used to enforce a specific theme mode (`light` or `dark`) | ||
| * for its child components based on the `controlledTheme` prop. It synchronizes | ||
| * the theme mode with the provided value and ensures the children use the correct | ||
| * theme. The wrapper relies on MuI's `useColorScheme` hook for theme mode management. | ||
| * | ||
| * @param props.children - The child components to render inside the wrapper. | ||
| * @param props.theme - The desired theme mode (`light` or `dark`) to enforce. | ||
| * | ||
| * @returns The wrapped children with the enforced theme mode. | ||
| */ | ||
| function ControlledThemeWrapper({ | ||
| children, | ||
| theme: controlledTheme | ||
| }: ThemeProviderProps) { | ||
| // use hook from MUI to get and set the theme mode | ||
| const { mode, setMode } = useColorScheme(); | ||
|
|
||
| // update the theme mode when the controlled theme changes | ||
| useEffect(() => { | ||
| if (controlledTheme && mode !== controlledTheme) { | ||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
added background , this was getting overwritten by dark color-scheme from mui