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"
Related
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?
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'm trying to use Angular Material color intention classes like md-primary on normal HTML elements as below:
<span class="md-primary">This text is in primary color.</span>
But this is not working. I assume that it is because during rendering, Angular applies color intention classes only to the ngMaterial directives.
Am I correct in this explanation? And if so, is there a workaround for this, apart from creating my own CSS classes?
The class color only will work on the Material elements, but there's a work around:
Just pick the color hex from the Google Material Site http://www.google.com/design/spec/style/color.html#color-color-palette
Sample:
<span style="color: #2196F3"> Material Blue Color</span>
There are CSS/LESS palettes around, if you don't want to pick all these colors. http://zavoloklom.github.io/material-design-color-palette/
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
How can I create a theme for a dialog box?
I was trying to change the border style of the dialog box but the border style applies 2 times for an inner element and for an outer element. I was expected that the border style applies only to the inner element.
To be clearer, as I cannot add image to my post, it seems that the dialog does not consist only from the center box which is showed while dialog is active. The dialog UI consists from a “background form” which usually is transparent and from a container which overlay over the background form. The last mentioned container contains de graphic representation of the “dialog box”.
My issue is that I can not apply my style only to the container which contains the dialog box but the style applies also to the background form.
How can I apply the border style only to the dialog box container element?
Any additional tips will be highly appreciated.
Thanks.
How are you applying the style? Are you using the theme to apply a style to the Dialog UIID as explained here.
Using setStyle or getStyle on a dialog component would be problematic and would not result in proper styling (you might get away with doing it on getDialogComponent but you should work with the theme).
Notice that to style a dialog you should use Dialog, DialogTitle & DialogBody UIID's and quite a few theme constants.
Thanks Shai,
is clear now.
I’m doing a custom dialog starting from the BlankDialog element provided in designer.
Because I started from BlankDialog I thought that overriding only UIID theme is enough.
I understood the BlankDialog structure wrongly thinking that is a simple empty form because is named "Blank…"
Is clear now that for every new UI object added, I should check if it has any other UI child to be customized together with the parent.
Thanks again.