Base Theme

This is a solution for handling dark theme with Bootstrap. There are not many options for dynamic color shifting. There are some CSS variables that you can use, but Bootstrap Extensions advanced usage creates options like .bg-base-1 or .border-base-1 that will gracefully swap to the negative instance when switching themes.

Getting Started

Sass

@import "node_modules/@ngblaylock/bootstrap-extensions/src/scss/_base-theme.scss";

/*

Default Sass Variables:

$bse-prefix: "bse-" !default;
$base-1-light: $body-bg !default;
$base-2-light: shade-color($base-1-light, 3%) !default;
$base-3-light: shade-color($base-2-light, 3%) !default;
$base-4-light: shade-color($base-3-light, 3%) !default;
$base-i1-light: $body-color !default;
$base-i2-light: tint-color($base-i1-light, 9%) !default;
$base-i3-light: tint-color($base-i2-light, 9%) !default;
$base-i4-light: tint-color($base-i3-light, 9%) !default;
$base-1-dark: $body-bg-dark !default;
$base-2-dark: tint-color($base-1-dark, 3%) !default;
$base-3-dark: tint-color($base-2-dark, 3%) !default;
$base-4-dark: tint-color($base-3-dark, 3%) !default;
$base-i1-dark: $body-color-dark !default;
$base-i2-dark: shade-color($base-i1-dark, 9%) !default;
$base-i3-dark: shade-color($base-i2-dark, 9%) !default;
$base-i4-dark: shade-color($base-i3-dark, 9%) !default;
$enable-btn-base: true !default;

*/

CDN

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/@ngblaylock/bootstrap-extensions@0.1.1/dist/css/base-theme.min.css"
/>

Colors

base-1 uses the default background color, so light on light theme and dark on dark theme.
base-i1 uses the default body color, so dark on light theme and light on dark theme. The i stands for "Inverse".

Name	Light Theme	Dark Theme
base-1	#ffffff	#212529
base-2	#f7f7f7	#282c2f
base-3	#f0f0f0	#2e3235
base-4	#e9e9e9	#34383b
base-i1	#212529	#dee2e6
base-i2	#282c2f	#d7dbdf
base-i3	#2e3235	#d1d4d8
base-i4	#34383b	#cbced2

Link Example

link base-1 link base-2 link base-3 link base-4 link base-i1 link base-i2 link base-i3 link base-i4

<div class="vstack flex-wrap">
  <a href="#" class="link-base-1">link base-1</a>
  <a href="#" class="link-base-2">link base-2</a>
  <a href="#" class="link-base-3">link base-3</a>
  <a href="#" class="link-base-4">link base-4</a>
  <a href="#" class="link-base-i1">link base-i1</a>
  <a href="#" class="link-base-i2">link base-i2</a>
  <a href="#" class="link-base-i3">link base-i3</a>
  <a href="#" class="link-base-i4">link base-i4</a>
</div>

Background Example

You can either use .bg-base-1 or .text-bg-base-1.

base-1

base-2

base-3

base-4

base-i1

base-i2

base-i3

base-i4

<div class="hstack flex-wrap">
  <div class="p-3 text-bg-base-1">base-1</div>
  <div class="p-3 text-bg-base-2">base-2</div>
  <div class="p-3 text-bg-base-3">base-3</div>
  <div class="p-3 text-bg-base-4">base-4</div>
  <div class="p-3 text-bg-base-i1">base-i1</div>
  <div class="p-3 text-bg-base-i2">base-i2</div>
  <div class="p-3 text-bg-base-i3">base-i3</div>
  <div class="p-3 text-bg-base-i4">base-i4</div>
</div>

Buttons

One issue in general with Bootstrap is using buttons with themes. For example, in light mode you might have a .btn-outline-dark which looks and functions perfectly fine. If you switch to dark mode, it is invisible. Bootstrap Extensions provides additional buttons to respond to theme changes.

