Javascript Dark/Light Mode based on User System Settings

<style>/*<!--<head>
<link href='https://www.blogger.com/dyn-css/authorization.css?targetBlogID=2059347577744616049&zx=6d210b50-17af-44b1-a0ee-a0c2cff2b066' media='none' onload='if(media!='all')media='all'' rel='stylesheet'/><noscript><link href='https://www.blogger.com/dyn-css/authorization.css?targetBlogID=2059347577744616049&zx=6d210b50-17af-44b1-a0ee-a0c2cff2b066' rel='stylesheet'/></noscript>
<meta name='google-adsense-platform-account' content='ca-host-pub-1556223355139109'/>
<meta name='google-adsense-platform-domain' content='blogspot.com'/>

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1633184471074840&host=ca-host-pub-1556223355139109" crossorigin="anonymous"></script>

<!-- data-ad-client=ca-pub-1633184471074840 -->

</head>--></head><body data-lang='default' data-theme='default' id='nB'>*/</style>

Javascript Dark/Light Mode based on User System Settings

How to Create Dark/Light Mode for Website using JavaScript/jQuery?,Create a Dark Mode for your website,How to add dark mode to your website,How to Make Night Mode on Blogger

What Is Dark Mode?

Dark Mode (also known as Night Node) is a popular design concept widely used in modern website design

It typically provides a switch that allows users to quickly toggle between Dark Mode and Light Theme according to their preferences or the current time.

Benefits Of Dark Mode:

As a developer, deploying dark mode on your website or web app has at least 3 benefits:

Save energy consumption on devices, as the screen demands more power when the background is white.
Reduce or prevent eyestrain when you stare at screens at nignt.
Provide users with more color scheme options.

Download source and tutorials

Watch tutorials Download

If everything is working as it should, congratulations, you now have a fully functional Dark Mode on your website!

AD

