I'm trying to figure out where the values in the theme "palette > common" are used around the Material UI framework?
common: {
black: "#f59042",
white: "#9a1fa3",
contrastThreshold: 3,
divider: "#ff0000"
},
Related
I wanted to apply style for Icon in Select component with "filled" variant and opened state. I'm using createMuiTheme. As I understand, I need to overwrite style, when Icon has two classes at once:
MuiSelect-iconFilled-32 MuiSelect-iconOpen-31.
I got:
MuiSelect: {
iconFilled: {
borderLeft: `1px solid ${colors.lightGray}`,
'&.MuiSelect-iconOpen': {
borderLeft: 'none',
},
},
},
&.MuiSelect-iconOpen doesn't work...
Here is a html representation of Select:
In TinyMCE v4.x we used the textcolor plugin which added a toolbar button for choosing the font color. Using the textcolor_map configuration property we could provide an array of specific colors.
TinyMCE v5 has moved this functionality into the default code. I can't find any documentation on if, and how we can customize the available colors.
This worked in tiny v4 using the textcolor plugin, but doesn't in v5:
textcolor_cols: 2,
textcolor_rows: 1,
textcolor_map: [
'363E47', 'Black',
'E74C3C', 'Red'
]
This function still exists in TinyMCE 5:
https://www.tiny.cloud/docs/configure/content-appearance/#color_map
For example:
tinymce.init({
selector: 'textarea', // change this value according to your HTML
toolbar: 'forecolor backcolor',
color_map: [
'FF0000', 'Red',
'FFFF00', 'Yellow',
'008000', 'Green',
'0000FF', 'Blue'
]
});
Here is a working TinyMCE Fiddle: https://fiddle.tiny.cloud/bAhaab
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?
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)
This question already has answers here:
Change color of characters surrounding comments in VS Code
(2 answers)
Closed 3 years ago.
I'm using Windows 10 64-bit.
I currently am overriding some settings for a theme I like, but noticed that the comma color I chose does not change the # from the theme as well:
{
"workbench.colorTheme": "Material Theme Darker High Contrast",
"editor.tokenColorCustomizations": {
"[Material Theme Darker High Contrast]": {
"comments": "#229977"
"types": "#f64343"
}
},
}
How could I change the # to be the same color as I set the comments itself?
If I understand your question the "comment definition" characters is in the theme "grey" and with your settings the comment text is now green.
To also color the "comment definition" characters add these to your settings
"workbench.colorTheme": "Material Theme Darker High Contrast",
"editor.tokenColorCustomizations": {
"[Material Theme Darker High Contrast]": {
"comments": "#229977",
"textMateRules": [
{ "scope":"punctuation.definition.comment",
"settings": {"foreground": "#229977"}
}
]
}
},
This is valid for JSON files and Python.
For which file type do you need the customisation? The rule names vary.