I have been searching the web for a while, but I could not understand how to apply the default dark theme that is shown in the site of Material-ui, where you can toggle between the light and dark theme.
They say those are default ones, but how do I use them?
Thanks!
You can use them by creating a Theme like this:
import { MuiThemeProvider, createMuiTheme } from '#material-ui/core/styles';
const THEME = createMuiTheme({
palette: {
type: 'dark',
},
});
class YourComponent extends Component {
render() {
return (
<MuiThemeProvider theme={THEME}>
... your other components
</MuiThemeProvider>
)
}
}
export default YourComponent;
The toggle can be done with a button like this example.
Related
I'm starting to use Material UI in my project.
I have created a theme with some basic definitions, using my css variables:
import { createTheme } from '#mui/material/styles';
import theme from './_my-variables.scss';
const muiTheme = createTheme({
palette: {
primary: {
main: theme['color-blue'], // 'color-blue' is my css variable
},
},
typography: {
fontFamily: theme['brand-font'], // 'brand-font' is my css variable
},
}
I also used ThemeProvider in my App layout:
export const App = (props) => {
return (<Provider store={store}>
<ThemeProvider theme={muiTheme}>
<ConnectedRouter history={historyRef.history}>
<Layout {...props} />
</ConnectedRouter>
</ThemeProvider>
</Provider>);
};
I have a page with MUI elements, and it works fine and takes the new primary color and the new font.
<Box>
<Paper>
<Checkbox color="primary" /> <!-- I can see my new color in the page! Yay! -->
some text
</Paper>
</Box>
Now I want to create a custom element - like <MyCustomizeBox> that will have a different properties, using my css variables (for example - a specific width, defined in my variables).
How do I define them in my theme and how to use it to customize a new element?
I prefer not to user classes () because I want to create a generic elements for reusing. Also I don't want to change all Boxes in my app - only the customized ones.
I tries to use "withStyles" but I was getting the default theme instead of my customized theme and I saw on Google that I'm not support to use both "withStyles" and theme together.
At last, found the answer:
import { styled } from '#mui/system';
const MyCustomizedPaper = styled(Paper)(({ theme }) => ({
width: theme.custom.myCustomWidthCssVar
}));
<MyCustomizedPaper ></MyCustomizedPaper >
I am using #mui/material with React + Typescript.
I want to change the warning color of the button by creating a custom theme but so far without success.
My _app.tsx
import {ThemeProvider as MaterialThemeProvider, StyledEngineProvider} from '#mui/material/styles';
import {createTheme} from '#mui/material';
import {green} from '#mui/material/colors';
import { AppProps } from 'next/app';
import Button from '#mui/material/Button';
const MyApp = function ({Component, pageProps}: AppProps) {
const MaterialUiLight = createTheme({
palette: {
warning: {
light: green[500],
main: green[500],
},
},
});
return <StyledEngineProvider injectFirst>
<MaterialThemeProvider theme={MaterialUiLight}>
<Button
variant="contained"
color="warning"
>
Please Change Color
</Button>
</MaterialThemeProvider>
</StyledEngineProvider>
}
Even though I have specified in the palette, warning to have green color I still see the default "orangish" color
So my question is: How can I change the color="warning" or "secondary" for the buttons or overall by using this createTheme function ? Seems like my colors are just ignored...
Basically, I can change the colors of all Button elements in my theme, but I've been unable to do the same for AppBar. I'm puzzled. Here's a snippet of my code:
overrides: {
MuiButton: {
root: {
background: 'blue',
},
label: {
color: 'white',
}
},
MuiAppBar: {
root: {
background: 'white'
}
},
I've tried a lot of different variations on that, but nothing works. Please advise!
The problem you are seeing is due to the color prop in AppBar overriding your custom styling. By default, your .MuiAppBar-root class styling is being applied as expected, but the .MuiAppBar-colorPrimary class is setting the background-color to the default theme primary color. This differs from MuiButton which has the color prop set to "default" if you don't explicitly set it. If you change this to 'inherit' or 'default', the custom color should work for you.
export default function CustomAppBar() {
const theme = createMuiTheme({
overrides: {
MuiAppBar: {
root: {
background: "white"
}
}
}
});
return (
<ThemeProvider theme={theme}>
<AppBar color="default">
...
</AppBar>
</ThemeProvider>
);
}
Resources:
https://material-ui.com/api/button/
https://material-ui.com/api/app-bar/
In my themes/variables.scss I have two color themes (dark and light):
/* LIGHT COLOR THEMES
========================================= */
/*$colors: (
primary: #ffffff,
secondary: #fafafa,
danger: #f53d3d,
light: #1b1e28,
sliderColor: #fff,
colorIcon: #CCCBDA,
colorIconText: #7F7E96,
category: #fff,
listBackgroundColor: #ffffff,
backgroundColor: #fafafa,
toobarBackground: #ffffff,
toobarButton: #AAB2B7,
toobarText: #FFFFFF
);*/
/* DARK COLOR THEMES
========================================= */
$colors: (
primary: #282C39,
secondary: #1b1e28,
danger: #f53d3d,
sliderColor: #fff,
light: #fff,
colorIcon: #7F7E96,
colorIconText: #7F7E96,
category: #fff,
listBackgroundColor: #1B1E28,
backgroundColor: #282C39,
toobarBackground: #1B1E28,
toobarButton: #D8D8D8,
toobarText: #FFFFFF
);
Right now I can only put one theme in my app. If I want to change the theme, I have to comment the one variable out and the other I have to remove the comments.
How can I using these two themes, change the theme dynamically in the app in typescript?
In every tutorial I see these --ion-color-primary but I do not have these --ion-color prepending
You can do this in a couple of ways. The main idea is that define your colors class. you can have for example -
// light theme
:root {
// define your light colors here
}
// dark theme
:root body.dark {
// define you dark colors here
}
So by default, the light theme will be applied, as the <body> of you application does not hold any class. Now to apply dark theme you just simply add class dark to the <body> of you application. For example, you can have a service for that which simply selects the body and adds the class to it. And remove it to go back to light theme.
import { Injectable } from '#angular/core';
#Injectable({
providedIn: 'root'
})
export class ThemeService {
constructor() { }
applyDark() {
document.querySelector('body').classList.add('dark');
}
removeDark() {
document.querySelector('body').classList.remove('dark');
}
}
By the way, I see you are using you own color variable. I've just given the example using the default ionic variables (from src/theme/variables.scss)
I am trying to use breakpoints with {withStyles} from "#material-ui/styles", but the debugger shows that theme.breakpoints is not defined.
I tried to wrap the component with ThemeProvider but it does not work.
https://codesandbox.io/s/material-demo-shgh7?from-embed
withStyles exported with #material-ui/styles not provide theme props, you'll use import { withStyles } from "#material-ui/core/styles";
Exemplo no code sand box arrumado ai
class app extends Component{
render(){
const {classes} = this.props
return (
<div className={classes.root}></div>
)
}
}
const style = theme => ({
root: {
[theme.breakpoints.up('sm'){ //only show on mobile or small screen
display: 'none'
},
}
})
export default withStyles(style)(app)