bulma custom colors and theming - css

I'm currently trying to do a mutliple theme design system with bulma as a base.
But i'm currently struggling with adding a multiple theme system.
I added this in my customstyle scss file but it doesn't seems to work
#charset "utf-8";
:root {
--primary: red;
--secondary: #068295;
}
body[class="light"] {
--primary: #F7A800;
--secondary: #068295;
}
body[class="dark"] {
--primary: blue;
--secondary: #068295;
}
$primary: var(--primary); // this works
$background: blue;
$text-strong: red;
$secondary: #8BC91D; // this works but without theming
// $secondary: var(--secondary); // this doesn't work
$secondary-invert: findColorInvert($secondary) !default;
$custom-colors: (
"secondary":($secondary, $secondary-invert),
);
#import "../node_modules/bulma/sass/utilities/_all.sass";
#import "../node_modules/bulma/sass/base/_all.sass";
#import "../node_modules/bulma/sass/elements/button.sass";
when I run the node sass command to generate the css file
i can see the is-secondary properties generated when i don't use the variable but when i use a variable to define my $secondary variable the is-secondary properties are not generated

Related

How to share a css root constant to another css file?

I'm trying to use the same colors again and again in my Angular test project. So, I made a constants.css where I declare my root constants which are all colors at the moment. However I'm stuck at trying to use them in my individual components' css files.
I tried to include constants.css at the html file and doesn't work. I tried both #import url("constants.css") and #import "constants.css".
constants.css
:root {
--primary-color: #2c3e50;
--secondary-color: #f1c40f;
--background-color: #ecf0f1;
--accent-color: #c0392b;
}
nav.component.css
#import url("../../../constants.css");
a.logo {
color: var(--secondary-color);
}
I expected my logo text to be yellow but it's just default black.
You've forget to declare your variable in your css file where you want to use global variable:
#value --secondary-color from "here should be your address";
a.logo {
color: var(--secondary-color);
}
Let me show an example:
shared.css:
:root {
--primary-color: #2c3e50;
--secondary-color: #f1c40f;
--background-color: #ecf0f1;
--accent-color: #c0392b;
}
and in main.css you should write #value --secondary-color like this
#value --secondary-color from "./shared.css";
.background {
background-color: var(--secondary-color);
}
And do not forget to include your css files:
<link href="shared.css" type="text/css" rel="stylesheet"/>
<link href="main.css" type="text/css" rel="stylesheet"/>
Do not forget that order of declaration of stylesheets does matter.
My problem has been the import not working at all because it's Angular thing. I have to import my constant into the main style.css and importing in individual css files doesn't work at all.
The right answer of this link is the answer.
Angular 6 - Less CSS' import is not working anymore

Angular use CSS variable in global style.css file

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);
}

Export variables from SASS to vanilla CSS?

Consider I have a long list of SASS variables in different .scss files like this:
$app-color-white: #ffffff;
$app-color-black: #000000;
What would be the most effective way to export these variables as vanilla CSS variables?
:root {
--app-color-white: #ffffff;
--app-color-black: #000000;
}
Maybe, there is a SASS-way or even some pre-processor?
I want my SASS framework to be also used in vanilla CSS projects.
This is now possible thanks to sass modules and the new sass:meta.module-variables() function: it
Returns all the variables defined in a module, as a map from variable names (without $) to the values of those variables.
For example
// _vars.scss
$color: red;
$font: Helvetica, sans-serif;
// style.scss
#use 'sass:meta';
#use 'vars';
:root {
#each $name, $value in meta.module-variables(vars) {
--#{$name}: #{$value};
}
}
Outputs
:root {
--color: red;
--font: Helvetica, sans-serif;
}
⚠️ Sass modules are currently only supported in Dart Sass
I think the best way to do this would be using something like a variable map;
E.g.
// sass variable map
$colors: (
primary: #FFBB00,
secondary: #0969A2
);
// ripped CSS4 vars out of color map
:root {
// each item in color map
#each $name, $color in $colors {
--color-#{$name}: $color;
}
}
Output:
:root {
--color-primary: #FFBB00;
--color-secondary: #0969A2;
}
Source: https://codepen.io/jakealbaugh/post/css4-variables-and-sass

Scoped SCSS variables for themeing

I have a set of palettes for different themes like so:
$primary: red;
$secondary: blue;
.theme-2 { $primary: green; $secondary: yellow; }
//..
//some random scss file that has typography class names
.cool-text { color: $primary; }
Is it possible to make it so, whatever the class name applied to the container uses the variable palette colors defined for it?
Ex:
<div class="theme-2">
<p class="cool-text"> cool </p> // should be green
</div>
<p class="cool-text"> cool </p> //should be red
Because Sass variables are compiled before runtime, they cannot be context-sensitive, so the example you provided would not be possible.
Some helpful reading with alternate examples here:
https://webdesign.tutsplus.com/articles/understanding-variable-scope-in-sass--cms-23498
And I'd read into native CSS variables, which can do exactly what you want and are gaining support in most browsers aside from IE/Edge:
https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables
You can use !default here
check this running code snippet,with your html codepen
$primary: red !default;
$secondary:blue !default;
.cool-text { color: $primary; }
.theme-2 {
$primary: green;
$secondary: yellow;
.cool-text{
color: $primary;
}
}
With this if color is not set to anything ,it would take default red color if not whatever you set it would take that
Hope it helps

How to create 'smart' nested rule for css using webpack and vue

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

Resources