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
Related
I am working within Google Earth Engine and am trying to create a no-color/completely transparent color (no boarder and no fill). Below is a line of code where the first color should be the transparent "color". Basically I want my min value to not show up in the map at all.
Map.addLayer(image, {min: 0, max: 3, palette: [transparent, '#0571b0', '#FFDF00', '#ca0020']},'image');
I have tried creating a variable to set a color as completely transparent (change the opacity to 0), but the palette command cannot take variables. Only strings. I've also read SVG fill color transparency, but do not understand how to change the opacity of that specific color without creating a variable (which again, palette doesn't allow). Lastly, I tried adding 00 to the end of another color, but that did not work either.
Any suggestions?
Update:
I was never able to find a solution to this and ended up just going with a white back ground. It was purely for a nicer aesthetic look to allow a basemap to be seen. If I ever come across a solution, I'll be sure to post it.
I had the same question. I found the solution in the developer group.
See the answers: https://groups.google.com/g/google-earth-engine-developers/c/WcxtEIzudxw/m/GscOlsQhDgAJ
The Solution:
// create your previous mask
image = image.eq(1)
// mask and set the opacity
image = image.mask(image.mask().where(image.eq(0),0.0))
Is there any way to skip a particular color in whole app when device is in smart invert mode of accessibility?
I don't want the blue color in my app to be inverted. I have am image which have black and blue color text in it. I want the black color text to be inverted but want to skip blue color.
Any help would be appreciated.
P.S -I am familiar with accessibilityIgnoresInvertColors. But this property can be applied on uiview or object but i need to skip a color.
do it inside the appcolor constant file :- you can check UIAccessibilityIsInvertColorsEnabled() if its true then return clear color else reurn the blue color.
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
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'm working on highcharts , can anyone tell how to change color of points on the line graph ? by default it gives blue color for first , maron for second n so on. but i want to aaply custom colors. is there any function to change color manually ?
You can change line color of graph by setting lineColor property. By default the line takes the color of the series from global configuration array of colors. Check this link for global array of colors. http://api.highcharts.com/highcharts#colors
For setting lineColor separately check this :
http://api.highcharts.com/highcharts#plotOptions.area.lineColor