How to use CSS variable in global CSS file
Just check style.css file in stackblitz
https://stackblitz.com/edit/angular-themeing-y3jwrk?file=src/styles.css
in the global css file, styles.css, I have this code:
import ...
:root {
--main-color: #3f51b5;
}
it declares a css variable, "main-color"
then in the child component css file, I can use the variable directly
#component-body {
background: var(--main-color);
}
In the global style.css file, define custom properties in a :root selector.
Global variables in CSS will enable us to define theme variables such that multiple components can use the same.
Here you go:
app/style.css
:root {
--primary-color: #fff;
--background-color: #e5e5e5;
--text-color: #2d2d2d;
}
To define a CSS custom property,prefix the property with two '--' like --text-color:#2d2d2d.
Now we can reference the variable in other CSS files.To use a custom property, use the var keyword to pass in a reference to the custom property.
app/header/header.component.css
:host {
background-color: var(--primary-color);
color: var(--text-color);
}
Related
I have code like this:
<theme-component theme="dark">
<my-component></my-component>
</theme-component>
Is it possible for my-component to know it is within theme-component with a theme of dark? Or do I also need to pass theme=dark manually into my-component?
my-component has styles defined like this:
static darkStyle = css`
:host {
--my-bkg: #535353;
--my-items: #474747;
--my-gutter: #4a4a4a;
--my-border: #474747;
--my-item-border: #535353; /* on dark themes only this is the same color as the background instead of the footer border */
--my-divider: #636363;
}
`;
static lightStyle = css`
:host {
--my-bkg: #b8b8b8;
--my-items: #c7c7c7;
--my-gutter: #ababab;
--my-border: #adadad;
--my-item-border: #adadad; /* on light themes only this is the same color as the footer border */
--my-divider: #9e9e9e;
}
`;
static styles = [this.darkStyle, sheet];
I would love to have some kind of ternary to switch between this.darkStyle or this.lightStyle. Or is there some kind of CSS I can write that is like
static styles = [css`
theme-component[theme=dark] :root {
--my-bkg: #535353;
}
`, sheet];
I see documentation about SuperElement.styles, but it's not clear to me how to use that when I am relying on variables based on an attribute here. I'm not trying to share a style as much as use the attribute to determine some new variables.
Edit after clarifications:
A component could technically find out the attribute on a direct parent component by imperatively doing the following:
this.parentElement.getAttribute('theme').
I am not sure how that could be done in CSS. Below this edit I've outlined a common approach to solving the issue of theming using CSS custom-properties which have the default behavior of inheriting through the shadow DOM. Also see video by Lit team: "How to style your Lit elements" for more context.
Original answer:
I think what you're looking for is the :host() CSS pseudo-class function.
Your setup is correct where the theme-component is providing CSS custom properties that inherit to all children. my-component does not need any changes.
The only change from your example that should be needed is:
static darkStyle = css`
:host([theme="dark"]) {
--my-bkg: #535353;
--my-items: #474747;
--my-gutter: #4a4a4a;
--my-border: #474747;
--my-item-border: #535353;
--my-divider: #636363;
}
`;
This will select and apply the dark theme CSS custom properties when the theme-component has the theme attribute set to value "dark". These custom properties will then inherit into the children.
Runnable sample:
<script type="module">
import {html, css, LitElement} from "https://cdn.jsdelivr.net/gh/lit/dist#2/core/lit-core.min.js";
class ThemeEl extends LitElement {
static styles = css`
:host {
--my-bkg: green;
display: block;
border: 2px dotted var(--my-bkg);
}
:host([theme="dark"]) {
--my-bkg: gray;
}
`;
render() { return html`<slot></slot>`; }
}
class ChildEl extends LitElement {
static styles = css`
:host {
display: block;
background-color: var(--my-bkg);
}
`;
render() { return html`<p>Child El</p>`; }
}
customElements.define('theme-el', ThemeEl);
customElements.define('child-el', ChildEl);
</script>
<theme-el>
<p>Default Theme</p>
<child-el></child-el>
</theme-el>
<theme-el theme="dark">
<p>Dark Theme</p>
<child-el></child-el>
</theme-el>
This technique can also be used such that a custom element can change its own host styling. By setting attributes on itself and using :host().
If the child component also needs to know what theme is set from JavaScript, that could also be communicated via a CSS custom property and queried with window.getComputedStyle(this).getPropertyValue(<custom property>).
I have an Angular project with different components. I have a base _colors.scss that contains all of my color variables. These colors are broken up as "themes". However, the color variable does not take effect if the variable is called from within a child element. Is there a way to make sure the variable is accessible to all of the nested classes within the parent theme class?
My _colors.scss file :
.brand-one { $color-primary: red }
.brand-two { $color-primary: blue }
.brand-three { $color-primary: green }
My Angular component's scss file:
#import '../assets/scss/colors';
.brand-one {
.header{
background: $color-primary;
}
}
brand-two {
.header {
background: $color-primary;
}
brand-three {
.header {
background: $color-primary;
}
But this is is not working. Is there any special selector like the ~ I can use perhaps?
I don't think you should declare variables inside a class?
colours.scss
$color-brand-one: red;
Component
#import '../assets/scss/colors';
.brand-one {
.header{
background: $color-brand-one;
}
}
The following is perfectly valid CSS:
#someID::before {
--var: 1px;
}
.someClass #someID::before {
# use --var in here
}
But when I try to do the same thing in SASS, I get an undefined variable error:
#someID::before {
$var: 1px;
}
.someClass #someID::before {
# use $var in here
}
Am I misunderstanding how scoping works in SASS?
CSS variables (CSS custom properties (variables)) and SCSS variables are not the same. SCSS variables are for values. For example, let's say I have a brand guideline and I use the colours like this:
$black: #000;
$white: #fff;
And now I can use this way:
header {
.topbar {
background: $white;
}
}
But CSS variables are similar. And also, you are declaring the variable in the global scope there.
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