Toggle the theme to see how these buttons respond.

<div class="vstack gap-3 p-3 bg-base-1">
  <div class="hstack gap-3">
    <button class="btn btn-base-1">Button</button>
    <button class="btn btn-base-1" disabled>Disabled</button>
    <button class="btn btn-outline-base-1">Button</button>
    <button class="btn btn-outline-base-1" disabled>Disabled</button>
  </div>
  <div class="hstack gap-3">
    <button class="btn btn-base-2">Button</button>
    <button class="btn btn-base-2" disabled>Disabled</button>
    <button class="btn btn-outline-base-2">Button</button>
    <button class="btn btn-outline-base-2" disabled>Disabled</button>
  </div>
  <div class="hstack gap-3">
    <button class="btn btn-base-3">Button</button>
    <button class="btn btn-base-3" disabled>Disabled</button>
    <button class="btn btn-outline-base-3">Button</button>
    <button class="btn btn-outline-base-3" disabled>Disabled</button>
  </div>
  <div class="hstack gap-3">
    <button class="btn btn-base-4">Button</button>
    <button class="btn btn-base-4" disabled>Disabled</button>
    <button class="btn btn-outline-base-4">Button</button>
    <button class="btn btn-outline-base-4" disabled>Disabled</button>
  </div>
  <div class="hstack gap-3">
    <button class="btn btn-base-i1">Button</button>
    <button class="btn btn-base-i1" disabled>Disabled</button>
    <button class="btn btn-outline-base-i1">Button</button>
    <button class="btn btn-outline-base-i1" disabled>Disabled</button>
  </div>
  <div class="hstack gap-3">
    <button class="btn btn-base-i2">Button</button>
    <button class="btn btn-base-i2" disabled>Disabled</button>
    <button class="btn btn-outline-base-i2">Button</button>
    <button class="btn btn-outline-base-i2" disabled>Disabled</button>
  </div>
  <div class="hstack gap-3">
    <button class="btn btn-base-i3">Button</button>
    <button class="btn btn-base-i3" disabled>Disabled</button>
    <button class="btn btn-outline-base-i3">Button</button>
    <button class="btn btn-outline-base-i3" disabled>Disabled</button>
  </div>
  <div class="hstack gap-3">
    <button class="btn btn-base-i4">Button</button>
    <button class="btn btn-base-i4" disabled>Disabled</button>
    <button class="btn btn-outline-base-i4">Button</button>
    <button class="btn btn-outline-base-i4" disabled>Disabled</button>
  </div>
  <div class="hstack gap-3">
    <button class="btn btn-primary">Button</button>
    <button class="btn btn-primary" disabled>Disabled</button>
    <button class="btn btn-outline-primary">Button</button>
    <button class="btn btn-outline-primary" disabled>Disabled</button>
  </div>
</div>

Available Classes

These are classes where * can be either base-{1-4} or base-i{1-4}. More may be added as needed.

bg-*
border-*
btn-*
btn-outline-*
link-*
link-underline-*
text-*
text-bg-*

CSS Variables

--bse-base-1
--bse-base-2
--bse-base-3
--bse-base-4
--bse-base-i1
--bse-base-i2
--bse-base-i3
--bse-base-i4
--bse-base-1-rgb
--bse-base-2-rgb
--bse-base-3-rgb
--bse-base-4-rgb
--bse-base-i1-rgb
--bse-base-i2-rgb
--bse-base-i3-rgb
--bse-base-i4-rgb
--bse-base-1-hover
--bse-base-2-hover
--bse-base-3-hover
--bse-base-4-hover
--bse-base-i1-hover
--bse-base-i2-hover
--bse-base-i3-hover
--bse-base-i4-hover
--bse-base-1-active
--bse-base-2-active
--bse-base-3-active
--bse-base-4-active
--bse-base-i1-active
--bse-base-i2-active
--bse-base-i3-active
--bse-base-i4-active