If I import a colour from material ui as follows:
import blue from '#material-ui/core/colors/blue';
I can use it as follows for the colors in the palette that do not include "A":
const theme = createMuiTheme({
palette: {
primary: { main: blue[100] },
How can I access the colors that are prefixed with "A"?
For example, #82b1ff is in blue - with reference A100. When I try:
primary: { main: blue[A100] },
I get an error saying A100 is not defined.
What do I need to be able to use the colors that are defined with an A?
Related
I have trying to set a custom color to a FileDecorationProvider class, the color should be set to text. I have been using charts colors but that limits me to like 6 colors.
The below method works but I am limited to chart colors(like 6 of them)
async provideFileDecoration(uri: vscode.Uri): Promise<FileDecoration | undefined> {
if (uri.fsPath === '\\temp11') {
return {
color: new ThemeColor("charts.red")
};
}
return undefined;
}
But I would like to something like this:
return {
color: new ThemeColor("#0000ff")
};
Use HexCode to set a custom color.
The ThemeColor API only supports workbench colors (https://code.visualstudio.com/docs/getstarted/theme-color-reference), which means hex values are not allowed. And since provideFileDecoration only works with ThemeColor and not string, you won't be able to use hex values at all.
You could however, define a new color for your extension (via https://code.visualstudio.com/api/references/contribution-points#contributes.colors), so the end user will be allowed to define its own color, via hex values.
Hope this helps
As #alefragnani suggests, you can define a new color in the package.json like this:
"contributes": {
"colors": [
{
"id": "editorManager.treeItemTextForeground", // your custom name here
"description": "Color for a TreeIteem label", // your description
"defaults": {
"dark": "#00ccff", // your own defined colors, not just references to other exisiting themeColors
"light": "#00ccff",
"highContrast": "errorForeground" // you can also use existing color theme references here
}
}
]
}
and then use it wherever a themeColor is accepted:
color: new ThemeColor("editorManager.treeItemTextForeground")
The end user will also be able to modify that color in their settings colorCustomizations.
I would like to modify MUI Chip color and background color "globally" but using different colors than the ones defined in the same theme for severity.
This is what actually looks like (only by using theme defined severity colors):
This is how I want it to look:
It's actually possible to achieve that by using createTheme module or I need to take a different approach?
This is my attempt:
export const defaultTheme = createTheme(
{
palette: {
// Palette definitions
},
components: {
MuiChip: {
styleOverrides: {
root: {
severity: {
success: {
color: colors.success.main,
backgroundColor: colors.success.light,
},
// And so on with the remaining severity levels
},
},
},
},
},
},
);
If you want to modify the background color in the theme, you can add a name to the theme, I provide you with an example and let you try.
export const yourTheme = createTheme({
palette: {
successChip: {
contrastText: '#5ccc09',
main: '#eaf9e0',
},
rejectChip: {
contrastText: '#ff595d',
main: '#ffe9ea',
}
}
});
<Chip label="Professional" color="successChip"/>
<Chip label="Rejected" color="rejectChip"/>
And then you will get what you want it to look like.
inb4: I am totally new to material-ui.
Hi all,
I guess I have a bit of a weird question. I have a react application based on bootstrap and want to slowly migrate to material-ui.
Best case I can adapt the styling currently present for bootstrap in material-ui.
I started with adjusting the colors in the palette (createMuiTheme) and using this theme in every new component.
However, I can not figure out how to, for example, change the bg-color of a list item depending if it is odd or even numbered.
Also, can I change border-colors based on the theme? Do I need to use overrides for this? If so, is there a best-practice approach?
Apologies if this is documented somewhere.
Olli
edit:
my current theme looks like this:
const theme = createMuiTheme({
palette: {
primary: {
main: '#009afe' // primary color
},
secondary: {
main: '#1a4361' // secondary color
},
error: {
main: '#c72525' // error color
},
warning: {
main: '#f89406' // warning color
},
info: {
main: '#009afe' // primary color
},
success: {
main: '#3a8e3a' // success color
},
background: {
default: '#272b30', // third background color
paper: '#1c1e22', // third background color
secondary: '#272b30'
},
text: {
primary: '#c8c8c8', // primary text color
secondary: '#ffffff'
}
},
typography: {
fontSize: 20
},
overrides: {
MuiCssBaseline: {
'#global': {
html: {
WebkitFontSmoothing: 'auto'
}
}
}
}
I extended background to hold more values than one, but I honestly don't know if it's against the rules of material-design.
Figured it out (I guess). My question was not.... smart:
How I "solved" it:
const theme = createMuiTheme({
palette: [...]
typography: [...]
overrides: {
MuiListItem: {
root: {
backgroundColor: '#272b30' // primary bg color
},
button: {
'&:nth-child(odd)': {
backgroundColor: '#1c1e22' // third bg color
},
'&:nth-child(even)': {
backgroundColor: '#202429' // fourth bg color
},
'&:hover': {
backgroundColor: '#3e444c !important' // fifth bg color
}
}
}
}
});
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)
Simply need to use withStyles some how to edit the default color from the primary/error color to simply just use black. But since the update from 0.19.0 to beta 1 this doesn't seem possible now.
The error message (the one under the text input) is using the object under theme.palette.error (see source) to choose which color to use.
That same palette color is used for the text field label too.
If you want to change both at the same time the right approach would be to use a custom theme that rewrites the theme.palette.error to something else.
import { createMuiTheme, createPalette } from 'material-ui/styles';
import grey from 'material-ui/colors/grey';
const theme = createMuiTheme({
palette: createPalette({
error: grey
})
});
If you want to change just the FormHelperText color then you could customize it in theme by using the overrides parameter.
const theme = createMuiTheme({
overrides: {
MuiFormHelperText: {
error: {
color: 'black'
}
}
}
});
To change the Label of the TextField in the current version (v1.2.1)
You have to set the the color like this:
const theme = createMuiTheme({
palette: {
text: {
secundary: 'black'
}
}
}
});
for error the path is palette.error.main
the easiest way to find the right variables is to look directly into the code