Trying change the background color for the class mat-app-background.
I assumed that the property that needs to be changed is the background property of the background map within the Angular theme.
The original value is #303030 and that is the the background color for the dark theme without any changes.
I tried changing this value with this function:
#function set-theme-background-color($theme, $color) {
$background: map.get($theme, background);
$background: map.merge(
$background,
(
background: $color,
)
);
#return map.merge(
$theme,
(
background: $background,
)
);
}
$dark-theme: set-theme-background-color($dark-theme, #4a8eb0);
And then generate the theme classes like this:
.dark-theme {
#include mat.core-theme($dark-theme);
#include mat.all-component-colors($dark-theme);
}
However as can be seen in this demo the background for the dark theme does not change.
How do we change the background color for the dark theme?
Related
This demo implements a dark and light Angular theme.
When a theme is selected the class name for the current theme set on the body element with an observable like this (app.component.html):
[class]="s.OS.S.theme.obs | async"
When a new theme is selected the current theme is removed from the overlay container and the new class name is added to the overlay container.
This is all done within app.component.ts. These snippets remove and add the class name from the overlay container:
Remove Theme Class from Overlay Container
overlayContainerClasses.remove(...themeClassesToRemove);
Add Theme Class from Overlay Container
this.overlayContainer.getContainerElement().classList.add(themeClass);
In general it works except when the dark theme is selected it looks like the overlay container stays in place, it is black and it covers the whole viewport. Clicking within the viewport makes it disappear. That is just an attempt by me to describe whats happening.
Any ideas on how to fix this?
Theme Implementation Within styles.scss
#use '#angular/material' as mat;
#include mat.core();
$my-theme-primary: mat.define-palette(mat.$indigo-palette, 500, 200, 800);
$my-theme-accent: mat.define-palette(mat.$cyan-palette);
$my-theme-warn: mat.define-palette(mat.$deep-orange-palette, A200);
$light-theme: mat.define-light-theme(
(
color: (
primary: $my-theme-primary,
accent: $my-theme-accent,
warn: $my-theme-warn,
),
)
);
// ====================================
// Make sure to have a dark background
// Dropdowns will blend in with light
// backgrounds.
// ====================================
$dark-theme: mat.define-dark-theme(
(
color: (
primary: $my-theme-primary,
accent: $my-theme-accent,
warn: $my-theme-warn,
),
)
);
// =====================================
// always include only once per project
// =====================================
.dark-theme {
// use our theme with angular-material-theme mixin
// #include angular-material-theme($dark-theme);
// #include mat.core-theme($light-theme);
#include mat.all-component-themes($dark-theme);
background-color: black;
}
.light-theme {
// use our theme with angular-material-theme mixin
// #include angular-material-theme($dark-theme);
// #include mat.core-theme($light-theme);
#include mat.all-component-themes($light-theme);
}
html,
body {
height: 100%;
}
body {
margin: 0;
font-family: Roboto, 'Helvetica Neue', sans-serif;
}
Found some issues in the theme implementation. Take a look at the update code: https://stackblitz.com/edit/angular-xvxuhg-acrvsa?file=src%2Fstyles.scss,src%2Fapp%2Fapp.component.html,src%2Fapp%2Fapp.component.ts
Documentation - https://v14.material.angular.io/guide/theming
styles.scss - dark theme is implemented using #include mat.all-component-colors, not themes.
app.component.html - Apply the mat-app-background CSS class to your main content root element (typically body).
https://material.angular.io/guide/theming#application-background-color
app.component.ts - Instead of using an observable + async pipe to read the theme class. #HostBinding is a lot more straight forward.
#HostBinding('class')
themeMode: string = '';
Hi guys I have a shared layout navbar with white color text.
I happen to have a few other pages the user can visit but the background on them is very bright.
I dont want to change the background.
I want to change the navbar color but only on those selected pages,
can I do this in CSS?
Changing the color is not the problem, the problem is changing the color on only a few specific pages
Hope this make sense. I don't mind if its in javascript while I prefer CSS
so if I were to write pseudo code.
#myNavbar
{
color: white;
}
if(source == gallery.html || contact.html)
{
#myNavbar{
color:red; }
}
You don't have this kind of logic with css, but you can achieve this with javascript like this:
var currentUrl = document.location.href; // get URL from browser. You should add your PATH TO the files on the condition.
if (currentUrl !== 'PATH_TO/gallery.html' || currentUrl !== 'PATH_TO/contact.html') {
document.querySelector('#myNavbar').setAttribute('style' 'color: red;');
}
else {
document.querySelector('#myNavbar').setAttribute('style' 'color: white;');
}
You should wrap this with some onload function. And you can read about the document.location here.
Hope that help!
In my app, I have movies' details that can be opened, and I want the buttons of the detail to match the movie.
For instance, with the movie "Back to the Future", I have in my data colors = ["#000000","#123123"].
If I do <div [ngStyle]="{'background-color': movie?.colors[0]}"> the div will be of the color I wanted.
My question is, in Ionic, how can I change variables.scss to have these colors (updated when we open a new movie) ?
Because we can't modify tabs with custom css, so I have to add it to variables.scss...
if you want to update any css color or value like font-size like the sass variable at run time use css variables in this way you can update any css property value at run time if it base on css variable like the color in my example but it 's can be any css value
consider this example
style.css
:root {
--color : red;
}
* {
color:var(--color)
}
AppComponent
colorList = ['green', 'blue'];
updateColor(color) {
document.documentElement.style.setProperty(`--color`, color);
}
Template
<button *ngFor="let c of colorList" (click)="updateColor(c)">{{c}}</button>
stackblitz demo 🚀🚀
sass variable are going to compile at build time to there values so they are not reusable at run time
For most use cases, it is convenient to programmatically change the CSS value of an element by mapping it with a variable. We want the CSS value to change every time we update the variable, not only through this.ngZone.run().
<div class="progress" [style.height]=currentLevelPercentage>
This example has shown how we can map the height CSS property of the div element (class progress) to the variable currentLevelPercentage and change its value dynamically. currentLevelPercentage is the variable that must be compulsorily present in the TypeScript file.
For those here to know how to change color of each tab background in super-tabs (ionic) here's my 4 tabs code (I can now change height and width with code too ^^).
in tabs-page.scss :
:root {
--color1: white;
--color2: white;
--color3: white;
--color4: white;
}
super-tab-button:nth-of-type(1) {
background-color: var(--color1)
}
super-tab-button:nth-of-type(2) {
background-color: var(--color2)
}
super-tab-button:nth-of-type(3) {
background-color: var(--color3)
}
super-tab-button:nth-of-type(4) {
background-color: var(--color4)
}
in tabs-page.html : do nothing particular
in tabs-page.ts :
constructor(public navCtrl: NavController, public navParams: NavParams) {
document.documentElement.style.setProperty('--color1', this.movie.colors[0]);
document.documentElement.style.setProperty('--color2', this.movie.colors[1]);
document.documentElement.style.setProperty('--color3', this.movie.colors[2]);
document.documentElement.style.setProperty('--color4', this.movie.colors[3]);
}
Thank you #malbarmawi !
Just an idea about changing style dynamically. here is what i am using
<span [style.width]=foo></span>
Change the value of ‘foo’ in your .ts file
https://angular.io/docs/ts/latest/guide/template-syntax.html#!#style-binding
Simply try this
[ngStyle]="{'background-color': item.color}"
I try to change color of the ion-title in ionic 2.
I have this following code:
<ion-header>
<ion-navbar>
<ion-title primary>Title</ion-title>
</ion-navbar>
</ion-header>
The color of the ion-title don't change. I try several things like:
<ion-title color="primary">Title</ion-title>
<ion-title>
<p primary>Title</p>
</ion-title>
With the second I have the title in the right color, but the header is big. So I add this in the variables.scss:
$toolbar-ios-height: 5rem; // ios
$toolbar-md-height: 5rem; // android
But nothing change.Does anyone have a solution? Or do I have to use the p or h tag to change the color?
Remove the color="..." from the ion-title element and use this sass variables in your variables.scss file:
$toolbar-md-title-text-color: #777;
$toolbar-ios-title-text-color: #777;
$toolbar-wp-title-text-color: #777;
If you want to use one the colors included in the named color variables
$colors: (
primary: #488aff,
secondary: #32db64,
danger: #f53d3d,
light: #f4f4f4,
dark: #222,
...
custom: #777
);
You can do it by using map-get like this:
$toolbar-md-title-text-color: map-get($colors, custom);
$toolbar-ios-title-text-color: map-get($colors, custom);
$toolbar-wp-title-text-color: map-get($colors, custom);
Note:
Setting the color with just the color attribute has been deprecated since the 3.0.0 version of Ionic more info.
Update:
[...] all the element on the navbar change color, Can we just change
the ion-title? Or have a second variable to change the other elements?
You can add this style rule in the app.scss file (to make it global) and it will only change the title and nothing else:
.toolbar-title.toolbar-title-md,
.toolbar-title.toolbar-title-ios,
.toolbar-title.toolbar-title-wp { color: map-get($colors, custom); }
I know this question has been answered, but an another way to set the text colour in the title is in the variables.scss file,
$colors: (
calm: (
base: #000,
contrast: #ffc900
),
etc..
);
<ion-navbar color="calm">
<ion-title>Some Text</ion-title>
</ion-navbar>
base will be your background colour and contrast will be your text/icon colour
As an alternative, one can use something like this:
ion-toolbar { --color: #940000 }
Set the color as you wish; put in *.scss file.
Enjoy!
I create a modal window with PopUpManager
_zoomImgPopUp = PopUpManager.createPopUp(this, Image, true) as Image;
When the modal window is opened, all background is gray and with blur.
How can i change color, blur and transparency of background.
I find this article
http://mprami.wordpress.com/2008/04/22/alert_popup_modal_transparancy_color_blur_changes/
but it is for "mx" application. I need something with "spark" components.
UPD: Solved. It must be:
_zoomImgPopUp.setStyle("modalTransparency", 0);
_zoomImgPopUp.setStyle("modalTransparencyBlur", 0);
PopUpManager.addPopUp(_zoomImgPopUp, this, true);
You have access to styles in the tag that affect Modal.
You should be able to do this:
_zoomImgPopUp.setStyle("modalTransparency",1);
_zoomImgPopUp.setStyle("modalTransparencyBlur",3);
_zoomImgPopUp.setStyle("modalTransparencyColor", #ff0000);
You can put this in your application / component / module that references the popup.
<fx:Style>
#namespace s library://ns.adobe.com/flex/spark;
#namespace mx library://ns.adobe.com/flex/halo;
global {
modal-transparency: 1;
modal-transparency-blur: 2;
modal-transparency-color: #ff0000;
}
</fx:Style>