Color-Scheme for Checkboxes and Radiobuttons

[lenne98]

Have I overlooked something, or is there no way to customize the color of checkboxes and radio buttons?
This would be particularly useful for the switch element, as a blue symbol is displayed there via images, which makes it impossible to fully customize the color via CSS.

In summary, I would like to have a color assignment like for buttons for all elements that are displayed with colors.

[julien-deramond]

IDK if this is what you had in mind, but based on your screenshot, if you override the values of these Sass variables, you could have different colors:

$form-check-input-checked-bg-color: $red !default;
$form-switch-color: #fd0 !default;
$form-switch-focus-color: #0f0 !default;
$form-switch-checked-color: #fd0 !default;

[lenne98]

The result is as desired, but it doesn't work properly for me. :(

Does this have to be done pre compile? Or can it simply be defined via custom-css?

If it has to be done before compile, configuring it via CSS classes like buttons would be very cool

[julien-deramond]

There's no corresponding CSS variable to do that, it needs to be overridden in Sass.
You can follow the Customize > Sass > Importing section of the Docs and override these Sass variables at // 2. Include any default variable overrides here.

[lenne98]

maybe I'm just too stupid, but I downloaded the source code and tried to import it into my custom scss

compile went through with no problems. but style is completely broken

Here is my code, i have at top of my scss file

@import "bootstrap_src/scss/functions";

// Override
$form-check-input-checked-bg-color: red;
$form-switch-color: #fd0;
$form-switch-focus-color: #0f0;
$form-switch-checked-color: #fd0;

@import "bootstrap_src/scss/variables";
@import "bootstrap_src/scss/variables-dark";
@import "bootstrap_src/scss/maps";
@import "bootstrap_src/scss/mixins";
@import "bootstrap_src/scss/root";
@import "bootstrap_src/scss/utilities";
@import "bootstrap_src/scss/reboot";
@import "bootstrap_src/scss/type";
@import "bootstrap_src/scss/images";
@import "bootstrap_src/scss/containers";
@import "bootstrap_src/scss/grid";
@import "bootstrap_src/scss/helpers";
@import "bootstrap_src/scss/utilities/api";

[julien-deramond]

Here's a working example project with Sass customization. Hope it can help :)
https://stackblitz.com/edit/github-4kahu6?file=scss%2F_icon-list.scss,scss%2Fstyles.scss
(you might want to click the refresh button to get the CSS file loaded and see the rendering of the colored switches, this is just a bug with StackBlitz)

Based on the code that you shared, you might have forgotten to import @import 'bootstrap/scss/forms';

[lenne98]

i got it working, i just missed some needed classes :(

anyway thx for your Help.

But at least i wish it would get a default feature to make checkboxes and switches colored like buttons