When running locally my front end i inspect button element and the color --mdc-theme-primary is not defined even when it is.
Inspecting the element:
Index.html:
<button class="mdc-tab mdc-tab--active" aria-selected="true" tabindex="0">
<span class="mdc-tab__content">
<span class="mdc-tab__text-label">Home</span>
</span>
</button>
Firefox Inspect element result, --mdc-theme-primary not defined using fallback value:
.mdc-tab--active .mdc-tab__text-label {
color: #e3f2fd;//this line is disabled in console is dashed
color: var(--mdc-theme-primary, #e3f2fd);
}
Using the Theming Guide! I've set up my files as follows:
_themecolor.scss
$mdc-theme-primary: #e3f2fd;
$mdc-theme-on-primary: #442C2E;
$mdc-theme-secondary: #0d48a1;
$mdc-theme-on-secondary: rgb(235, 15, 33);
$mdc-theme-surface: #000000;
$mdc-theme-on-surface: #442C2E;
$mdc-theme-background: #000000;
$mdc-theme-on-background: #442C2E;
_variables.scss (for completion, not needed for this)
.topAppBar-margin-fix {
top: 0;
left: 0;
}
app.scss
#import "./_themecolor";
#import "./_variables";
#import "#material/top-app-bar/mdc-top-app-bar";
#import "#material/typography/mdc-typography";
#import "#material/button/mdc-button";
#import "#material/tab-bar/mdc-tab-bar";
#import "#material/tab-bar/mixins";
#import "#material/tab-scroller/mdc-tab-scroller";
#import "#material/tab-indicator/mdc-tab-indicator";
#import "#material/tab-indicator/mixins";
#import "#material/tab/mdc-tab";
#import "#material/tab/mixins";
.mdc-tab__text-label{
//#include mdc-tab-active-text-label-color(on-primary);
//--mdc-theme-primary: red;
//--mdc-theme-primary: $mdc-theme-on-secondary;
}
body {
color: blue;
}
app.js
import {MDCTabBar} from '#material/tab-bar';
const tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));
import {MDCTabScroller} from '#material/tab-scroller';
const tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));
import {MDCTab} from '#material/tab';
const tab = new MDCTab(document.querySelector('.mdc-tab'));
Serving this site inside the scroll bar the color of the Home label in the button is the fallback color and not the primary color or whatever i set with the mixin.
I tried:
case a)
.mdc-tab__text-label{
#include mdc-tab-active-text-label-color(on-primary);
}
case b)
.mdc-tab__text-label{
--mdc-theme-primary: red;
}
case c)
.mdc-tab__text-label{
--mdc-theme-primary: $mdc-theme-on-secondary;
}
case a) tried using also a simple color as "red" and still the color used is the fallback one.
case b) works as intended being red.
case c) the label color is black instead of red as the $mdc-theme-on-secondary defined in themecolor.scss
Also tried a) b) and c) using
.mdc-tab--active .mdc-tab__text-label{
//repeating each case, only working the one with "red" value.
}
Errors i think i do:
1- I am using the wrong mixin for setting label color.
2- I am using the defined color variable in themecolor.scc wrong cause i don't know css.
3- There is a problem with my includes.
4- Are my SASS variables not being compiled?
Question why the --mdc-theme-primary is not defined? And why i cant point to the colors defined in themecolor.scss?
Any help is appreciated.
I fixed this by doing something isn't explained in the guide. When you want to use theming you have to import the theme component into your project, as follows:
app.scss
#import "./_themecolor";
#import "./_variables";
//----add these lines after custom imports-----
#import "#material/theme/mdc-theme";
#import "#material/theme/mixins";
//---------------------------------------------
#import "#material/top-app-bar/mdc-top-app-bar";
Nothing else is needed all the colors will be defined.
Thank ypou. I hpe this help newcomers.
Related
So I would like to define a global color in my Angular project in the styles.scss stylesheet.
I know I can defined global variables like this
:root {
--blueish: #658bc7;
}
and then in other styles(heets) reference to it
p {
color: var(--blueish);
}
But this is NOT a globally defined color. This is a globally defined variable.
We could for example do
p {
color: aliceblue;
}
and this does work since aliceblue is globally defined along with a lot more preset colors. Is there a way for me to ADD a color to this list using (S)CSS? If not, would it be possible in less or SASS?
You can assign in SCSS vars with $varName. Important note if you like to use dash or underScore in your varnames. For the SASS compiler, $var-name is the same as $var_name. You have to take that into consideration.
SCSS
$blueish: #658bc7;
p {
color: $blueish;
}
Will compile to CSS:
p {
color: #658bc7;
}
You Can Define and Assign Variables in scss/sass Like This
$blueish: #658bc7;
p {
color: $blueish;
}
Notice that in sass/scss files named "blablabla" are globally scope
while files named "_blablabla" are not globally scoped and must be imported by.
You Must Have one globally file in sass/scss for example named "style.scss" that imports all scss/sass files in it for example:
/*
This File is only for imports
*/
#import "./libraries/_variables.scss";
#import "./libraries/_mixins.scss";
#import "./layouts/_header.scss";
#import "./pages/_about.scss";
Also, you can not add "_" and ".scss" in the importing it is not necessary for your editor will understand it for Example :
#import "./libraries/variables";
#import "./libraries/mixins.scss";
#import "./layouts/_header";
They are the same as the above example!
In our app.less file, we import a few variable files, and then the individual component style sheets.
app.less
#import variables.less /* Original app styles/colors */
#import corp-colors.less /* corporate color variables */
#import light-theme.less /* Theme definitions */
#import '../components/style' /* This file contains imports of every component in the app */
The variables.less file defines #link-color...
variables.less
#link-color: #1997CA;
And the light-theme.less redefines it by pulling in the corp color.
light-theme.less
body.light-theme {
#link-color: #corp-blue;
}
corp-colors.less
```less
#corp-blue: #2a60c8;
```
Finally, in my component, I digest the variable for a tab bottom border.
x-component/style.less
li {
&.is-selected {
.tab-label {
border-bottom: 3px solid #link-color;
}
}
}
As the light-theme is imported after variables, I'd expect to see the border color as #2a60c8, but am seeing the original #1997CA instead.
However, if I change the component style to use #corp-blue instead of #link-color, it shows correctly.
Am I overlooking something with import and override ordering?
LESS variables work not like CSS variables, they calculate their values on the compilation stage, not in runtime. It seems like you need to change:
body.light-theme {
#link-color: #corp-blue;
}
to:
#link-color: #corp-blue;
I know I can simply do this in my SCSS file. But I would like to know the correct way to do it via customizing the actual Bootstrap colors. I have already figured out how to change background colors on the buttons.
I created a custom-bootstrap.scss file in which I modified the $primary and $danger variables and then imported Bootstrap.
custom-bootstrap.scss:
// Override default variables before the import
$primary: #48BF91;
$danger: #CF6676;
// Import Bootstrap and its default variables
#import '~bootstrap/scss/bootstrap.scss';
This is my inspector showing where it sets the text color to black from the _buttons.scss file.
Edit: So right now, this is how I am currently changing the button text color. Just by adding this code into my own SCSS file. But it feels too hacky for me, I want to modify the Bootstrap variables.
.btn-primary {
color: $text;
&:hover {
color: $text;
}
}
use this type
:root {--button-color: black; --button-background-color: silver;}
I've got a next.js application and am using react-bootstrap. I am trying to overwrite my default form background from that blueish gray (#e8f0fe or rgb(232, 240, 254)) that bootstrap is using for inputs to white.
I am currently customizing the bootstrap variables via a custom.bootstrap.scss file
$theme-colors: (
'primary': #e28215,
'secondary': #83b8f3,
'tertiary': #1575e2,
'headings': #2b363f,
'body': #5b6b79,
'inputBorderNormal': #c3ced6,
'inputBorderFocus': #90a3b0,
'darkBG': #2b363f,
'lightBG': #eef0f3,
'input-bg': #fff,
'input-bg-disabled': #fff,
);
#import '~bootstrap/scss/bootstrap.scss';
this file is then imported into my index.scss:
#import './custom.bootstrap.scss'
I am then using the index.scss in my _app.js like this:
import '../style/index.scss';
The theming seems to work as my primary button is orange, but I can't get the form background to change (I can't even overwrite it on element level with !important)
Please find a repo here
Any help appreciated.
Cheers
I have made a code sandbox to demonstrate this
https://codesandbox.io/s/sparkling-feather-ppg8q?file=/style/custom.bootstrap.scss
There were two changes:
1.instead of importing index.scss import the custom bootstrap file into _app.js
import "../style/custom.bootstrap.scss";
Declare the variables directly into the file and apply them.
$darkBG: #2b363f;
$primary:#e28215;
$tertiary: #1575e2;
// ... Rest of your colors..
#import '~bootstrap/scss/bootstrap';
body {
padding: 20px 20px 60px;
margin: 0;
background-color: $primary;
}
form {
background-color:$darkBG;
}
.my-3 {
background-color:$tertiary;
}
Right now we are using a scss mixin ( https://github.com/zellwk/themify ) to provide different themes for our react components in our app.
It works great, but produces rather long selector chains in the compiled css file.
While we do have to provide the ability to change themes during runtime ( which is no hassle with the current solution, we only have to switch one classname on the body element ) the default usecase is, that the theme does not change.
So we thought about reducing the complexity and filesize of our stylesheets by splitting them up in separate files.
Example:
themes.scss:
$themes: (
red: (
mainColor: #aa3939,
secondaryColor: #D46A6A
),
blue: (
mainColor: #2e4272,
secondaryColor: #4f628e
)
);
button.sccs
#import 'themes.scss';
.button {
#include themify($themes) {
color: themed('secondaryColor');
background-color: themed('mainColor');
}}
}
This becomes:
.theme-red .button {
color: #D46A6A;
background-color: #aa3939;
}
.theme-blue .button {
color: #4f628e;
background-color: #2e4272;
}
Now I want this to become:
theme-red.css:
.button {
color: #D46A6A;
background-color: #aa3939;
}
theme-blue.css:
.button {
color: #4f628e;
background-color: #2e4272;
}
We are not depenent on the themify mixin, we could change that to any kind of solution one could make work with webpack. Any hint in the right direction would be appreciated! :)
#ManuKaracho, I tried to use the similar approach with the help of these two tutorials and faced the same issue as you are facing.
Sass Theming: The Neverending Story
Theming Web Apps with SASS
The CSS is generated in a single file instead of two separate files. I wanted to generate two separate CSS files just like you. I did some R&D about the issue and finally figured out how to do this.
First of all you need to break your themes.scss file into two separate files as shown below.
_theme-red-variables.scss
$themes: (
red: (
mainColor: #aa3939,
secondaryColor: #D46A6A
)
);
_theme-blue-variables.scss
$themes: (
blue: (
mainColor: #2e4272,
secondaryColor: #4f628e
)
);
Next you need to make some changes in your button.scss file. Simply remove the #import statement from the top because we will import theme specific variables into their own separate files as shown below
button.scss
.button {
#include themify($themes) {
color: themed('secondaryColor');
background-color: themed('mainColor');
}
}
Next you need to create two separate theme files. In these files, you need to import theme specific variables file, mixin file and your button.scss file
theme-red.scss
// Import red theme variables file
#import 'theme-red-variables';
// Import mixins file, where you have defined themify and themed mixins
#import 'mixins';
// Import button.scss file in this theme file
#import 'button';
theme-blue.scss
// Import blue theme variables file
#import 'theme-blue-variables';
// Import mixins file, where you have defined themify and themed mixins
#import 'mixins';
// Import button.scss file in this theme file
#import 'button';
Two separate files will be generated using the above technique
theme-red.css
.button {
color: #D46A6A;
background-color: #aa3939;
}
theme-blue.css
.button {
color: #4f628e;
background-color: #2e4272;
}
I hope I have explained the solution well and it will help you to resolve your problem.