I have updated my theme according to the docs but the circular progress continues to use the default primary color, not the one specified in the theme. Ultimately I'd like to be able to make the theme adjustable via the end user, using mobx computed values to adjust the theme, but currently I can't even get it to work with a static theme.
import {MuiThemeProvider} from "material-ui/styles"
import Loading from "../common/components/Loading";
import {createMuiTheme} from "material-ui";
const testingTheme = createMuiTheme({
primary: {
main: '#67e2ff',
light: '#a0ffff',
dark: '#1eb0cc',
contrastText: '#3b3f42'
},
secondary: {
main: '#590ce8',
light: '#9549ff',
dark: '#0000b4',
contrastText: '#fefefe'
}});
/**
* The AppContainer handles all of the logical functionality that has to happen at the root level.
* A prime example is the MuiThemeProvider, that must be the parent of all other rendered components.
* To change the muiTheme we use the AppContainer to render the MuiThemeProvider
*/
#inject("uiStore") #observer
export default class AppContainer extends Component {
componentDidMount() {
console.log(this.props.uiStore);
}
render() {
return (
<MuiThemeProvider theme={testingTheme}>
{this.props.uiStore.initialized ? <App/> : <Loading size={10}/>}
</MuiThemeProvider>
)
}
}
My definition for the theme was wrong, I was missing the root palette property.
const testingTheme = createMuiTheme({
palette: {
primary: {
main: '#67e2ff',
light: '#a0ffff',
dark: '#1eb0cc',
contrastText: '#3b3f42'
},
secondary: {
main: '#590ce8',
light: '#9549ff',
dark: '#0000b4',
contrastText: '#fefefe'
}
}
});
Related
I'm trying to theme and customize MUI components to align them with our company design, but I stumbled across a problem.
I have defined my custom colors, for some reason we have color "danger" instead of "error".
I was following the documentation https://mui.com/material-ui/customization/palette/#adding-new-colors and everything works great for Button component.
But when I moved on to the Alert component, the same approach doesn't work, and I just simply don't know why. All I'm getting is Uncaught TypeError: Cannot read properties of undefined (reading 'type')
I also tried it to add it to the stackblitz example from the docs page mentioned above but got the same result: https://stackblitz.com/edit/react-z3xjhf?file=demo.tsx
import * as React from 'react';
import { createTheme, ThemeProvider } from '#mui/material/styles';
import Button from '#mui/material/Button';
import Alert from '#mui/material/Alert';
const theme = createTheme({
palette: {
neutral: {
main: '#64748B',
contrastText: '#fff',
},
},
});
declare module '#mui/material/styles' {
interface Palette {
neutral: Palette['primary'];
}
// allow configuration using `createTheme`
interface PaletteOptions {
neutral?: PaletteOptions['primary'];
}
}
// Update the Button's color prop options
declare module '#mui/material/Button' {
interface ButtonPropsColorOverrides {
neutral: true;
}
}
declare module '#mui/material/Alert' {
interface AlertPropsColorOverrides {
neutral: true;
}
}
export default function CustomColor() {
return (
<ThemeProvider theme={theme}>
<Button color="neutral" variant="contained">
neutral
</Button>
<Alert color="neutral">ALERT</Alert>
</ThemeProvider>
);
}
Does anybody have any idea what I'm doing wrong?
You need to add light: '<whatever_your_light_color_hex>' to your theme, too. Like this:
const theme = createTheme({
palette: {
neutral: {
main: '#64748B',
light: '#64748B',
contrastText: '#fff',
},
},
});
This stackblitz is a live working example of this solution.
I am trying to prepare global or app level theming.
In theme.js, I have given 'primary' color, which I expect to work on <Typography> as well.
// Demo.js
import * as React from "react";
import { createTheme, ThemeProvider } from "#mui/material/styles";
import { purple } from "#mui/material/colors";
import Button from "#mui/material/Button";
import Typography from "#mui/material/Typography";
const theme = createTheme({
typography: {
color: purple[500]
},
palette: {
primary: {
main: purple[500]
},
secondary: {
main: "#11cb5f"
}
}
});
export default function Palette() {
return (
<ThemeProvider theme={theme}>
<Button>Primary</Button> // primary color is applied ie purple color is applied, though 'color' property is not written.
<Button color="secondary">Secondary</Button> // secondary is applied
<Typography>some text</Typography> // 'primary' color not applied
</ThemeProvider>
);
}
Both <button> get theme colors, and first <Button> gets primary color applied, though property "color" is not given. But <Typography> remains unaffected ie 'primary' color is not applied.
I need like this
<Typography>some text</Typography>
How to apply 'primary' color, without writing 'color' property?
also,
typography: {
color: purple[500]
},
is also, not effecting the text color inside 'typography'.
sandbox link
It's easy enough to achieve it by setting it in your theme in the text like below (see the comment). In this way you can omit the color="primary" in your <Typography> component as primary is the default one.
But also you can set and use the other variations and use them like <Typography color="secondary">Test text</Typography>. Hope the below example is easy to understand.
export const theme = createTheme({
palette: {
primary: {
main: '#2d9cdb',
dark: '#2e85d4',
},
secondary: {
main: '#2e85d4',
},
text: {
primary: '#000000', // Here is where you set your color.
secondary: '#2d9cdb',
},
success: {
main: '#55ab68',
light: '#48C830',
},
warning: {
main: '#f38713',
},
error: {
main: '#ed4a3a',
},
divider: '#707070',
},
...
}
Default value for color in Button component is 'primary' as per the MUI Documentation. And you would want to override color for typography by applying external styles or by doing something as shown below.
const theme = createTheme({
palette: {
primary: {
// Purple and green play nicely together.
main: purple[500]
},
secondary: {
// This is green.A700 as hex.
main: "#11cb5f"
}
},
// Override root typography color.
components: {
MuiTypography: {
styleOverrides: {
root: {
color: purple[500]
}
}
}
}
});
const theme = createTheme({
components: {
MuiTypography: {
defaultProps: {
color: 'primary'
}
}
}
})
the key is defaultProps.
This is how you override default props of MUI components.
I want to set the primary and secondary color in my theme.js/theme.ts. Is there any way to do that?
I am used to work with Material UI components in my React projects.
It is possible to set a palette with 'primary' and 'secondary' there.
I mean something like this:
export const theme = createTheme({
palette: {
primary: {
main: "#7bb9e8"
},
secondary: {
main: "#eb7f7f"
}
}
})
According to this section: https://chakra-ui.com/docs/styled-system/theming/customize-theme#using-theme-extensions
You don't have to pass color='primary' everywhere.
Just create custom theme and then set primary as default color.
This example shows how to set Cyan as default color for every component.
const theme = extendTheme(
{
colors: {
primary: baseTheme.colors.cyan
},
breakpoints,
},
withDefaultColorScheme({
colorScheme: 'primary'
}),
);
As soon as you have defined all color's shades, you can use your custom color as a component's colorSheme:
const theme = extendTheme({
colors: {
primary: {
main: "#7bb9e8",
50: "#e3f2fd",
100: "#bbdefb",
200: "#90caf9",
300: "#64b5f6",
400: "#42a5f5",
500: "#2196f3",
600: "#1e88e5",
700: "#1976d2",
800: "#1565c0",
900: "#0d47a1"
}
}
});
And your component :
<Button colorScheme="primary">Button</Button>
Demo
You can customize the theme in any possible way :
import { extendTheme } from "#chakra-ui/react";
const theme = extendTheme({
colors: {
primary: {
main: "#7bb9e8"
},
secondary: {
main: "#eb7f7f"
}
}
});
Then pass this theme to ChakraProvider
//index.js
<ChakraProvider theme={theme}>
<App />
</ChakraProvider>
And you will be able to use your own colors accessing the theme via useTheme hook:
import { useTheme } from "#chakra-ui/react";
...
const theme = useTheme();
...
<Button bg={theme.colors.primary.main}>Button</Button>
or override a component styles globally inside the component object
Demo
You can set two variants of primary colors with default and _dark property. It will be used depending on actual color mode (light/dark theme).
import { extendTheme } from '#chakra-ui/react'
const theme = extendTheme({
initialColorMode: 'light',
semanticTokens: {
colors: {
text: {
default: '#16161D',
_dark: '#ade3b8',
},
primary: {
default: '#FF0080',
_dark: '#fbec8f',
},
})
export default theme
I have the below file as the first file that loads when my application loads. I want to pull the palette type from my Redux store like this.props.pageTheme so when I trigger a change to the theme, it takes place in the whole app. though when I enter type: this.props.pageTheme I get an error saying TypeError: Cannot read property 'props' of undefined.. Which would make sense because store is not generated by the time const kicks in. But .. Then, how can I read what's in the store and change on the page? I've seen solutions like creating multiple theme const and applying that based on this.props.getTheme within return of the app but that's so ugly way of doing it. Is there any smart way to handle theme value injection into the createMuiTheme?
import React, { Component } from "react";
import { MuiThemeProvider, createMuiTheme } from "#material-ui/core/styles";
const theme = createMuiTheme({
palette: {
type: "light",
}
});
class App extends Component {
render() {
return (
<MuiThemeProvider theme={theme}>
<>page content</>
</MuiThemeProvider>
);
}
}
}
function mapStateToProps(state) {
return {
pageTheme: state.Page.Theme
};
}
export default connect(
mapStateToProps
)(App);
So I am sure there will be people looking for an answer for this issue since it's sleek to offer users an ability to change the color mode of your app. My solution is below, if I come across any, I will update it.
In Redux Store I have:
const initialState = {
Page: {
Theme: "light"
},
};
In main App.js file I have
<MuiThemeProvider theme={theme(this.props.pageTheme)}>
as a wrapper around the content that I have on the page.
and I have the below function for theme
function theme(mode) {
return createMuiTheme({
palette: {
type: mode,
primary: {
light: "#757ce8",
main: "#3f50b5",
dark: "#002884",
contrastText: "#fff"
},
secondary: {
light: "#ff7961",
main: "#f44336",
dark: "#ba000d",
contrastText: "#000"
}
}
});
}
If you have any suggestions over this to get it better, still highly appreciated.
How can I change the default color ?
What is the object I need to modify in the theme.js ?
EDIT
I want to modify the defaut (grey color) who isn't primary or secondary or error.
I came across a similar issue to the OP, specifically I wanted to change the default Button color from grey to white. The question commenters are correct, each component has its own specific styles and colors versus a global default color. These need to be overridden via a custom theme. Below is an example of overriding Button's default class contained, by creating a theme override to change the default button color. CONTANTS is used to define the specific colors, etc.
import React from 'react';
import { createMuiTheme } from '#material-ui/core/styles';
import { ThemeProvider } from '#material-ui/styles';
import * as CONSTANTS from './Constants'
const theme = createMuiTheme({
palette: {
primary: {
// light: will be calculated from palette.primary.main,
main: CONSTANTS.BLUE,
// dark: will be calculated from palette.primary.main,
contrastText: CONSTANTS.CONTRAST_TEXT,
},
},
overrides:{
MuiButton:{
contained:{
color: CONSTANTS.BLUE,
backgroundColor: CONSTANTS.CONTRAST_TEXT,
'&:hover': {
backgroundColor: CONSTANTS.LIGHT_BLUE,
// Reset on touch devices, it doesn't add specificity
'#media (hover: none)': {
backgroundColor: CONSTANTS.CONTRAST_TEXT,
},
}
}
}
}
});
interface IThemeProps{
children:any;
}
export default function Theme(props: IThemeProps) {
return (
<ThemeProvider theme={theme}>
{props.children}
</ThemeProvider>
);
}
And to use the new theme:
import React from 'react';
import Theme from './Theme';
import { Header, Home } from './Components';
const App: React.FC = () => {
return (
<Theme>
<Header>
<Home />
</Header>
</Theme>
);
}
export default App;
const customTheme = createTheme({
components: {
MuiButton: {
styleOverrides: {
outlined: {
color: "red",
},
},
},
},
});
I found on Material UI documentation about overriding the default properties
You need to modify the palette object in the theme.
`palette: {
primary: {
light: palette.primary[300],
main: palette.primary[500],
dark: palette.primary[700],
contrastText: getContrastText(palette.primary[500]),
},
secondary: {
light: palette.secondary.A200,
main: palette.secondary.A400,
dark: palette.secondary.A700,
contrastText: getContrastText(palette.secondary.A400),
},enter code here
error: {
light: palette.error[300],
main: palette.error[500],
dark: palette.error[700],
contrastText: getContrastText(palette.error[500]),
},
},`