Implementing Dark Mode in H5: Strategies, Code Samples, and Compatibility

Background: Dark theme allows users to select a system‑wide dark appearance, reducing power consumption on certain screens and improving visibility for users sensitive to bright light; many apps and browsers now support dark mode.

Advantages: Significant power savings, better visibility for low‑vision users, and comfortable usage in dim environments.

System compatibility: macOS 10.14 introduced dark mode, iOS 13 added it in 2019, Android 10 (API 29) and later support dark themes, and Windows 10 includes dark mode as of October 2018.

H5 adaptation: To implement dark mode in H5 without page reload, use JavaScript to dynamically toggle CSS classes based on system theme changes, allowing real‑time style updates.

Method 1 – JavaScript dynamic class control: Initialize a callback to receive the system dark mode state and change CSS classes accordingly.

// Prepare callback function
_iosCallBack: function() {
    window.getDarkInfo = function(jsonString) {
        // Process jsonString …
    };
},

// Initialization
_initFinishDarkModel: function() {
    var params = {
        "routerURL": "router://JDWebViewBusinessModule/getJDAppearanceState",
        "callBackName": "getDarkInfo", // optional
        "callBackId": "finish" // optional
    };
    if (window.webkit && window.webkit.messageHandlers && window.webkit.messageHandlers.JDAppUnite && window.webkit.messageHandlers.JDAppUnite.postMessage) {
        window.webkit.messageHandlers.JDAppUnite.postMessage({
            'method': 'callSyncRouterModuleWithParams',
            'params': JSON.stringify(params)
        });
    }
},

// iOS user switches system dark mode
_changeSystemDarkSkin: function() {
    window.jdAppearanceDidChangedNotification = function(state) {
        if (state == 1) { // dark mode
            // do something …
        } else { // light mode
            // do something …
        }
    };
},

Method 2 – CSS media queries: Use the @media (prefers-color-scheme: dark) and light queries to automatically apply different styles.

.day   { background: #eee; color: black; }
.night { background: #333; color: white; }

@media (prefers-color-scheme: dark) {
  .day.dark-scheme   { background: #333; color: white; }
  .night.dark-scheme { background: black; color: #ddd; }
}

@media (prefers-color-scheme: light) {
  .day.light-scheme   { background: white; color: #555; }
  .night.light-scheme { background: #eee; color: black; }
}

.day, .night {
  display: inline-block;
  padding: 1em;
  width: 7em;
  height: 2em;
  vertical-align: middle;
}

Compatibility detection: Use window.matchMedia to check the prefers-color-scheme feature at runtime.

if (window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches) {
    // dark mode – do something
}

Extensions: Additional media features such as inverted-colors , prefers-reduced-motion , prefers-reduced-transparency , prefers-contrast , and forced-colors can be leveraged for broader UI adaptations.

Conclusion: Both JavaScript class toggling and CSS media queries can achieve dark mode in H5; the JavaScript approach has no compatibility issues, while the media‑query method may require fallbacks, and developers should also handle safe‑area insets on devices like iPhone X to avoid layout gaps.