Angular Material Documentation for theming states the following to extend an existing palette for custom theming-
var neonRedMap = $mdThemingProvider.extendPalette('red', {
'500': '#ff0000',
'contrastDefaultColor': 'dark'
});
In this, if i want to specify which color i want as the contrast using
'contrastLightColors': ['800']
is it possible? Doesn't seem to be working at all. Just defaults to black on giving contrastDefaultColor.
Is defining a whole new custom palette for this the only option?
I can't exactly use color css property since there are icons also that need to take that color. All those icons are web components (Angular 1.5x) so i want a centralised control over the colors.
What should i do?
Related
The MUI documentation says it only exposes some selected palette colors to override and colors like action and text etc. are not part of it.
Is there any way one can override it at the theme level?
I tried overriding them like other palette colors but it isn't helping
I am using css-modules with react-md (https://react-md.mlaursen.com/) in my project.
I have included dark theme-
#import '~react-md/src/scss/react-md';
$md-light-theme: false;
$md-primary-color: $md-light-blue-500;
$md-secondary-color: $md-deep-orange-a-200;
#include react-md-everything;
This applies the dark theme quite well on my web pages.
Now, my requirement is to be able to customize certain components like applying a background color to Card component, making all text certain color etc. How can this be done, please advise?
Is there any way to achieve different background colors for different themes?
I have for a default theme:
.backgroundPalette('brown')
but for this situations all other small elements for example datepicker gets this brown background.
For only some elements works method when I declared a new theme for elements
$mdThemingProvider
.theme('elements')
.backgroundPalette('grey');
and use them for specific element as
md-theme="elements"
Is there any way to access theme colors in Sass files. For example, I want to set my text color to the primary color. This is my attempt, which does not work:
.task-duedate {
color: $md-primary;
}
Material Design best practices suggests that one should use white or black as a text(body-content) color which will be done by default using angularJS Material Design Library. For links you can use flat buttons.
I have created a custom theme for my application. The base color of the theme is white. I have a tabpanel on one of my view. There are almost 15 tabs on that view. Not all the tabs can be visible at the same time therefore scrollers are added by default for navigation between tabs at left and right. The issue is the color of the scrollers. With neptune or any other default theme these scrollers are clearly visible but with the custom theme they are plain white. User can't even know that there are srollers there. The scroller image is also not visible. Can someone specify the SAAS variables that configures the scroller appearance? $panel-tool-background-image: 'tools/tool-sprites' or $panel-tool-background-image: 'tools/tool-sprites-dark' do not work either.
The documentation should provide what you need ("CSS Variables" section). There are a few relating to the scroller.
http://ext5-docs.site/#!/api/Ext.tab.Panel
You could also look at using the extjs-tab-panel-ui mixin to create a custom ui for your tab panel:
http://docs.sencha.com/extjs/5.0/core_concepts/theming.html#Creating_Custom_Component_UIs