Stylesheet and scripts for implementing dark mode with Bootstrap 4

Stylesheet and scripts for implementing dark mode with Bootstrap 4

Stylesheet and scripts for implementing dark mode with Bootstrap 4 .This project provides a stylesheet and two scripts that allow you to implement Dark Mode on your website. It is initially loaded based on user preference, can be toggled via a switch, and is saved via `localStorage`.

Bootstrap Dark Mode

This project provides a stylesheet and two scripts that allow you to implement Dark Mode on your website. It is initially loaded based on user preference, can be toggled via a switch, and is saved via localStorage.

You can view the test page with all default bootstrap components in light and dark (thanks to juzraai!).

Note that not all components are fully supported yet. Mostly the contextual color classes can cause problems.

If you are using Angular, check out ng-bootstrap-darkmode.

Usage

With NPM/Yarn/PNPM

Install the npm package:

$ npm install bootstrap-darkmode
$ yarn add bootstrap-darkmode
$ pnpm install bootstrap-darkmode

Include the stylesheet, e.g. in styles.scss:

@import "~bootstrap-darkmode/darktheme";

Via unpkg.com

  1. Put the stylesheet link in <head>. Do not forget to add bootstrap.

    <head>
        <!-- ... -->
        <!-- Bootstrap CSS ... -->
    
        <!-- Dark mode CSS -->
        <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/darktheme.css"/>
        <!-- ... -->
    </head>
  2. Load the theme script as the first thing in <body>.

    <body>
    <script src="https://unpkg.com/[email protected]/dist/theme.js"></script>
    <!-- ... --->

Building Yourself

  1. Clone this repo.
  2. Run npm build.
  3. Find darktheme.css and theme.js in the dist/ directory.
  4. Follow the steps for unpkg.com, but replace the links with whatever local paths you put the files in.

Setup

If you are using ng-bootstrap-darkmode, you can skip this section entirely. It comes with its own JavaScript implementation that is used very differently.

Theme

As soon as possible after <body>, initialize the config and load the theme:

const themeConfig = new ThemeConfig();
// place customizations here
themeConfig.initTheme();

Loading the theme early shortens the time until the white default background becomes dark.

Dark Switch

If you want to use the default dark switch, load the switch script and add the element using this code:

// this will write the html to the document and return the element.
const darkSwitch = writeDarkSwitch(themeConfig);

Configuration

You can listen to theme changes by registering a callback with themeChangeHandlers:

config.themeChangeHandlers.push(theme => console.log(`using theme: ${theme}`));

To change the way the theme is persisted, you can change the loadTheme and saveTheme functions:

themeConfig.loadTheme = () => {
    // custom logic
    return 'dark';
};

themeConfig.saveTheme = theme => {
    // custom logic
    console.log(theme);
};

Download Details:

Author: Clashsoft

Source Code: https://github.com/Clashsoft/bootstrap-darkmode

javascript bootstrap

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

The essential JavaScript concepts that you should understand

The essential JavaScript concepts that you should understand - For successful developing and to pass a work interview

How to Add Modals with JavaScript and Bootstrap 5

In this JavaScript and Bootstrap 5 tutorial, we’ll look at how to add modals with JavaScript and Bootstrap 5. Bootstrap 5 is in alpha when this is written and it’s subject to change. Bootstrap is a popular UI library for any JavaScript apps.

How to Manipulate Dropdowns with JavaScript and Bootstrap 5

In this Bootstrap 5 tutorial, we’ll look at how to manipulate dropdowns with JavaScript and add content with Bootstrap 5. Bootstrap 5 is in alpha when this is written and it’s subject to change. Bootstrap is a popular UI library for any JavaScript apps.

Bootstrap 5 JavaScript Plugins Tutorial

In this tutorial you will learn bootstrap 5 javascript plugin tutorial in Hindi, Urdu.You can learn how to use bootstrap 5 javascript plugin tutorial in hind...

Data Types In JavaScript

JavaScript data types are kept easy. While JavaScript data types are mostly similar to other programming languages; some of its data types can be unique. Here, we’ll outline the data types of JavaScript.