How to invert the colors of a mat-checkbox so that the border and check mark are colored and the rest transparent?
Creating a global style for a given class (outline) and adding that class to the mat-checkbox.
src/style.scss
#import '~#angular/material/theming';
#include mat-core();
$app-primary: mat-palette($mat-indigo);
$app-accent: mat-palette($mat-pink, A200, A100, A400);
$app-warn: mat-palette($mat-red);
$theme: mat-light-theme($app-primary, $app-accent);
#include angular-material-theme($theme);
$primary: mat-color($app-primary);
$accent: mat-color($app-accent);
$warn: mat-color($app-warn);
#mixin checkbox-color($color) {
.mat-checkbox-frame {
border-color: $color;
}
&.mat-checkbox-checked .mat-checkbox-checkmark-path {
stroke: $color !important;
}
}
mat-checkbox.mat-checkbox.outline {
.mat-checkbox-background {
background-color: transparent;
}
&.mat-primary {
#include checkbox-color($primary);
}
&.mat-warn {
#include checkbox-color($warn)
}
&.mat-accent {
#include checkbox-color($accent)
}
}
<mat-checkbox class="outline" color="primary"></mat-checkbox>
Example
Related
I am using Angular 13 and SCSS. I want to implement Dark Mode for my application. This is my current setup.
_variables.scss
$body-color: #f0f0f0;
:root {
--body-color: #{$body-color};
}
And everywhere in the application it is called like this,
.header {
background: var(--body-color) ;
}
Dark Mode Settings are in the _theme.scss file.
_theme.scss
#use '#angular/material' as mat;
#use 'variables' as v;
#import "~#angular/material/theming";
#include mat.core();
$angular-primary: mat.define-palette(mat.$teal-palette, 500, 100, 900);
$angular-accent: mat.define-palette(mat.$pink-palette, A200, A100, A400);
$angular-warn: mat.define-palette(mat.$red-palette);
$angular-default-theme: mat.define-light-theme(
(
color: (
primary: $angular-primary,
accent: $angular-accent,
warn: $angular-warn,
),
)
);
#include mat.all-component-themes($angular-default-theme);
$angular-dark-theme: mat.define-dark-theme(
(
color: (
primary: $angular-primary,
accent: $angular-accent,
warn: $angular-warn,
),
)
);
// $body-color: var(--body-color);
#mixin theme-check($dark-checker:null) {
#if $dark-checker == true {
--body-color: #2c2c2c;
}
#else {
--body-color: #f0f0f0;
}
}
$body-color: null;
.dark-mode {
#include theme-check(true);
$body-color: #2c2c2c;
#include mat.all-component-colors($angular-dark-theme);
// background-color: #2c2c2c !important;
// color: #fafafa !important;
transition: all 1s ease;
}
Whichever way I try I can't seem to set the body-color variable globally. Is there a way I can set it in the .dark-mode class once and it will be applied globally?
Finally figured it out and this is the method I am using,
styles.scss
...
#import "./assets/style_varients/themes";
...
_themes.scss
#use './dark-theme' as dark;
#use './light-theme' as light;
#mixin theme($theme) {
#if $theme == 'dark-mode' {
#include dark.color-mixin();
}
#else {
#include light.color-mixin();
}
}
.dark-mode {
#include dark.color-mixin();
transition: all 0.4s ease;
}
.light-mode {
#include light.color-mixin();
transition: all 0.4s ease;
}
:root {
.dark-mode {
--main-theme-variable: #{dark.$main-theme-variable};
}
.light-mode {
--main-theme-variable: #{light.$main-theme-variable};
}
}
_dark-theme.scss
#mixin color-mixin() {
$main-theme-variable: #262626 !global;
//=========== Main Background Color ===========//
background-color: #141515;
//=========== Main Text Color ===========//
color: #D6D6D6;
}
_light-theme.scss
#mixin color-mixin() {
$main-theme-variable: #FFF !global;
//=========== Main Background Color ===========//
background-color: #f0f0f0;
//=========== Main Text Color ===========//
color: black;
}
I need to change the colors theme of my app according to a parameter and it should be a very simple operation. In my app I use a Fuse angular material theme. When I try to switch from the primary to the secondary theme, the accent color of the dialog component does not change while the other components (for example the navigation bar) do.
_theme.scss
#import '~#angular/material/theming';
#import './component-themes';
$primary: mat-palette($mat-fusedark);
$accent: mat-palette($mat-light-blue, 600, 400, 700);
$warn: mat-palette($mat-red);
$white: mat-palette($mat-white);
$black: mat-palette($mat-black);
$first-theme: mat-light-theme($primary, $accent, $warn);
$background: map-get($first-theme, background);
$foreground: map-get($first-theme, foreground);
#include angular-material-theme($first-theme);
#include component-themes($first-theme);
$second-primary: mat-palette($mat-fusedark);
$second-accent: mat-palette($mat-green, 600, 400, 700);
$second-warn: mat-palette($mat-red);
$second-theme: mat-light-theme($second-primary, $second-accent, $second-warn);
.second-theme {
#include angular-material-theme($second-theme);
#include component-themes($second-theme);
}
component-theme.scss
#import "../partials/navigation";
#import "../partials/dialog";
#mixin component-themes($theme) {
#include navigation-theme($theme);
#include dialog-theme($theme);
}
_dialog.scss
#import '~#angular/material/theming';
#mixin dialog-theme($theme) {
$accent: map-get($theme, accent);
.dialog-wrapper {
.mat-dialog-container {
padding: 0;
overflow: hidden;
}
.mat-dialog-title {
display: flex;
flex: 1 1 auto;
justify-content: space-between;
margin: 0;
padding: 24px;
}
.mat-toolbar {
background-color: mat-color($accent) !important;
}
.mat-dialog-content {
padding: 16px 32px 0px;
margin: 0;
}
.mat-dialog-actions {
display: flex;
flex: 1 1 auto;
margin: 1px 0 0 0;
padding: 0px 32px 16px;
}
}
}
If I change in the _dialog.scss the value
background-color: mat-color($accent) !important;
into
background-color: green !important;
it works properly. It looks like mat-color($accent)does not work but only for the scss of this component.
For who runs into this problem, I have finally found a solution. I could not change the theme of some components because they are nested and the overlay container blocks the theme propagation. In order to fix it, I imported the overlayContainer and add the theme class into the overlayContainer in the ngOnInit method.
import {OverlayContainer} from '#angular/cdk/overlay';
constructor(
private overlayContainer: OverlayContainer
) {}
ngOnInit() {
if (this.data.theme === 'second-theme') {
this.overlayContainer.getContainerElement().classList.add(this.data.theme);
}
}
Very easy solution when you know what is the problem, the hard part was to find it out :)
I have the following scss file being imported into my Angular Project
#import '~#angular/material/theming';
#import "./mat-palette.scss";
#include mat-core();
$ombi-app-primary: mat-palette($ombi-primary, 500);
$ombi-app-accent : mat-palette($ombi-accent, A200, A100, A400);
$background: white;
$ombi-app-warn : mat-palette($mat-deep-orange);
$ombi-app-theme: mat-light-theme($ombi-app-primary, $ombi-app-accent, $ombi-app-warn);
#include angular-material-theme($ombi-app-theme);
// Define an alternate dark theme.
$ombi-dark-app-primary: mat-palette($mat-grey, 800);
$ombi-dark-app-accent: mat-palette($mat-amber, A200, A100, A400);
$ombi-dark-app-warn: mat-palette($mat-deep-orange);
$dark-theme: mat-dark-theme($ombi-dark-app-primary, $ombi-dark-app-accent, $ombi-dark-app-warn);
$primary: mat-color($ombi-app-primary);
$accent: mat-color($ombi-app-accent);
$warn: mat-color($ombi-app-warn);
.dark {
#include angular-material-theme($dark-theme);
$panel: mat-color(mat-palette($mat-grey, 800));
$primary: mat-color($ombi-dark-app-primary);
$accent: mat-color($ombi-dark-app-accent);
$warn: mat-color($ombi-dark-app-warn);
$background: #424242;
}
Now when the .dark class is applied to the body I expect it to apply the variables inside the .dark section above.
I am importing this file into other scss files so I can use the variables e.g. $background.
So when the .dark class is applied, it seems that $background is set to white and not #424242 and I cannot work out why.
Here is an example on how I am importing it:
#import "~styles/Styles.scss";
.details {
background: $background;
}
I tried to make the following code look fancier with an #each or a #for loop (without any usable result).
.btn[data-btn-color="black"] {
#include colored-btn($black);
}
.btn[data-btn-color="blue"] {
#include colored-btn($blue);
}
.btn[data-btn-color="red"] {
#include colored-btn($red);
}
// ... and more colors ...
My current approach is to take value from the variable to use it as the value for the data-btn-color attribute and put that snippet into an #each loop.
Something like
#each $color in ($black, $blue) {
#include colored-btn($color);
}
which compiles into:
.btn[data-btn-color="black"] {
background-color: #000; // $black
}
.btn[data-btn-color="blue"] {
background-color: #00f; // $blue
}
Is there any function, which allows me to do such a thing?
You were so close! You don't want the () around what you want to go through in #each. I think Sass would just see what you have as one list item with a two item list inside.
Here is what I think you're trying to do:
$red: #f00;
$blue: #00f;
$black: #000;
$colors: red $red, blue $blue, black $black;
#mixin colored-button($background-color: #000){
background-color: $background-color;
}
#each $color in $colors {
$name: nth($color, 1);
$hex: nth($color, 2);
.btn[data-btn-color="#{$name}"]{
#include colored-button($hex);
}
}
Which would result in:
.btn[data-btn-color="red"] {
background-color: red; }
.btn[data-btn-color="blue"] {
background-color: blue; }
.btn[data-btn-color="black"] {
background-color: black; }
I have the below sass. In it I am have several charx classes, where x is between 1...7. is it possible to define them in a more concise way instead of defining each one of them individually ?
$first-color: #666666;
$second-color: #0066CC;
#mixin letter($color){
color: $color;
}
.char1{
#include letter($first-color);
}
.char2{
#include letter($second-color);
}
.char3{
#include letter($first-color);
}
.char4{
#include letter($second-color);
}
.char5{
#include letter($first-color);
}
.char6{
#include letter($second-color);
}
.char7{
#include letter($first-color);
}
You could possibly achieve the same effect with plain CSS:
$first-color: red;
$second-color: salmon;
span:nth-of-type(2n-1) {
color: $first-color;
}
span:nth-of-type(2n) {
color: $second-color;
}
Alternatively, your could use the #while directive:
$i: 1;
#while $i <= 7 {
.char#{$i}{
#include letter($first-color);
}
.char#{$i+1}{
#include letter($second-color);
}
$i: $i + 2;
}
Why don't you just use even and odd rules?
Like so you will be able to add infinite elements without touching your css every time.
$first-color: #666666;
$second-color: #0066CC;
#mixin letter($color){
color: $color;
}
.chars div:nth-child(even){
#include letter($first-color);
}
.chars div:nth-child(odd){
#include letter($second-color);
}
Here's an example on my Codepen.