<script type="text/javascript" src="https://www.blogger.com/static/v1/widgets/1601900224-widgets.js"></script>
<script type='text/javascript'>
window['__wavt'] = 'AOuZoY6CdXryM0oisT6v2KAkqMkkRmDsdw:1761135857115';_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d2059347577744616049','//anutrickz.blogspot.com/2022/10/system-based-dark-mode.html','2059347577744616049');
_WidgetManager._SetDataContext([{'name': 'blog', 'data': {'blogId': '2059347577744616049', 'title': 'ANUTRICKZ', 'url': 'https://anutrickz.blogspot.com/2022/10/system-based-dark-mode.html', 'canonicalUrl': 'https://anutrickz.blogspot.com/2022/10/system-based-dark-mode.html', 'homepageUrl': 'https://anutrickz.blogspot.com/', 'searchUrl': 'https://anutrickz.blogspot.com/search', 'canonicalHomepageUrl': 'https://anutrickz.blogspot.com/', 'blogspotFaviconUrl': 'https://anutrickz.blogspot.com/favicon.ico', 'bloggerUrl': 'https://www.blogger.com', 'hasCustomDomain': false, 'httpsEnabled': true, 'enabledCommentProfileImages': true, 'gPlusViewType': 'FILTERED_POSTMOD', 'adultContent': false, 'analyticsAccountNumber': 'G-TS2WXBJ1XV', 'analytics4': true, 'encoding': 'UTF-8', 'locale': 'en', 'localeUnderscoreDelimited': 'en', 'languageDirection': 'ltr', 'isPrivate': false, 'isMobile': false, 'isMobileRequest': false, 'mobileClass': '', 'isPrivateBlog': false, 'isDynamicViewsAvailable': true, 'feedLinks': '\x3clink rel\x3d\x22alternate\x22 type\x3d\x22application/atom+xml\x22 title\x3d\x22ANUTRICKZ - Atom\x22 href\x3d\x22https://anutrickz.blogspot.com/feeds/posts/default\x22 /\x3e\n\x3clink rel\x3d\x22alternate\x22 type\x3d\x22application/rss+xml\x22 title\x3d\x22ANUTRICKZ - RSS\x22 href\x3d\x22https://anutrickz.blogspot.com/feeds/posts/default?alt\x3drss\x22 /\x3e\n\x3clink rel\x3d\x22service.post\x22 type\x3d\x22application/atom+xml\x22 title\x3d\x22ANUTRICKZ - Atom\x22 href\x3d\x22https://www.blogger.com/feeds/2059347577744616049/posts/default\x22 /\x3e\n\n\x3clink rel\x3d\x22alternate\x22 type\x3d\x22application/atom+xml\x22 title\x3d\x22ANUTRICKZ - Atom\x22 href\x3d\x22https://anutrickz.blogspot.com/feeds/6591240483115209588/comments/default\x22 /\x3e\n', 'meTag': '', 'adsenseClientId': 'ca-pub-1633184471074840', 'adsenseHostId': 'ca-host-pub-1556223355139109', 'adsenseHasAds': true, 'adsenseAutoAds': true, 'boqCommentIframeForm': true, 'loginRedirectParam': '', 'view': '', 'dynamicViewsCommentsSrc': '//www.blogblog.com/dynamicviews/4224c15c4e7c9321/js/comments.js', 'dynamicViewsScriptSrc': '//www.blogblog.com/dynamicviews/d324bc10ebcc3822', 'plusOneApiSrc': 'https://apis.google.com/js/platform.js', 'disableGComments': true, 'interstitialAccepted': false, 'sharing': {'platforms': [{'name': 'Get link', 'key': 'link', 'shareMessage': 'Get link', 'target': ''}, {'name': 'Facebook', 'key': 'facebook', 'shareMessage': 'Share to Facebook', 'target': 'facebook'}, {'name': 'BlogThis!', 'key': 'blogThis', 'shareMessage': 'BlogThis!', 'target': 'blog'}, {'name': 'X', 'key': 'twitter', 'shareMessage': 'Share to X', 'target': 'twitter'}, {'name': 'Pinterest', 'key': 'pinterest', 'shareMessage': 'Share to Pinterest', 'target': 'pinterest'}, {'name': 'Email', 'key': 'email', 'shareMessage': 'Email', 'target': 'email'}], 'disableGooglePlus': true, 'googlePlusShareButtonWidth': 0, 'googlePlusBootstrap': '\x3cscript type\x3d\x22text/javascript\x22\x3ewindow.___gcfg \x3d {\x27lang\x27: \x27en\x27};\x3c/script\x3e'}, 'hasCustomJumpLinkMessage': true, 'jumpLinkMessage': 'Continue Reading \xbb', 'pageType': 'item', 'postId': '6591240483115209588', 'postImageThumbnailUrl': 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmLeCUuf-cDs8dJFUmn999mmcHjVCbOywuYtD33v2V2n2VrqweJ0z7lWNpy-LdyiTel6oMNqRZG-nvSMP5buWYAHSDOpXHs3bcTXEpG2NZHw2LG5FJ2KSykG2FFjUyMwKQLaE8GRezIu4N2h-owU8aAbg3c1SLMuJokNfK4PdwSKq4yClIZJPbsmZV/s72-w640-c-h360/system%20based%20dark%20mode.png', 'postImageUrl': 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmLeCUuf-cDs8dJFUmn999mmcHjVCbOywuYtD33v2V2n2VrqweJ0z7lWNpy-LdyiTel6oMNqRZG-nvSMP5buWYAHSDOpXHs3bcTXEpG2NZHw2LG5FJ2KSykG2FFjUyMwKQLaE8GRezIu4N2h-owU8aAbg3c1SLMuJokNfK4PdwSKq4yClIZJPbsmZV/w640-h360/system%20based%20dark%20mode.png', 'pageName': 'Javascript Dark/Light Mode based on User System Settings', 'pageTitle': 'ANUTRICKZ: Javascript Dark/Light Mode based on User System Settings', 'metaDescription': 'How to Create Dark/Light Mode for Website using JavaScript/jQuery?,Create a Dark Mode for your website,How to add dark mode to your website,How to Mak'}}, {'name': 'features', 'data': {}}, {'name': 'messages', 'data': {'edit': 'Edit', 'linkCopiedToClipboard': 'Link copied to clipboard!', 'ok': 'Ok', 'postLink': 'Post Link'}}, {'name': 'template', 'data': {'name': 'custom', 'localizedName': 'Custom', 'isResponsive': true, 'isAlternateRendering': false, 'isCustom': true}}, {'name': 'view', 'data': {'classic': {'name': 'classic', 'url': '?view\x3dclassic'}, 'flipcard': {'name': 'flipcard', 'url': '?view\x3dflipcard'}, 'magazine': {'name': 'magazine', 'url': '?view\x3dmagazine'}, 'mosaic': {'name': 'mosaic', 'url': '?view\x3dmosaic'}, 'sidebar': {'name': 'sidebar', 'url': '?view\x3dsidebar'}, 'snapshot': {'name': 'snapshot', 'url': '?view\x3dsnapshot'}, 'timeslide': {'name': 'timeslide', 'url': '?view\x3dtimeslide'}, 'isMobile': false, 'title': 'Javascript Dark/Light Mode based on User System Settings', 'description': 'How to Create Dark/Light Mode for Website using JavaScript/jQuery?,Create a Dark Mode for your website,How to add dark mode to your website,How to Mak', 'featuredImage': 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmLeCUuf-cDs8dJFUmn999mmcHjVCbOywuYtD33v2V2n2VrqweJ0z7lWNpy-LdyiTel6oMNqRZG-nvSMP5buWYAHSDOpXHs3bcTXEpG2NZHw2LG5FJ2KSykG2FFjUyMwKQLaE8GRezIu4N2h-owU8aAbg3c1SLMuJokNfK4PdwSKq4yClIZJPbsmZV/w640-h360/system%20based%20dark%20mode.png', 'url': 'https://anutrickz.blogspot.com/2022/10/system-based-dark-mode.html', 'type': 'item', 'isSingleItem': true, 'isMultipleItems': false, 'isError': false, 'isPage': false, 'isPost': true, 'isHomepage': false, 'isArchive': false, 'isLabelSearch': false, 'postId': 6591240483115209588}}, {'name': 'widgets', 'data': [{'title': 'Blog Posts', 'type': 'Blog', 'sectionId': 'content', 'id': 'Blog1', 'posts': [{'id': '6591240483115209588', 'title': 'Javascript Dark/Light Mode based on User System Settings', 'featuredImage': 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmLeCUuf-cDs8dJFUmn999mmcHjVCbOywuYtD33v2V2n2VrqweJ0z7lWNpy-LdyiTel6oMNqRZG-nvSMP5buWYAHSDOpXHs3bcTXEpG2NZHw2LG5FJ2KSykG2FFjUyMwKQLaE8GRezIu4N2h-owU8aAbg3c1SLMuJokNfK4PdwSKq4yClIZJPbsmZV/w640-h360/system%20based%20dark%20mode.png', 'showInlineAds': false}], 'headerByline': {'regionName': 'header1', 'items': [{'name': 'author', 'label': 'by'}, {'name': 'timestamp', 'label': ''}]}, 'footerBylines': [{'regionName': 'footer1', 'items': [{'name': 'comments', 'label': 'Comment'}, {'name': 'labels', 'label': ''}]}], 'allBylineItems': [{'name': 'author', 'label': 'by'}, {'name': 'timestamp', 'label': ''}, {'name': 'comments', 'label': 'Comment'}, {'name': 'labels', 'label': ''}]}]}]);
_WidgetManager._RegisterWidget('_BlogView', new _WidgetInfo('Blog1', 'content', document.getElementById('Blog1'), {'cmtInteractionsEnabled': false}, 'displayModeFull'));
</script>
</body>