Now Apple is forcing all apps in its app store to support dark mode. Also, most native Android apps already support the dark theme. Viewing a screen which white background when you enabled dark mode on your device will greatly harm the viewer's eyes.

Like lots of websites are made by bootstrap. So how can we get a solution with minimum changes and allows the website to support automatically dark theme switching?

Aiursoft website in white mode:

To detect if the current device is set to dark mode, there is a media query that can detect it easily.

@media (prefers-color-scheme: dark) {
    /*Write your CSS here. Only in dark mode will it take effect*/
}

And to detect dark mode in JavaScript:

if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
    // Only execute JavaScript here in dark mode.
}

To set the current browser color mode, it was differed by browsers.

Simply search the color mode in your browser settings will find it.

It also supports mobile browsers. For most mobile operating system also supports dark and light color mode.

To monitor dark mode status change, consider the following JavaScript:

var initDarkTheme = function () {
    if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
        // The user switched to dark mode.
    } else {
        // The user switched to light mode.
    }
}

initDarkTheme();

window.matchMedia('(prefers-color-scheme: dark)').addListener(initDarkTheme);

So, now we can detect if the dark mode enabled and when the user switches the mode, we just need to change some items' class:

var initDarkTheme = function () {
    if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
        // dark mode
        $('.navbar-light').addClass('navbar-dark');
        $('.navbar-light').removeClass('navbar-light');
        $('body').addClass('bg-dark');
        $('body').css('color', 'white');
        $('.modal-content').addClass('bg-dark');
        $('.modal-content').css('color', 'white');
        $('.container-fluid').addClass('bg-dark');
        $('.container-fluid').css('color', 'white');
        $('.list-group-item').addClass('bg-dark');
        $('.list-group-item').css('color', 'white');
        $('.content-wrapper').addClass('bg-dark');
        $('.card').addClass('bg-dark');
        $('.bg-light').addClass('bg-dark');
        $('.bg-light').removeClass('bg-light');
        $('.bg-white').addClass('bg-dark');
        $('.bg-white').removeClass('bg-white');
        $('.bd-footer').addClass('bg-dark');
        $('table').addClass('table-dark');
    }
}
initDarkTheme();

window.matchMedia('(prefers-color-scheme: dark)').addListener(initDarkTheme);

But it is not enough. We need to change some styles for some elements like input.

@media (prefers-color-scheme: dark) {
    .text-muted {
        color: #8c959d!important;
    }
    .content-wrapper {
        color: white!important;
    }
    .jumbotron {
        background-color: rgb(30, 32, 36)!important;
    }
    .breadcrumb {
        background-color: rgb(42, 43, 45)!important
    }
    pre {
        background-color: #444!important;
        color: #fff!important;
    }
    code {
        background-color: #444!important;
        color: #fff!important;
    }
    .form-control {
        background-color: rgb(35, 36, 37)!important;
        color: rgb(240, 234, 224)!important;
        border-color: rgb(71, 79, 87)!important;
    }
    .navbar-dark {
        box-shadow: 0 10px 39px -6px rgba(0, 0, 0, 0.3);
    }
    .custom-select {
        color: white!important;
        background-color: #495057!important;
    }
}

The dark website: