search

bestguy / sveltestrap

Bootstrap 4 & 5 components for Svelte
https://sveltestrap.js.org
MIT License
1.3k stars 183 forks source link

How to change the color theme? #397

Closed ajerni closed 2 years ago

ajerni commented 2 years ago

How can we change the color theme? For example for the Button components color="primary" property?

paradis-A commented 2 years ago

You can either override the :root colors or override it using scss with svelete-preprocess.

for example using scss.

//global.scss
$theme-colors:(
    "primary": red,
    "secondary": #d63384,
);
@import "bootstrap/scss/bootstrap.scss";

unlike the scss using css you have to change two variables for one color

//global.css
:root{
    --bs-primary: #0d6efd !important; 
    --bs-secondary: #6c757d !important;
    --bs-primary-rgb: 13, 110, 253 !important; 
    --bs-success-rgb: 25, 135, 84 !important;
}

Please see this for refference

quasarchimaere commented 2 years ago

what would be nice is if we could somehow inject the theme and possibly additional styles within the tag/component, i would find this a lot cleaner than having a sep scss import or style tag.

bestguy commented 2 years ago

The goal of this library is to use Bootstrap CSS/themes defined or hosted externally. For example you can link to stylesheets such as: https://www.bootstrapcdn.com/bootswatch/ Or use your own company's Bootstrap theme.

I realize this might seem inconvenient, but theming and styling support is not within the scope of this project, thanks.