Bootstrap - Color Modes

Ethan D. -

Light Mode

Light mode is the default color mode in Bootstrap, with a light background and dark text. This color scheme works for most websites and applications as it gives a clean and readable interface. The light mode in Bootstrap uses a white and light gray background with dark gray or black text, creating a visually appealing and user-friendly design.

By default, Bootstrap's light mode uses a white background color (#fff) for the <body> element and a dark text color (#212529) for most of the text content. This high contrast combination makes the content easy to read and navigate. Bootstrap also provides default colors for various UI components, such as buttons, alerts, and form elements, which complement the light mode color scheme.

Changing Light Mode

While the default light mode in Bootstrap offers a pleasant and functional design, you may want to change it to match your brand or design preferences. Bootstrap provides several ways to modify the light mode color scheme:

  1. Changing the default colors: Bootstrap uses CSS variables to define the default colors for various components. You can change these colors by overriding the CSS variables in your custom stylesheet.

Example: Changing the primary color

   :root {
     --bs-primary: #your-custom-color;
   }

This will update the primary color across all relevant components in the light mode.

  1. Modifying the color scheme using Sass variables: If you are using the Sass version of Bootstrap, you have more control over the color scheme. Bootstrap provides Sass variables that define the colors used in light mode. You can modify these variables in your Sass file before importing Bootstrap.

Example: Modifying Sass variables

   $primary: #your-custom-color;
   $secondary: #another-custom-color;

   @import "bootstrap";

By changing the values of these variables, you can create a custom color scheme that fits your design requirements.

  1. Applying custom styles to light mode elements: In addition to modifying the color variables, you can also apply custom styles to specific elements in light mode. Bootstrap provides CSS classes for different components and utilities, allowing you to target and style them individually.

Example: Custom button styles

   <button class="btn btn-primary custom-button">Custom Button</button>
   .custom-button {
     background-color: #your-custom-color;
     color: #your-custom-text-color;
   }

By applying custom styles, you can further customize the appearance of light mode elements to match your desired design.

Dark Mode

Dark mode is a popular feature in modern web design, and Bootstrap supports it. Dark mode uses a dark background with light text. This color scheme improves accessibility, reduces eye strain, and can give a visually appealing alternative to the traditional light mode.

Bootstrap's dark mode inverts the color scheme, using a dark background color (#212529) for the <body> element and light text color (#fff) for most of the text content. The dark mode also changes the colors of various UI components, such as buttons, alerts, and form elements, to keep proper contrast and readability.

Enabling Dark Mode

To enable dark mode in Bootstrap, you can use the data-bs-theme="dark" attribute on the <html> or <body> element. This attribute tells Bootstrap to apply the dark mode styles to the entire page.

Example: HTML Dark Mode Attribute

<html data-bs-theme="dark">
  <!-- Page content -->
</html>

You can also apply dark mode to specific elements using the data-bs-theme="dark" attribute on the desired element.

Example: Dark Mode on Specific Element

<div data-bs-theme="dark">
  <!-- Dark mode content -->
</div>

If you want to toggle dark mode dynamically, you can use JavaScript to add or remove the data-bs-theme="dark" attribute based on user interaction or system preferences.

Example: JavaScript Dark Mode Toggle

const toggleDarkMode = () => {
  document.body.setAttribute('data-bs-theme', 
    document.body.getAttribute('data-bs-theme') === 'dark' ? 'light' : 'dark'
  );
}

Customizing Dark Mode

Just like with light mode, you can change dark mode in Bootstrap to match your brand or design preferences. Here are a few ways to modify the dark mode color scheme:

  1. Modifying the dark mode color palette: Bootstrap uses CSS variables to define the colors used in dark mode. You can override these variables in your custom stylesheet to change the dark mode colors.

Example: Modifying Dark Mode Color Palette

   [data-bs-theme="dark"] {
     --bs-primary: #your-custom-color;
   }

This will update the primary color in dark mode across all relevant components.

  1. Adjusting the contrast ratio for better readability: To make sure your dark mode content is easily readable, you may need to adjust the contrast ratio between the background and text colors. Bootstrap provides utility classes for setting text and background colors, which you can use to fine-tune the contrast.

Example: Adjusting Contrast in Dark Mode

   <div data-bs-theme="dark">
     <p class="text-light">Light text on a dark background</p>
   </div>
  1. Styling dark mode components and utilities: Bootstrap's dark mode applies styles to various components and utilities automatically. However, you can further customize their appearance by targeting them with CSS selectors and applying your own styles.

Example: Styling Dark Mode Components

   [data-bs-theme="dark"] .btn-primary {
     background-color: #your-custom-color;
     border-color: #your-custom-border-color;
   }

By styling dark mode components and utilities, you can create a cohesive and visually appealing dark mode design.

Color Mode Toggler

Bootstrap lets you implement a color mode toggler, allowing users to switch between light and dark modes. The color mode toggler is a feature that improves the user experience and gives users control over their preferred color scheme.

To implement a color mode toggler in Bootstrap, you can use the data-bs-toggle="dark" attribute on a button or any other clickable element. When the element is clicked, Bootstrap toggles the data-bs-theme attribute between "light" and "dark" on the <html> or <body> element, applying the color mode styles.

Example: HTML Button for Toggling Dark Mode

<button type="button" class="btn btn-secondary" data-bs-toggle="dark">
  Toggle Dark Mode
</button>

You can also create a custom color mode toggler component. This allows you to have more control over the appearance and behavior of the toggler. You can create a custom button or any other element and attach the JavaScript code to handle the color mode switching.

Example: Custom Color Mode Toggler Component

<div class="custom-color-mode-toggler" onclick="toggleColorMode()">
  <span class="toggler-icon"></span>
</div>
.custom-color-mode-toggler {
  cursor: pointer;
}

.toggler-icon {
  /* Custom styles for the toggler icon */
}

JavaScript Implementation

To make the color mode toggler work, you need to implement the JavaScript code. The JavaScript code listens for color mode toggle events, updates the data-bs-theme attribute dynamically, and can also save the color mode preference using local storage.

Example: JavaScript Code for Color Mode Toggler

const toggleColorMode = () => {
  const body = document.body;
  const currentTheme = body.getAttribute('data-bs-theme');
  const newTheme = currentTheme === 'light' ? 'dark' : 'light';

  body.setAttribute('data-bs-theme', newTheme);
  localStorage.setItem('color-mode', newTheme);
}

// Set the initial color mode based on user preference or default
const setInitialColorMode = () => {
  const storedColorMode = localStorage.getItem('color-mode');
  const prefersDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;

  if (storedColorMode) {
    document.body.setAttribute('data-bs-theme', storedColorMode);
  } else if (prefersDarkMode) {
    document.body.setAttribute('data-bs-theme', 'dark');
  }
}

setInitialColorMode();

In this JavaScript code:

  1. The toggleColorMode function is called when the color mode toggler is clicked. It gets the current color mode from the data-bs-theme attribute, determines the new color mode, and updates the attribute. It also saves the color mode preference in the local storage.
  2. The setInitialColorMode function is called when the page loads. It checks if there is a saved color mode preference in the local storage and applies it. If there's no saved preference, it checks if the user's system preference is set to dark mode using the prefers-color-scheme media query and sets the color mode.

By implementing this JavaScript code, the color mode toggler becomes fully functional. It allows users to switch between light and dark modes, and their preference is remembered for future visits.