Switchable custom bootstrap themes with sass

I was able to find many different approaches on how to make a switchable themes in SASS I wasn't able to figure out how can I apply that approach to bootstrap overrides. Let's say I want to have light and dark theme and both themes would override bootstraps colors differently.

I was able to find many different approaches on how to make a switchable themes in SASS I wasn't able to figure out how can I apply that approach to bootstrap overrides. Let's say I want to have light and dark theme and both themes would override bootstraps colors differently.

// Light-theme
$theme-colors: (
    "primary": #8A2F4F
);

// Dark-theme
$theme-colors: (
"primary": #fff
);

In the example above are overrides for primary of theme-colors. How can I conditionally set them based on theme the user has selected?

Build a Register & Login Form using PHP, HTML, CSS, Bootstrap and MySQL

Build a Register & Login Form using PHP, HTML, CSS, Bootstrap and MySQL

In this tutorial you will learn and build a Responsive PHP Registration & Login Form using PHP, HTML, CSS, Bootstrap and MySQL

Welcome to this video on Responsive PHP User Login and Registration Form with PHP and MySQL From Scratch. In this course you will Learn and build a Responsive PHP Registration & Login Form using PHP, HTML, CSS, Bootstrap and MySQL. After watching this course you will be able to Create your own registration form connected to the MySQL database. In this course will explain step by step from scratch how to build a login system that you can customize it. The course covers all the aspects of HTML, CSS, JavaScript, PHP, MySQL along with Bootstrap Framework to create a real-time registration form. Making a Super Simple Registration System With PHP and MySQL will be easy ans step by step process.

All Code of this video can be found here: https://github.com/pknowledge/useraccounts
https://github.com/pknowledge/userlogin

Is it possible to use CSS variables in Twitter-bootstrap 4 $theme-colors array?

In bootstrap 4 you can define and/or override default colors using the following array: (<a href="https://getbootstrap.com/docs/4.2/getting-started/theming/#modify-map" target="_blank">as documented here</a>)

In bootstrap 4 you can define and/or override default colors using the following array: (as documented here)

$theme-colors: (
    "primary": #001122, /*override*/
    "color-1": red, /*new color*/
    "color-2": black, /*new color*/
    "color-3": white /*new color*/
);

I want to make custom theme colors for different users. Users can choose different color palettes which I have defined based on the class of the body.

I made a new file to make my own styles, defining my theme colors in CSS variables in the body tag:

body {
  &.color-pallette-red {
    --theme-color-1: red;
    --theme-color-2: black;
    --theme-color-3: white;
color: var(--theme-color-1); /*red*/

}

&.color-pallette-yellow {
--theme-color-1: yellow;
--theme-color-2: black;
--theme-color-3: white;

color: var(--theme-color-1); /*yellow*/

}
}

But in this way, the bootstrap colors are of course not overwritten...

I tried to paste my CSS variables in the bootstrap array mentioned earlier, to make sure that bootstrap used my colors:

$theme-colors: (
"color-1": var(--theme-color-1),
"color-2": var(--theme-color-2),
"color-3": var(--theme-color-3)
);

But this returns Error: $color2: var(--theme-color-1) is not a color. @return mix($color-base, $color, $level * $theme-color-interval); after running the compiling script. So bootstrap/compiler didn't recognize my CSS variables as a color...

Summarized what I want is: Change bootstrap colors based on body class. Does anyone know a way to achieve this?

Sass Crash Course- Learn Sass In 20 Minutes

Sass Crash Course- Learn Sass In 20 Minutes

Sass Crash Course- Learn Sass In 20 Minutes: In this mini crash course we are going to learn everything about Sass. What Sass allows us to do is write alot of cool things that we would normally wouldn't be able to do in normal CSS.

With Sass we can create variables, use imports and partials to separate our css code into smaller chunks, we can use mixins to create small functions that allow us to reuse css code, nesting allows us to write children elements directly inside the parent element and much more!

We will also look at a tool called Live Sass Compiler which is going to take our scss code and convert it to regular css with autoprefixer.

If you are interested in learning more about css and sass then take the time to watch this sass crash course covered in 20 minutes!

📕 Things covered in this video:

  • How to add sass compiler to our project

  • How to link our sass to html

  • Sass variables

  • Mixins

  • Nesting

  • Extending

  • Operators

  • Partials and Imports

📔 Materials used in this video:

VSCode