Basic themes

[craigh]

So, I'd like to use bs5.3's new color-modes to create several 'themes' for my site where I simply change the basic colors, like $primary and $secondary, etc. I've read the color modes docs but, being a sass newb, I'm not really sure how to proceed.

Currently, I load my Sass files like it is shown here and then it is all compiled with webpack. It is unclear to me where to insert the new theme definitions, etc.

I like to create several "themes" with different values for $primary, etc. Can someone give me more explicit examples of what to do? Even just one theme that changes the primary color. thanks!

[wesam1991]

Sure, I can help you with that! Creating themes with different color values using Sass and Bootstrap 5.3's color modes is a great way to customize your site's appearance. Here's a step-by-step guide on how to proceed:

Install Bootstrap 5.3 and Sass:
Make sure you have Bootstrap 5.3 and Sass installed in your project. You can install them via npm using the following commands:

npm install [email protected]

npm install sass

bash

npm install [email protected]
npm install sass

Set up your project structure:
Create a folder structure for your Sass files. For example:

markdown

• src

  • sass

    • themes
      • _theme-default.scss
      • _theme-blue.scss
      • _theme-green.scss
    • main.scss

    Create your default color variables:
    In the _theme-default.scss file, define your default color variables that will be used if no specific theme is applied. For example:

scss

// src/sass/themes/_theme-default.scss

// Your default color variables
$primary: #007bff;
$secondary: #6c757d;
// Add other color variables as needed

Create your theme files:
In the _theme-blue.scss and _theme-green.scss files (or as many themes as you want), define the specific color values for each theme:

scss

// src/sass/themes/_theme-blue.scss

// Theme-specific color variables
$primary: #0d6efd;
$secondary: #6c757d;
// Add other color variables as needed

scss

// src/sass/themes/_theme-green.scss

// Theme-specific color variables
$primary: #198754;
$secondary: #6c757d;
// Add other color variables as needed

Create the main.scss file:
In the main.scss file, import the Bootstrap 5.3 Sass source and then import your default theme:

scss

// src/sass/main.scss

// Import Bootstrap 5.3 Sass source
@import 'node_modules/bootstrap/scss/bootstrap';

// Import your default theme
@import 'themes/theme-default';

// More custom styles can go here...

Compile Sass with Webpack:
Configure Webpack to compile your Sass files. You'll need to set up a rule for .scss files and use sass-loader to process them.

For example, your webpack.config.js might look like this:

js

const path = require('path');

module.exports = {
entry: './src/sass/main.scss',
output: {
filename: 'styles.css',
path: path.resolve(__dirname, 'dist'),
},
module: {
rules: [
{
test: /.scss$/,
use: [
'style-loader', // or MiniCssExtractPlugin.loader to create a separate CSS file
'css-loader',
'sass-loader',
],
},
],
},
};

Apply themes in your HTML:
Now, in your HTML file, include the compiled styles.css file:

html

<title>My Themed Website</title>

Change the theme dynamically:
To change the theme dynamically, you'll need to use JavaScript to change the CSS variable values for your themes.

For example, if you want to change to the blue theme, you can use the following JavaScript code:

js

// JavaScript to change theme dynamically
const changeToBlueTheme = () => {
document.documentElement.style.setProperty('--primary-color', '#0d6efd');
document.documentElement.style.setProperty('--secondary-color', '#6c757d');
// Add other color variables as needed
};

// Call this function to apply the blue theme
changeToBlueTheme();

Remember to update your CSS variable names to match the ones you define in your theme files.

That's it! Now you have a setup to create multiple themes for your site using Bootstrap 5.3's color modes. You can create additional theme files for different color variations and use JavaScript to switch between them dynamically.

[craigh]

@wesam1991 thank you for taking the time to respond. I do appreciate it.

I am having some trouble understanding your code above because the formatting seems to be messed up somehow. Any chance you can correct that?

I do not have any need for dynamic changes to the theme. I intend to simply set the theme on the <html> element, like in the docs <html lang="en" data-bs-theme="my-custom-theme1">. I will use variables in my template rendering to alter the theme.

I am importing all the bootstrap files as shown here using Option B (the second example - where every file is imported separately). So it is not clear to me where to import my custom theme definition(s) in that structure - after all of it? In the middle?

It is also not clear to me from your code how you are using the data-bs-theme selector or the color-mode() mixin as shown in the docs? I assumed those would be a critical piece here.