I've got a toolbar with a custom theme and I'm trying to figure out where it's picking up the contrast colour for the <md-icon> fill. Everything I've tried so far results in white icons on my custom blue toolbar.
Looking through the Material code, I found that the value is being filled in with {{primary-contrast}} but I can't find where that's being set.
Where should I look to configure the primary-contrast value for my palette?
md-toolbar.md-THEME_NAME-theme:not(.md-menu-toolbar) md-icon {
color: '{{primary-contrast}}'; fill: '{{primary-contrast}}';
}
My palette:
$mdThemingProvider.definePalette('myBlue', {
'50': 'e3e4e7',
'100': 'b9bcc3',
'200': '8b8f9b',
'300': '5c6272',
'400': '394154',
'500': '161f36',
'600': '131b30',
'700': '101729',
'800': '0c1222',
'900': '060a16',
'A100': 'b9bcc3',
'A200': '8b8f9b',
'A400': '394154',
'A700': '101729',
'contrastDefaultColor': 'light'
});
My theme:
$mdThemingProvider.theme('myMenu')
.primaryPalette('myBlue')
.backgroundPalette('myBlue')
.dark();
Primary contrast colors are fixed as black and white at 0.7 opacity. As far as I know you cannot change these. You can however inject your own custom css and get color values replaced by the theme.
https://material.angularjs.org/latest/api/service/$mdThemingProvider#custom-theme-styles
Related
How to change color of mat-spinner
i tried this but doesn't work
Html
<mat-spinner [color]="red" ></mat-spinner>
<mat-spinner [color]="#ffffff" ></mat-spinner>
This code worked for me :
scss
.mat-spinner-color::ng-deep circle{
stroke: #FFFFFF !important;
}
html
<mat-spinner [diameter]="25" class="mat-spinner-color"></mat-spinner>
The color property only accepts the values primary, accent and warning. These are colors that correspond to the Material Design theme used in your project.
<mat-spinner color="primary"></mat-spinner>
If you want to override this with a custom color add the following css:
.mat-progress-spinner circle, .mat-spinner circle {
stroke: /* color */
}
EDIT
Place the styles in the global style sheet, view encapsulation prevents the styles from working when placed in a component style sheet.
The color input accepts three values:
primary: The primary palette of your app
warn: The warn palette of your app
accent: The accent palette of your app
To use hex codes, you can only do it with CSS. I suggest you use the Chrome DevTools to see which CSS classes to target. Note that you should use the !important selector as well.
I am using the latest version of highstock.js (v5.0.14) and my custom styles (using CSS) are being usurped by inline fill attributes.
For example, this CSS:
.highcharts-color-0 {
fill: #2b908f;
stroke: #2b908f;
}
Is being overwritten by this HTML attribute:
<path fill="rgba(124,181,236,0.75)" ... />
I am looking to disable the fill attribute. Using !important does not work.
This problem came after I upgraded to v5.0.14 (previously using v5.0.9 where the "fill" attribute was not in use)
A more effective and durable way to change the default colors Highstock uses is by calling the function Highcharts.setOptions() (see http://api.highcharts.com/highstock/Highcharts.setOptions) and defining the colors there.
For example, you could do define your own colors as follows:
Highcharts.setOptions({
colors: [
'blue', /* first color chosen */
'red', /* second color chosen */
'#2b908f' /* third color chosen */
]
});
In this code, colors is an array of values.
Highstock will cycle through this array and use them for each series that is drawn on the chart. Using this example, the first series will plot with a fill color of blue, the second with red, and the third with the hex value #2b908f.
Place this code before you define your chart options so that it will inherit what you set.
I hope this helps!
I am converting all the charts in an application to Highcharts 5.x styled mode.
I cannot find how to make the solidgauge stops work in styled mode. When I inspect the SVG, I do not see any class for the colors.
I couldn't find any solidgauge stops example with styled mode.
Anyone can post a working example?
In a solid gauge series color is calculated dynamically based on stop values - currently, I do not think you can do the same with only css. The point fill atribute is calculated and set correctly but in this case css class takes precedence and the point's color has a fixed fill taken from the css file (highcharts-color-{n} class).
Keep stops in options and remove class from the point (or set colorIndex to a non existing number, e.g. 99)
.highcharts-color-0 {
fill: #7cb5ec; //remove fill attribute
stroke: #7cb5ec;
}
or:
data: [{y: 80, colorIndex: 99}], // the point's class will highcharts-color-99 now
example: http://jsfiddle.net/gj8zfw73/
I am using CorinTech's "Flies Thru the Air" software to monitor some wireless temperature data loggers. The data chart package they use is by HighCharts.
I would like to be able to change the background color of the chart from BLACK to WHITE as sometimes I have to print the chart in color and all of the black makes the paper soggy AND burns through ink needlessly.
Is there a way to change this ?
THanks, Steve
Yes, this is possible. See backgroundColor.
...
chart: {
backgroundColor: '#FCFFC5'
},
...
You would need access to the code page that is rendering the charts to modify the value this software is using. By default the color is white but this software has created a theme of some sort. So, to make it white you just delete the backgroundColor property.
I'd like to use $mdThemingProvider to universally configure all buttons on my site with a custom palette. I can manipulate the buttons' background color by configuring A200 and A700 in the palette. I would also like to change the default text color. I've jiggered with contrastDefaultColor, contrastLightColors, and contrastDarkColors but the best I've been able to do is get black or white text.
The following snippit will produce white buttons with dark text:
var lightGrey = $mdThemingProvider.extendPalette('grey', {
'A200': '#fefefe', // Element background color (default)
'A700': '#fefefe', // Element hover background color (default)
'contrastDefaultColor': 'dark',
'contrastLightColors': '600 700 800 900'
});
$mdThemingProvider.definePalette('light-grey', lightGrey);
$mdThemingProvider.theme('default')
// Accent palette controls buttons, links, etc
.accentPalette('light-grey');
Changing contrastDefaultColor to "light" causes the text to turn white.
I could manually achieve the effect I want by overriding the generated stylesheet's rules:
.md-button.md-default-theme.md-fab {
color: #bdc3c7;
}
...but I'm trying to use the tools provided in the library.
I don't know why you are facing this problem but by giving A200 & A700 the color you want to give will solve the problem. like this:
var lightGrey = $mdThemingProvider.extendPalette('grey', {
'A200': '#bdc3c7', // Element background color (default)
'A700': '#bdc3c7', // Element hover background color (default)
'contrastDefaultColor': 'dark',
'contrastLightColors': ['600', '700', '800', '900']
});
Note: Try to give contrast palette in array form.
And if you are facing some different problem please update or you can refer this link