I'm struggling with something in my Angular 5.x app, and hope someone can help...
I've got a component that has a mat-raised-button, and currently I've got some styling for it within the component's SCSS file:
button-themed {
background-color: black;
color: white;
border-color: red;
border-style: solid;
border-width: 1px;}
Everything looks fine that way. However, I now want to shift that styling up to some theme SCSS files I'm working on. How can I get the styling to apply when it's in my "red-theme.scss" or "blue-theme.scss" files?
(I'm looking to be able to dynamically swap between themes and want the button to adjust according to the theme)
UPDATE
I kicked the tires some more on custom theming, and am getting nowhere. What am I missing? Below is some quick test stuff I tossed together (I'm simply trying to get the button's border to change color so I can see that the process works).
settings.component.scss:
.test-button {
border-style: solid;
border-width: 1px;
}
settings.theme.scss:
#mixin test-theme($theme) {
$primary: map-get($theme, primary);
$warn: map-get($theme, warn);
.test-button {
background-color: mat-color($primary);
color: mat-color($warn);
border-color: mat-color($warn);
}
}
settings.component.html:
<button mat-raised-button class="test-button">TEST</button>
red-theme.scss:
$test-primary: mat-palette($mat-pink, 800, 300, 900);
$test-accent: mat-palette($mat-pink);
$test-warn: mat-palette($mat-indigo, 600);
$test-theme: mat-light-theme($test-primary, $test-accent, $test-warn);
styles.scss:
#import '~#angular/material/theming';
#import 'themes/color-palettes.scss';
#include mat-core();
#import 'app/pages/settings/settings.theme.scss';
#mixin custom-components-theme($theme) {
#include test-theme($theme);
}
#import 'themes/red-theme.scss';
.red-theme {
#include angular-material-theme($test-theme);
}
It compiles and my button displays, but there's no color change to the button's border (even though other Material components have changed color on the page). Can anyone help nudge me in the right direction?
One of those "argh!" moments, but I thought I'd post this as an answer in case anyone stumbles upon this post... The custom component mixin is the way I'm going at this point in time. I'm hopeful I can figure out all the other items I'll have to custom theme.
The reason my first test (shown in my original post) didn't work is because I forgot to add the line to actually import my custom component theme within styles.scss:
.red-theme {
#include angular-material-theme($test-theme);
#include custom-components-theme($test-theme);
}
How about something like this in your components?
:host-context(.theme-light) p {
background-color: white;
}
:host-context(.theme-dark) p {
background-color: black;
}
Related
I have implemented Angular Material Dark and Light theme. With this I can change the colors based on the theme using for example mat-color($primary). This works fine but now I need to use a different color altogether. So instead of the primary color with hue 200 in light theme: mat-color($primary, 200), I want to be able to use primary color with an 800 hue in dark theme mat-color($primary, 800).
data-table-theme.scss
#mixin data-table-color($color-config) {
$primary: map-get($color-config, primary);
.data-table {
background-color: mat-color($primary, 200);
}
}
data-table.html
<div class="page-container mat-app-background"
[ngClass]="(isDarkTheme$ | async) ? 'theme-dark' : 'theme-default'">
<div class="data-table"></div>
</div>
I tried adding theme-dark selector in custom component style but that didn't work.
#mixin data-table-color($color-config) {
$primary: map-get($color-config, primary);
.theme-default .data-table {
background-color: mat-color($primary, 200);
}
.theme-dark .data-table {
background-color: mat-color($primary, 800);
}
}
I look forward to hearing your solutions.
Edit
The solution I tried doesn't work because angular material generates the css at compile time. So it will then create:
.theme-default .data-table {
background-color: #c5cae9;
}
.theme-dark .data-table {
background-color: #1a237e;
}
.theme-dark .theme-dark .data-table {
background-color: #ff6f00;
}
.theme-dark .theme-default .data-table {
background-color: #ffecb3;
}
This causes it to change hue but the color used is the light primary color.
I have uploaded a test project to Stackblitz, which unfortunately doesn't compile some of the angular material dependencies. But if you run it locally you will see what I mean.
https://stackblitz.com/github/kdrpt/angular-test-project
Have you added the include statement for you mixin in your scss file?
#include data-table-color($color-config);
Just add the above statement in your scss file (where you have defined your #mixin data-table-color) and pass the $color-config that you have created. It is working fine for me.
Looking in your stackblitz example, it seems you forgot to import your app.theme.scss in the root styles.scss.
#import 'theme/app-theme.scss';
I'm trying to update Radio Button colors of an ant design radio mentioned in this link in my REACT App.
I tried using the suggestion in this post to update the colors.
But my colors are not updating. I am not sure what I'm doing incorrectly here.
Also, Its a REACT project and my package.json has a dependency for "antd": "^4.5.0"
and the import for antd.css exists in app.tsx like this
// Global styles
import "antd/dist/antd.css";
This is a code I have in one of the component files of the project.
File name: MyRadio.tsx
import { Radio } from "antd";
import styles from "./mystyles.module.scss";
return (
<Radio.Group
className={styles.toggle}
>
<Radio id="RDC" value="C">
C
</Radio>
<Radio id="RDI" value="I">
I
</Radio>
</Radio.Group>
);
Here is how mystyles.module.scss looks like:
.toggle {
width: 244px;
background: #ffffff;
border: 1px solid #d9d9d9;
box-sizing: border-box;
display: flex;
align-items: center;
float: left;
}
/* Followed suggestion from other post but didnt see colors updating, when I un-comment the following code
.ant-radio-checked .ant-radio-inner {
border-color: red !important ;
}
.ant-radio-checked .ant-radio-inner:after {
background-color: red;
}
.ant-radio:hover .ant-radio-inner {
border-color: red;
}
*/
Update 1
You need to override the below classes. It should work. Use !important only if your css is overridden by the existing classes.
You need to import "antd/dist/antd.css"; to get these in the console and then override the css
https://codesandbox.io/s/nameless-dream-4ojr4
.ant-radio-inner:after {
background: red !important;
}
.ant-radio-checked .ant-radio-inner,
.ant-radio:hover .ant-radio-inner,
.ant-radio-wrapper:hover,
.ant-radio-input:focus .ant-radio-inner {
border-color: red !important;
}
Edit - Included the codesandbox link and the hover css
I can not write comment (too low reputation), so i will write an "answer". You can try to change theme of ant-design https://ant.design/docs/react/customize-theme (This default blue color is primary one). However it requires some changes and new color will be applied globally, so its not too good for existing big projects.
I'm styling https://github.com/material-components/material-components-web to fit to the respective angular material design components https://material.angular.io/components/categories.
Since I'm new to Sass, I'm no quite sure if I'm doing that the correct way.
Example:
I'm trying to change the text input so, that it doesn't have a background when it's highlighted + no background color at all + no padding to the left.
Right now my code for this looks like this:
app.scss
#import "styles/theming";
$mdc-text-field-background: transparent;
#import "~material-components-web/material-components-web";
#import "styles/inputs";
inputs.scss
.mdc-text-field::before, .mdc-text-field::after {
content: none;
}
.mdc-text-field .mdc-floating-label {
left: 0;
}
.mdc-text-field__input {
padding: 20px 0 6px;
}
The problem here is, that I need to set $mdc-text-field-background before importing material-components-web, but setting the other input styles afterwards.
Is there a better way to do this?
I'm trying to change the style of the md-dialog.
in my main.scss i'm importing the prebuild pink-bluegrey theme...
then in my component I import the following -->
#import "#angular/material/dialog/dialog.scss";
$mat-dialog-padding: 0;
$mat-dialog-border-radius: 0.5rem;
$background: #ffffff;
#mixin mat-dialog-container {
padding: $mat-dialog-padding;
border-radius: $mat-dialog-border-radius;
background: $background;
}
#include mat-dialog-container;
The padding and border radius is correctly applied to the dialog window.
But the background is not working... also tried the !important statement.
I'm using this in a single component...
Is there also a change to apply those styles globally?
in chrome dev tools I see those applied style changes. The background gets overwritten by the pink-bluegrey theme..
hope anyone can help.
thanks
It is better practice to add a wrapper class around your dialog, and then add styling to the children. Have a look at this article for more information.
When you open your Angular dialog, you can add a panelClass
attribute, like this:
this.dialog.open(MyDialogComponent, {panelClass: 'my-panel'}).
then, in your css (e.g. in the root styles.css file), you can add the following:
.my-panel .mat-dialog-container {
overflow: hidden;
border-radius: 5px;
padding: 5px;
}
EDIT Warning
It is also possible to add the css to another file than the root styles.css, but then you have to use ::ng-deep in the css (e.g. ::ng-deep .my-panel{ // ... }). This is not advised, as ::ng-deep is deprecated in Angular
EDIT2 Good alternative
If you are using scss, then you can place your .my-panel-style in your mydialog.component.scss file, by using a #mixin, and #import the file in styles.scss. You can then use #include to load the defined mixin.
in your mydialog.component.scss file
#mixin myPanel(){
.my-panel .mat-dialog-container {
// css here
}
}
in your styles.scss
#import 'path/to/mydialog.component.scss' // you don't need the .scss suffix
#include myPanel();
I solved this problem by including this css block in the end of file material2-app-theme.scss
.mat-dialog-container {
overflow: hidden !important;
border-radius: 5px !important;
padding: 5px !important;
}
can you use css then change background in mat dilog, at i used color transparent
mat-dialog-container {
padding: 0px !important;
background: transparent !important;
}
I don't know how to better name this topic
but idea is the following. I want to show different color for a component depends on a parent class.
for this project I use webpack, vue, vue-loader, sass.
I have a sass file this file contents all settings for pages what color should use for specific page
$colors: ".page-home" blue, ".page-about" green;
#each $i in $colors {
$page: nth($i, 1);
$color: nth($i, 2);
#{$page} .component_1, .component_2, .component_n {
color: $color;
}
}
I have a component is written as vue component
#import "colors";
.compoent_1 {
border:1px solid black
}
A issue is I have a lot of components and it very difficult to support the colors file in consistency. When I want to add a new component or remove an old one I always have to go to this file and edit it is annoying me
So how I see the solution is create a main file.
.page-home:blue;
.page-about: green;
I'd like write components in the following style
.component {
border:1px solid black;
color: $PAGE_COLOR;
}
and this code should generate
.page-home .component_1, .component_2, .component_n {
color: blue;
}
.page-about .component_1, .component_2, .component_n {
color: green;
}
thats all. thanks for any suggestion