Data

Tools

Indexes

Applications

Experiments

Open Source Science

https://github.com/clashsoft/bootstrap-darkmode

Stylesheet and scripts for implementing dark mode with Bootstrap 4

https://github.com/clashsoft/bootstrap-darkmode

Science Score: 26.0%

This score indicates how likely this project is to be science-related based on various indicators:

  • ○
    CITATION.cff file
  • ✓
    codemeta.json file
    Found codemeta.json file
  • ✓
    .zenodo.json file
    Found .zenodo.json file
  • ○
    DOI references
  • ○
    Academic publication links
  • ○
    Committers with academic emails
  • ○
    Institutional organization owner
  • ○
    JOSS paper metadata
  • ○
    Scientific vocabulary similarity
    Low similarity (12.6%) to scientific vocabulary

Keywords

bootstrap bootstrap-theme dark-mode dark-theme

Keywords from Contributors

archival projection profiles interactive sequences generic observability autograding hacking shellcodes
Last synced: 5 months ago · JSON representation

Repository

Stylesheet and scripts for implementing dark mode with Bootstrap 4

Basic Info
  • Host: GitHub
  • Owner: Clashsoft
  • License: bsd-3-clause
  • Language: HTML
  • Default Branch: master
  • Homepage:
  • Size: 579 KB
Statistics
  • Stars: 43
  • Watchers: 4
  • Forks: 8
  • Open Issues: 0
  • Releases: 18
Topics
bootstrap bootstrap-theme dark-mode dark-theme
Created over 6 years ago · Last pushed over 1 year ago
Metadata Files
Readme Changelog License

README.md

Bootstrap Darkmode

npm version

[!Warning] Bootstrap v5.3 natively provides a dark color mode. As such, this package will no longer be actively developed. Major bugs, security issues and Pull Requests will still be reviewed however. Contributions are welcome.

This project provides a stylesheet and two scripts that allow you to implement a dark theme 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!).

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

Usage

With NPM/Yarn/PNPM

Install the npm package:

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

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

scss @import "~bootstrap-darkmode/scss/darktheme";

Via unpkg.com

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

    ```html <!-- ... --> <!-- Bootstrap CSS ... -->

    <!-- Dark mode CSS -->
<link rel="stylesheet" href="https://unpkg.com/bootstrap-darkmode@0.7.0/css/darktheme.css"/>
<!-- ... -->

    ```

  2. Load the theme script as the first thing in <body>.

    html <body> <script src="https://unpkg.com/bootstrap-darkmode@0.7.0/bundles/bootstrap-darkmode.umd.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.

Import

ES module import:

js import {ThemeConfig, writeDarkSwitch} from 'bootstrap-darkmode';

Browser:

js const bootstrapDarkmode = window['bootstrap-darkmode']; const ThemeConfig = bootstrapDarkmode.ThemeConfig; const writeDarkSwitch = bootstrapDarkmode.writeDarkSwitch;

Theme

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

js 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:

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

Configuration

Bootstrap Darkmode can be configured regarding both colors and the way the JavaScript helper behaves.

SCSS

Many colors can be changed via SCSS variables, similar to how Bootstrap allows changing the theme. You can find all variables in _variables.scss. To change them, just put a new value before importing darktheme.scss.

```scss $dark-body-bg: #111;

@import "~bootstrap-darkmode/scss/darktheme"; ```

JavaScript

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

js 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:

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

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

Owner

  • Name: Adrian Kunz
  • Login: Clashsoft
  • Kind: user
  • Location: Kassel, Germany
  • Company: University of Kassel

Hi there, I'm Adrian and currently a PhD Student of Computer Science.

GitHub Events

Total
Last Year

Committers

Last synced: over 1 year ago

All Time
  • Total Commits: 150
  • Total Committers: 3
  • Avg Commits per committer: 50.0
  • Development Distribution Score (DDS): 0.033
Past Year
  • Commits: 4
  • Committers: 2
  • Avg Commits per committer: 2.0
  • Development Distribution Score (DDS): 0.25
Top Committers
Name Email Commits
Adrian Kunz c****t@h****m 145
dependabot[bot] 4****] 4
Vít Stanislav s****t@g****m 1

Issues and Pull Requests

Last synced: 6 months ago

All Time
  • Total issues: 20
  • Total pull requests: 15
  • Average time to close issues: 6 months
  • Average time to close pull requests: 3 months
  • Total issue authors: 5
  • Total pull request authors: 3
  • Average comments per issue: 1.55
  • Average comments per pull request: 1.07
  • Merged pull requests: 7
  • Bot issues: 0
  • Bot pull requests: 11
Past Year
  • Issues: 0
  • Pull requests: 1
  • Average time to close issues: N/A
  • Average time to close pull requests: about 1 hour
  • Issue authors: 0
  • Pull request authors: 1
  • Average comments per issue: 0
  • Average comments per pull request: 0.0
  • Merged pull requests: 1
  • Bot issues: 0
  • Bot pull requests: 1
View more stats
Top Authors
Issue Authors
  • Clashsoft (16)
  • virtumbe (1)
  • henrikfiedler (1)
  • larryathey (1)
  • slaweet (1)
Pull Request Authors
  • dependabot[bot] (16)
  • Clashsoft (2)
  • slaweet (2)
Top Labels
Issue Labels
bug (12) feature (6) question (1)
Pull Request Labels
dependencies (16) feature (3) documentation (1) enhancement (1)

Packages

  • Total packages: 1
  • Total downloads:
    • npm 1,417 last-month
  • Total dependent packages: 2
  • Total dependent repositories: 28
  • Total versions: 20
  • Total maintainers: 1
npmjs.org: bootstrap-darkmode

Stylesheet and Scripts for implementing dark mode with Bootstrap 4

  • Versions: 20
  • Dependent Packages: 2
  • Dependent Repositories: 28
  • Downloads: 1,417 Last month
Rankings
Downloads: 2.3%
Dependent repos count: 2.4%
Average: 5.4%
Stargazers count: 6.5%
Forks count: 6.9%
Dependent packages count: 9.0%
Maintainers (1)
clashsoft
Last synced: 6 months ago

Dependencies

package.json npm
  • @angular/compiler ^12.1.1 development
  • @angular/compiler-cli ^12.1.1 development
  • @angular/core ^12.1.1 development
  • bootstrap ^4.6.0 development
  • cpx ^1.5.0 development
  • ng-packagr ^12.1.1 development
  • sass ^1.35.2 development
  • typescript ^4.3.5 development
pnpm-lock.yaml npm
  • 504 dependencies