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.
Related
How to configure highlighting of custom/react components in JSX (render block)?
I want to configure editor color for <Home /> component in this example. Is it possible?
No, it's not currently possible.
Related feature requests: WEB-21035, WEB-330
As of PhpStorm 2022.3 Beta (EAP), the highlighting for React components differs from other elements in JSX for most color schemes by default.
This is how it looks in Darcula color scheme that you use:
And this is how it looks in IntelliJ Light color scheme (my preferred scheme):
If you don't like the default color, you can customize it in Settings (Ctrl+Alt+S) > Editor > Color Scheme > XML, select "Custom Tag Name" and change the Foreground color:
If Foreground and other options are disabled, you need to uncheck the "Inherit values from:" checkbox below these options.
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?
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 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"
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/