In an Ionic v4 app, I have a label component where I want to apply the secondary-shade color, but it doesn't work if I want to apply it directly from the color attribute.
This is how I am applying the color:
<ion-label color="secondary-shade">Secondary shade Label</ion-label>
Applying the color from the CSS is working though:
ion-label {
--color: var(--ion-color-secondary-shade);
}
To give secondary-shade color using color attribute directly, you need to define secondary-shade color inside variables.scss.
Go to src/theme/variables.scss and add your secondary-shade color to $colors as below.
$colors: (
primary: #488aff,
secondary: #32db64,
danger: #f53d3d,
light: #f4f4f4,
dark: #222,
secondary-shade: #f53dc7
);
Now you can use it as you preferred.
<ion-label color="secondary-shade">Secondary shade Label</ion-label>
Related
In my themes/variables.scss I have two color themes (dark and light):
/* LIGHT COLOR THEMES
========================================= */
/*$colors: (
primary: #ffffff,
secondary: #fafafa,
danger: #f53d3d,
light: #1b1e28,
sliderColor: #fff,
colorIcon: #CCCBDA,
colorIconText: #7F7E96,
category: #fff,
listBackgroundColor: #ffffff,
backgroundColor: #fafafa,
toobarBackground: #ffffff,
toobarButton: #AAB2B7,
toobarText: #FFFFFF
);*/
/* DARK COLOR THEMES
========================================= */
$colors: (
primary: #282C39,
secondary: #1b1e28,
danger: #f53d3d,
sliderColor: #fff,
light: #fff,
colorIcon: #7F7E96,
colorIconText: #7F7E96,
category: #fff,
listBackgroundColor: #1B1E28,
backgroundColor: #282C39,
toobarBackground: #1B1E28,
toobarButton: #D8D8D8,
toobarText: #FFFFFF
);
Right now I can only put one theme in my app. If I want to change the theme, I have to comment the one variable out and the other I have to remove the comments.
How can I using these two themes, change the theme dynamically in the app in typescript?
In every tutorial I see these --ion-color-primary but I do not have these --ion-color prepending
You can do this in a couple of ways. The main idea is that define your colors class. you can have for example -
// light theme
:root {
// define your light colors here
}
// dark theme
:root body.dark {
// define you dark colors here
}
So by default, the light theme will be applied, as the <body> of you application does not hold any class. Now to apply dark theme you just simply add class dark to the <body> of you application. For example, you can have a service for that which simply selects the body and adds the class to it. And remove it to go back to light theme.
import { Injectable } from '#angular/core';
#Injectable({
providedIn: 'root'
})
export class ThemeService {
constructor() { }
applyDark() {
document.querySelector('body').classList.add('dark');
}
removeDark() {
document.querySelector('body').classList.remove('dark');
}
}
By the way, I see you are using you own color variable. I've just given the example using the default ionic variables (from src/theme/variables.scss)
I am starting off with Ionic 4 and have soem trouble with the colors.
https://ionicframework.com/docs/theming/basics
So I can do
<span color="primary">TEXT</span>
and the text will be blue. But in the documentation there are two other types of primary. Shade and Tint. How can I make my text primary tint?
If you wish to set specific variation of a color, such as tint, do not set the color property in the ion-text element and define a custom class.
your.page.html
<ion-text class="my-class">
<h1>text</h1>
</ion-text>
your.page.scss
.my-class {
color: var(--ion-color-primary-tint);
}
Ionic 4 theme color can be found in theme > variables.scss
The Ionic CSS variables are placed inside the :root.
:root {
--ion-color-primary: #3880ff;
--ion-color-primary-rgb: 218,93,88;
--ion-color-primary-contrast: #ffffff;
--ion-color-primary-contrast-rgb: 255,255,255;
--ion-color-primary-shade: #3171e0;
--ion-color-primary-tint: #4c8dff;
...
}
USAGE
On an element with takes the color tag.
<div color="primary"></div>
<div color="primary-shade"></div>
<div color="primary-tint"></div>
On a given class using the Ionic custom color properties.
.class{
color: var(--ion-color-primary);
}
.class{
color: var(--ion-color-primary-shade);
}
.class{
color: var(--ion-color-tint);
}
I am aware that I can change the color of the clear-icon and the search-icon as follows:
$searchbar-md-input-clear-icon-color: white;
$searchbar-md-input-search-icon-color: white;
For the cancel-icon, however, this method does not seem to work.
$searchbar-md-input-cancel-icon-color: white;
The code above has no visible effect on the cancel-icon. Instead, the color of the cancel-icon always falls back to the defined primary color.
$colors: (
primary: blue
);
How can I change the color of the cancel-icon?
Yes searchbar-md-input-cancel-icon-color is not a property of SearchBar component.
You need to sets style by a specific css selector like this :
.searchbar-ios-danger .searchbar-ios-cancel {
color: white;
}
I'm trying to make a colored navigation bar in Ionic 3.
The menu that I want to build:
I already tried to use styles for each ion-tab but it did not work, I also tried Overriding Ionic Sass Variables, I was not successful either. Can someone help me?
Thank you.
You can give a different color to tab like this.
<ion-tabs>
<ion-tab color="primary"></ion-tab>
<ion-tab color="secondary"></ion-tab>
</ion-tabs>
Declare a color in theme/variables.scss
Like :
$colors: (
primary: #488aff,
secondary: #32db64,
danger: #f53d3d,
light: #f4f4f4,
dark: #222
);
I check the generated HTML and code this on variables.scss :
.tab-button.icon-only#tab-t0-0{
background-color: #fcaf17;
}
.tab-button.icon-only#tab-t0-1{
background-color: #f37043;
}
.tab-button.icon-only#tab-t0-2{
background-color: #ef4056;
}
.tab-button.icon-only#tab-t0-3{
background-color: #46c3e6;
}
.tab-button.icon-only#tab-t0-4{
background-color: #88c240;
}
$tabs-md-tab-icon-color : #FFFFFF;
$tabs-md-tab-icon-color-active : #272525;
Where tab-t0-x is the id of tab x, maybe not the best solution, but solved my problem.
I would like to set the colors of various parts of the slider,
the handle and both parts of the track: before and after the handle.
Or better still: make the slider invisible (but still working) so I can paint something myself based on the slider value...
I don't think the currently available style-property enables me to do this ?
You're right, you can't do this just using the style property.
However you can change it's colors customizing the mui theme.
http://www.material-ui.com/v0.15.0-alpha.2/#/customization/themes
Example:
import React from 'react';
import Slider from 'material-ui/Slider';
import MuiThemeProvider from 'material-ui/lib/MuiThemeProvider';
import getMuiTheme from 'material-ui/lib/styles/getMuiTheme';
const muiTheme = getMuiTheme({
slider: {
trackColor: 'yellow',
selectionColor: 'green'
},
});
const SliderExample = () => (
<div>
<MuiThemeProvider muiTheme={muiTheme}>
<Slider />
</MuiThemeProvider>
</div>
);
export default SliderExampleSimple
Note: The handle will have the same color as the line before it..(selectionColor)