Skip to content

Instantly share code, notes, and snippets.

@ultrafunkamsterdam

ultrafunkamsterdam/custom-prefix-color.scss

Last active May 2, 2023 14:20
Show Gist options
  • Save ultrafunkamsterdam/67d1166b6088dc829fb33b5ff0d76728 to your computer and use it in GitHub Desktop.
Save ultrafunkamsterdam/67d1166b6088dc829fb33b5ff0d76728 to your computer and use it in GitHub Desktop.
Download ZIP
Bootstrap 5.3 scss/css to create custom color class prefixes and custom scrollbar gradient shade
Raw
custom-prefix-color.scss
@import '../node_modules/bootstrap/scss/functions';
@import '../node_modules/bootstrap/scss/mixins';
@import '../node_modules/bootstrap/scss/variables';
@import '../node_modules/bootstrap/scss/variables-dark';
@import '../node_modules/bootstrap/scss/maps';
/* make sure you have installed bootstrap 5.3 or later!
in earlier versions this won't work
---
at the time of writing:
>>> npm install bootstrap@v5.3.0-alpha3
... Oh! don't forget to import style.scss in your main component ...
*/
/* ---------------------------------------------------------
* custom colors
* ---------------------------------------------------------
*
* these will be inherited by all "utility" classes as well
*
* for example below, i defined a kawa -prefix with main color kawa-green
* which can be used just as -primary, -danger, -success, -warning
* it even calculates the shades and tints and applies them to hover, borders etc..
*
* example use
*
* <button class="btn btn-kawa">
* <p style="color: var(--bs-kawa-300)">
* HiKawa
* </p>
* </button>
*
*/
$kawa-green: #69be28;
$custom-theme-colors: map-merge($theme-colors, (
"kawa": $kawa-green
));
$theme-colors: map-merge($theme-colors, $custom-theme-colors);
$theme-colors-rgb: map-loop($theme-colors, to-rgb, "$value");
$utilities-colors: map-merge($utilities-colors, $theme-colors-rgb);
$utilities-text-colors: map-loop($utilities-colors, rgba-css-var, "$key", "text");
$utilities-bg-colors: map-loop($utilities-colors, rgba-css-var, "$key", "bg");
/* end custom colors */
/* scrollbar custom shade gradient */
$scrollbar-color: rgba(96, 96, 96, .8) linear-gradient(0deg, rgba(34, 34, 34, 0.5) 20%, rgba(68, 68, 68, 1) 50%, rgba(34, 34, 34, 0.5) 80%);
$scrollbar-color-rgb: rgba(96, 96, 96, .8);
$scrollbar-bg: linear-gradient(0deg, rgba(34, 34, 34, 0.5) 20%, rgba(68, 68, 68, 1) 50%, rgba(34, 34, 34, 0.5) 80%);
$scrollbar-bg-rgb: rgba(34, 34, 34, .5);
/* this makes the scrollbar a bit smaller.
* a matter of preference of course,
* but since 75% web traffic is mobile (and so uses swiping).
* i find those wide 90's style scrollbars unnecessary.
*
* to actually enable/apply the customizations. the html element in this case
* should get class "custom-scrollbar"
*/
.custom-scrollbar {
scrollbar-color: $scrollbar-color;
}
.custom-scrollbar::-webkit-scrollbar {
width: .5rem;
height: .5rem;
}
.custom-scrollbar::-webkit-scrollbar {
width: .5rem;
height: .5rem;
}
.custom-scrollbar::-webkit-scrollbar-track { /* track = background */
background: $scrollbar-bg-rgb;
background: $scrollbar-bg
}
.custom-scrollbar::-webkit-scrollbar-thumb { /* thumb = foreground*/
background: $scrollbar-color-rgb;
}
/* required : also in this order .. after defining customizations */
@import '../node_modules/bootstrap/scss/bootstrap';
/* optional */
@import '../node_modules/bootstrap-icons/font/bootstrap-icons';
Raw
custom-theme.scss
/*
create your own color mode besides light and dark.
example here i choose for "weird" . so the html element should get:
<html data-bs-theme="weird">
...
</html>
*/
[data-bs-theme="weird"] {
--bs-body-color: var(--bs-white);
--bs-body-color-rgb: #{to-rgb($white)};
--bs-body-bg: var(--bs-blue);
--bs-body-bg-rgb: #{to-rgb($blue)};
--bs-tertiary-bg: #{$blue-600};
.dropdown-menu {
--bs-dropdown-bg: #{mix($blue-500, $blue-600)};
--bs-dropdown-link-active-bg: #{$blue-700};
}
.btn-secondary {
--bs-btn-bg: #{mix($gray-600, $blue-400, .5)};
--bs-btn-border-color: #{rgba($white, .25)};
--bs-btn-hover-bg: #{darken(mix($gray-600, $blue-400, .5), 5%)};
--bs-btn-hover-border-color: #{rgba($white, .25)};
--bs-btn-active-bg: #{darken(mix($gray-600, $blue-400, .5), 10%)};
--bs-btn-active-border-color: #{rgba($white, .5)};
--bs-btn-focus-border-color: #{rgba($white, .5)};
--bs-btn-focus-box-shadow: 0 0 0 .25rem rgba(255, 255, 255, .2);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment