Web Page Dark Mode Script

A single script can convert an entire webpage into Dark Mode

Web Page Dark Mode Script

A dark mode script or a piece of code that can be used to apply a dark color scheme to a webpage, providing an alternative to the default light theme.

This can improve readability and reduce eye strain for users who prefer to use dark backgrounds on their screens. The script typically involves setting the background color to a dark shade and adjusting the colors of other elements on the page to ensure they are visible against the dark background.

Dark mode on a webpage allows for a more immersive and elegant reading experience, reducing strain on the eyes and enhancing the overall aesthetic of the site.

Here is an example of a simple JavaScript code that can be used to apply a dark color scheme to a website:

// Set to true to enable dark mode
var darkMode = true; 

// Apply dark mode styles to website
if (darkMode) {
    const style = document.createElement('style');
    style.type = 'text/css'
    const styleCss = 'html { filter: invert(1); } img, g-emoji { filter: invert(1) }' ;
    style.styleSheet ? (style.styleSheet.cssText = styleCss) : style.appendChild(document.createTextNode(styleCss));
    document.getElementsByTagName('head')[0].appendChild(style);
}

This code checks for a boolean variable called darkMode, which can be set to true to enable dark mode, or false to disable it. If darkMode is set to true, the code applies dark mode styles to the website by setting the background color to a dark grey and the text color to white.

This is just a simple example, and the code could be expanded to include additional styles and customization options for the dark mode theme.