I finally decided to create a post as I'm searching since more than one week where my error.
I'm moving my ionic3 project to ionic6. And I have a Sass error occuring :
ERROR in ./src/theme/common.scss
(./node_modules/css-loader/dist/cjs.js
??ref--13-1!./node_modules/postcss-loader/src
??embedded!./node_modules/sass-loader/dist/cjs.js
??ref--13-3!./src/theme/common.scss)
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: (primary: #387ef5, secondary: #ae75e7, danger: #f4344f, light: #f4f4f4,
dark: #222, favorite: #ffaab6, walkthrough: (base: #132d59, contrast: #FFFFFF),
walkthrough-alt: (base: #ae75e7, contrast: #FFFFFF), walkthrough-header: (base: transparent, contrast: #FFFFFF),
header: (base: #132d59, contrast: #FFFFFF), header-alt: (base: #ae75e7, contrast: #FFFFFF),
button: (base: #132d59, contrast: #FFFFFF), button-alt: (base: #ae75e7, contrast: #FFFFFF),
background: (base: #e0e0e0, contrast: rgba(51, 51, 51, 0.8)), tabs-navigation: (base: #FFFFFF,
contrast: #c2c2c2)) isn't a valid CSS value.
╷
5 │ background-color: color($colors, background, base);
│ ^^^^^^^
╵
src/theme/common/side-menu.scss 5:27
Here the line the side-menu.scss
.menu-content
{
background-color: color($colors, background, base);
}
Here is the $colors variable
$colors: (
primary: #387ef5,
secondary: #ae75e7,
danger: #f4344f,
light: #f4f4f4,
dark: #222,
favorite: rgb(255, 170, 182),
walkthrough:( base: $theme-color-1, contrast: $white ),
walkthrough-alt:( base: $theme-color-2, contrast: $white ),
walkthrough-header:(base: transparent, contrast: $white ),
header:( base: $theme-color-1, contrast: $white ),
header-alt:( base: $theme-color-2, contrast: $white ),
button:( base: $theme-color-1, contrast: $white ),
button-alt:( base: $theme-color-2, contrast: $white ),
background:( base: $white-c, contrast: $black-b ),
tabs-navigation:( base: $white, contrast: $white-d )
);
Here is the color function
#function color($map, $color-name: 'background', $color-key: null) {
$color-value: map-get($map, $color-name);
// If we were given a map we need to grab the value
// of the key that is passed or the base key
#if(type-of($color-value) == "map") {
#if($color-key) {
$color-value: map-fetch($map, $color-name, $color-key);
} #else {
$color-value: map-fetch($map, $color-name, base);
}
}
#if (type-of($color-value) == color) {
#return $color-value;
}
#return color-error($color-value, $color-name);
}
#function map-fetch($map, $keys...) {
#each $key in $keys {
$map: map-get($map, $key);
}
#return $map;
}
Please help me out find my error
Try as following:
theme folder:
:root {
/** primary **/
--ion-color-primary: #3880ff;
}
Then your CSS:
background-color: var(--ion-color-primary);
Goodluck!
Related
How to change the color of a border of a mat-form-field ? (The border when the field is selected)
thx ^^
screen
.search {
display: flex;
justify-content: center;
margin-top: 1%;
mat-form-field {
width: 70%;
}
}
<form class="search">
<mat-form-field appearance="outline">
<mat-label>Search</mat-label>
<input matInput>
<mat-icon matSuffix>search</mat-icon>
</mat-form-field>
</form>
The proper way to do it is to define a new theme for the form field. A theme consists of a primary palette, a secondary palette, and an optional warning palette, which defaults to red.
There are a number of pre-defined palettes located in node_modules/#angular/material/core/theming, but you can also define your own.
In the below example I give all form fields under the search class an orange and yellow theme.
#use "#angular/material" as mat;
$my-primary: mat.define-palette(mat.$orange-palette);
$my-accent: mat.define-palette(mat.$yellow-palette);
$my-theme: mat.define-light-theme(
(
color: (
primary: $my-primary,
accent: $my-accent,
),
)
);
.search {
#include mat.form-field-theme($my-theme);
}
This line: #include mat.form-field-theme($my-theme); returns all of the necessary css to change the theme of a form field. There is one of these functions for every Material component, you can see them being exported in node_modules/#angular/material/_index.scss
Note: this scss needs to be global so you need to put it in a global style file like styles.scss.
Alternatively you can make the component's scss global by disabling View Encapsulation.
#Component({
...
encapsulation: ViewEncapsulation.None,
})
export class MyComponent {
...
}
More info: https://material.angular.io/guide/theming
As a quick hack, you could also override the css like so:
Just the border
.search
.mat-form-field-appearance-outline.mat-focused
.mat-form-field-outline-thick {
color: red;
}
Label as well
.search {
.mat-form-field-appearance-outline.mat-focused .mat-form-field-outline-thick {
color: red;
}
.mat-form-field.mat-focused .mat-form-field-label {
color: red;
}
}
The devs don't recommend overriding css like this since it is prone to break in later versions: https://material.angular.io/guide/customizing-component-styles
Wow!
Thanks very much :)
I defined my own color palette here is my code ^^
style.scss
#use '#angular/material' as mat;
html {
height: 100%;
body {
height: 100%;
margin: 0;
font-family: Roboto, "Helvetica Neue", sans-serif;
}
}
$dark-primary-text: rgba(black, 0.87);
$light-primary-text: white;
$app-palette: (
50: #E0E0E0,
100: #B3B3B3,
200: #808080,
300: #4D4D4D,
400: #262626,
500: #000000,
600: #000000,
700: #000000,
800: #000000,
900: #000000,
A100: #A6A6A6,
A200: #8C8C8C,
A400: #737373,
A700: #666666,
contrast: (
50: $dark-primary-text,
100: $dark-primary-text,
200: $dark-primary-text,
300: $dark-primary-text,
400: $dark-primary-text,
500: $light-primary-text,
600: $light-primary-text,
700: $light-primary-text,
800: $light-primary-text,
900: $light-primary-text,
A100: $dark-primary-text,
A200: $light-primary-text,
A400: $light-primary-text,
A700: $light-primary-text,
)
);
$my-primary: mat.define-palette($app-palette);
$my-accent: mat.define-palette($app-palette);
$my-theme: mat.define-light-theme(
(
color: (
primary: $my-primary,
accent: $my-accent,
),
)
);
.search {
#include mat.form-field-theme($my-theme);
}
I have a simple sass map with colors. I loop through it and generate css vars. Works great so far.
$colors: (
primary: red,
secondary: blue,
)
#each $color, $value in $colors {
--#{$color}: #{$value};
}
Then I extended this map with themes. There I loop through again per theme and create the css vars. This also works great.
$colors2: (
theme-1: (
primary: red,
secondary: blue,
),
theme-2: (
primary: yellow,
secondary: pink,
)
)
#each $theme, $colors in $colors2 {
&[data-theme="#{$theme}"] {
#each $color, $value in $colors {
--#{$color}: #{$value};
}
}
}
But now I need to find a way to combine the two. Unfortunately I haven't found a way so far to loop through the following list, create the individual css vars and the data-attributes + css vars.
$colors3: (
primary: green,
secondary: purple,
theme-1: (
primary: red,
secondary: blue,
),
theme-2: (
primary: yellow,
secondary: pink,
)
)
Does anyone of you maybe have an idea how I can do this? In the end something like this should come out:
:root {
--color-primary: green;
--color-secondary: purple;
&[data-theme="theme-1"] {
--color-primary: red;
--color-secondary: blue;
}
&[data-theme="theme-2"] {
--color-primary: yellow;
--color-secondary: pink;
}
}
Thank you very much for your help!
Kind regards
Marco
i found a way to get it to work :)
here is my solution just in case, someone else needs it.
:root {
#each $key, $value in $colors {
#if type-of($value) == map {
&[data-theme="#{$key}"] {
#each $theme-key, $theme-value in $value {
--color-#{$theme-key}: #{$theme-value};
}
}
} #else {
--color-#{$key}: #{$value};
}
}
}
This is my mixins for themes color
$themes: (
light: (
black-color: black,
),
dark: (
black-color: rgb(235, 13, 161),
)
);
#mixin themify($themes) {
#each $theme, $map in $themes {
.theme-#{$theme} & {
$theme-map: () !global;
#each $key, $submap in $map {
$value: map-get(map-get($themes, $theme), '#{$key}');
$theme-map: map-merge($theme-map, ($key: $value)) !global;
}
#content;
$theme-map: null !global;
}
}
}
#function themed($key) {
#return map-get($theme-map, $key);
}
This is my class where i am appending property with variables
.overlay {
#include themify($themes) {
background-color: themed(black-color, .5);
box-shadow: 1px 1px 1px themed(black-color, .5);
}
}
But opacity not working and following error getting
Sass Error: Only 1 argument allowed, but 2 were passed.
If you don't use the black-color anywhere else you could try redefining them as:
$themes: (
light: (
black-color: rgba(0, 0, 0, 0.5),
),
dark: (
black-color: rgba(235, 13, 161, 0.5),
)
);
SCSS
$colors: (
primary: red,
secondary: blue,
accent: #ddd,
) !default;
$colors: (
primary: green,
secondary: purple,
black: #000,
white: #fff,
);
#each $color, $value in $colors {
.alert-#{$color} {
color: $value;
}
}
Result
.alert-primary {
color: green;
}
.alert-secondary {
color: purple;
}
.alert-black {
color: #000;
}
.alert-white {
color: #fff;
}
I wanted to create a SASS framework something like bootstrap. Wanted to override theme colors. How can i merge these maps to get something like this? I want a simple solution.
Expected result
.alert-accent {
color: #ddd;
}
.alert-primary {
color: green;
}
.alert-secondary {
color: purple;
}
.alert-black {
color: #000;
}
.alert-white {
color: #fff;
}
You can use map-merge:
$colors: map-merge($colors, (
primary: green,
secondary: purple,
black: #000,
white: #fff
));
From the documentation, this function:
Returns a new map with all the keys and values from both $map1 and $map2.
This can also be used to add a new value or overrwrite a value in $map1, by passing a single key/value pair as $map2.
If both $map1 and $map2 have the same key, $map2’s value takes precedence.
I have this in my SASS:
$colors: (
primary: #f6861f,
secondary: #32db64,
danger: #f53d3d,
light: #f4f4f4,
dark: #222
);
If I use
.menu-inner .scroll-content{
background: $colors['primary'];
}
it doesn't work. How do I refer to primary inside my $colors array?
Your syntax isn't quite right - you can't use C-style associative arrays with SASS; you need to use the map-get function instead.
In your example, to access the primary colour you would do this:
.menu-inner .scroll-content {
background: map-get($colors, primary);
}
There's some more info on SASS maps in these articles.