CSS for Light and Dark Modes:

This CSS code block will go into the <head> section of your blog's HTML.

Here's a quick summary of what each part of the code does:

The first <style> block defines the styles for the light theme using CSS variables for the main background color, main text color, and link color.

The second <style> block (with id='dark-mode') defines the styles for the dark theme, again using CSS variables. This style block is initially disabled, so the light theme will be used by default.

The <script> block does two things. First, when the page loads, it checks localStorage for the user's theme preference and enables the dark theme if the user prefers dark mode. Second, it adds a click event listener to the theme switch button that toggles the dark theme and saves the user's new preference to localStorage.

The <button id='theme-switcher'>Switch theme</button> is the theme switch button that the user can click to switch themes. Its ID is used in the JavaScript to add the click event listener.

Remember to place the code in the appropriate parts of your blog's HTML. The <style> blocks go in the <head> section, the <script> block goes near the end of the <body> section, and the <button> tag goes wherever you want the button to appear on the page.

Also, keep in mind that if your Blogger theme has its own CSS, you may need to add more specific styles to override those. The styles provided here are fairly basic and might not cover every element on your page.

In this CSS, the :root pseudo-class is used to define CSS variables for the main background color, main text color, and link color. The #dark-mode style block redefines these variables for dark mode. The body and a (link) elements then use these variables to set their color styles.

This CSS code block will go into the <head> section of your blog's HTML.

<style>

:root {

--main-bg-color: white;

--main-text-color: black;

--link-color: blue;

}

body {

background-color: var(--main-bg-color);

color: var(--main-text-color);

}

a {

color: var(--link-color);

}

/* Define other elements as needed... */

</style>

:root {

--main-bg-color: #282c36;

--main-text-color: #abb2bf;

--link-color: #61afef;

}

body {

background-color: var(--main-bg-color);

color: var(--main-text-color);

}

a {

color: var(--link-color);

}

/* Define other elements as needed... */

</style>

CSS for Light and Dark Modes:

This CSS code block will go into the <head> section of your blog's HTML.

// Load the user's theme preference from localStorage

var darkModeStyle = document.getElementById('dark-mode');

var themePreference = localStorage.getItem('themePreference');

if (themePreference === 'dark') {

darkModeStyle.disabled = false;

} else {

darkModeStyle.disabled = true;

}

document.getElementById('theme-switcher').addEventListener('click', function() {

// Toggle the dark mode stylesheet

if (darkModeStyle.disabled) {

darkModeStyle.disabled = false;

localStorage.setItem('themePreference', 'dark');

} else {

darkModeStyle.disabled = true;

localStorage.setItem('themePreference', 'light');

}

});

</script>

In this code, the comments have been expanded to explain more clearly what each part of the code does, which can be helpful for understanding and maintaining the code in the future.

// Get the dark-mode stylesheet and the user's stored theme preference

var darkModeStyle = document.getElementById('dark-mode');

var themePreference = localStorage.getItem('themePreference');

// If the user's preference is 'dark', enable the dark mode stylesheet

if (themePreference === 'dark') {

darkModeStyle.disabled = false;

}

// If the user's preference is not 'dark' (either 'light' or null), keep the dark mode stylesheet disabled

else {

darkModeStyle.disabled = true;

}

// Add a click event listener to the theme switch button

document.getElementById('theme-switcher').addEventListener('click', function() {

// If the dark mode stylesheet is currently disabled, enable it and store 'dark' as the user's preference

if (darkModeStyle.disabled) {

darkModeStyle.disabled = false;

localStorage.setItem('themePreference', 'dark');

}

// If the dark mode stylesheet is currently enabled, disable it and store 'light' as the user's preference

else {

darkModeStyle.disabled = true;

localStorage.setItem('themePreference', 'light');

}

});

</script>

JavaScript for Switching Themes and Saving User Preference:

This JavaScript code block will go at the end of your blog's HTML, right before the closing </body> tag.

// Load the user's theme preference from localStorage

var darkModeStyle = document.getElementById('dark-mode');

var themePreference = localStorage.getItem('themePreference');

if (themePreference === 'dark') {

darkModeStyle.disabled = false;

} else {

darkModeStyle.disabled = true;

}

document.getElementById('theme-switcher').addEventListener('click', function() {

// Toggle the dark mode stylesheet

if (darkModeStyle.disabled) {

darkModeStyle.disabled = false;

localStorage.setItem('themePreference', 'dark');

} else {

darkModeStyle.disabled = true;

localStorage.setItem('themePreference', 'light');

}

});

</script>

This JavaScript loads the user's theme preference from localStorage when the page loads. If the user prefers dark mode, it enables the dark mode stylesheet. If the user prefers light mode (or if there's no preference stored), it disables the dark mode stylesheet. When the user switches themes, it saves their new preference to localStorage.

The placement of the theme switch button depends largely on your blog's design and layout, as well as your personal preference. Here are a few common places where you might want to put the switch:

Header or Navbar: If your blog has a header or navigation bar at the top of the page, you could add the switch there. This makes it easily accessible from any part of the page.
Sidebar: If your blog has a sidebar, this could be another good place for the theme switch. This is especially true if the sidebar contains other interactive elements or settings.
Footer: The footer can be a less obtrusive place for the switch, although it's also less immediately visible to users.

Remember, the button can be added anywhere in the HTML where you want it to appear. You just need to place the button code in the appropriate part of the HTML. For example, if you wanted to place the switch in the header, you might do something like this:

<header>
<h1>My Blog</h1>
<nav>

</nav>
<button id="theme-switcher">Switch theme</button>
</header>

In this example, the theme switch button is part of the header, next to the blog title and navigation links. You would adjust this code to fit the structure and style of your blog's HTML.

But remember, the button <button id='theme-switcher'>Switch theme</button> should be also inside the <body> tag, and not inside the <head> tag, because it's a visible element of your page.

Finally, add the switch button somewhere in your blog's HTML where you want it to appear:

<button id="theme-switcher">Switch theme</button>

Search This Blog

Settings for Blogger