Contents
What are Themes Good For?
Setting Up the HTML Document
Setting Up the Page Structure
Writing the Page Content
Setting Up the Theme Selector Menu HTML
Setting Up the CSS
Adding the Common CSS File
Designing and Including the Theme CSS
Setting Up the JavaScript
Reviewing the Code and Output
What are Themes Good For?
Have you ever wished that the colors and fonts of a page could be customized by each user? Even if you have only mild experience in web development, a basic form of this feature can be implemented with just CSS and simple JavaScript! If you already have a basic knowledge of HTML (Hyper Text Markup Language), CSS (Cascading Style Sheets), and JavaScript, read on!
In this tutorial, we will be creating a website that can have changing themes, which is a useful feature for a variety of reasons. To begin with, it is important because a lot of frequently used information base services, communication platforms, and task management apps are used by a wide variety of people with different visual preferences and needs. For instance, some people prefer to view websites in dark mode, and some do not. In addition, some people find it easier to view a website with a sans-serif font, while some people prefer serif font. Finally, some people just like the ability to apply customization to their web pages. Having the ability to adjust the page at even a basic level can significantly boost user-friendliness.
Setting Up the HTML Document
To begin making this project, create a folder on your desktop or within another file directory. This will be the root folder (home or main folder) for the project. Then, open the folder in your preferred code editor. For this tutorial, I will be demonstrating the steps in Visual Studio Code.
| Reminder Tip! |
| When writing HTML, a pair of tags such as <div> or a single-tag object such as <hr> on a page is called an element. Elements with can be nested inside other double-tag elements without any limit to the number of nesting. |
Setting Up the Page Structure
The basics of the site structure will have to be laid out first, as for any HTML project. Inside the home folder for the project, create a folder called index.html. Fill out the standard head and body tags for the project.
First, as a frame for everything, include basic tags in the HTML file:
- Place the doctype for HTML5 at the top.
- Use HTML tags to encapsulate the metadata within the <head> and the page-displayed content within the <body> element.
- Insert the <head> tags, and within the head, tags include the charset, title, and description.
- Insert the <body> tags after the closing <head> tags.
- Insert a pair of <div> tags and give this element a class of “everything-wrapper.”
The resulting HTML should look like this:
Writing the Page Content
Next, we are going to insert the page content in the HTML file. This will not have any styling until the CSS stage, but getting all of the structure and tags right will be important:
- Insert a pair of header tags inside the “everything-wrapper” <div> tags and include a pair of H1 tags with title content between them.
- Insert a pair of <div> tags and assign it a class “content-wrapper.”
- Insert a pair of <main> tags between the content-wrapper div tags and within the main tags, place text content such as lorum ipsum text from www.lorumipsum.io. Make sure to include a header within the main element.
- Insert a pair of <aside> tags just after the main element with a class of “about-author”; inside this aside element, include content about yourself.
- After the end tag for the content-wrapper div, include a pair of <footer> tags. Then insert some information within a pair of <p> (paragraph) tags.
The end result should look something like this; the text content within the tags can be different, but the element tags and their classes should be the same.
With perhaps some variation in the text content, the entire document thus far should look like this:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Webpage with Multiple Themes</title>
<meta name="description" content="A webpage with more than just dark mode and light mode.">
</head>
<body>
<div class="everything-wrapper">
<header>
<h1>Site with Many Themes</h1>
</header>
<div class="content-wrapper">
<main>
<h2>Theme Selector with JavaScript & CSS</h2>
<p> It's very easy to create a theme selector with JavaScript & CSS. </p>
<p> It will even save on page refresh! 😎 </p>
<p>I added a lot more themes and an actual layout to the page, which the original tutorial did not include. You can change the themes with the dropdown menu in the bottom right corner of the page.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem doloribus molestiae at soluta provident aut hic, aliquam eos esse porro ratione minima, doloremque laboriosam obcaecati accusantium ipsa maiores sequi tenetur. </p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem doloribus molestiae at soluta provident aut hic, aliquam eos esse porro ratione minima, doloremque laboriosam obcaecati accusantium ipsa maiores sequi tenetur. </p>
</main>
<aside class="about-author">
<h3>About the Author</h3>
<p>This was made with the help of a tutorial.</p>
</aside>
</div>
<footer>
<p>Copyright 2022 <br> a tutorial completed by me</p>
</footer>
</div>
</body>
</html>| Reminder Tip! |
| When writing HTML, do not put text in a div, main, aside, or any other element without wrapping it in a text tag such as <p>, <a>, <li>, or <span>. |
Setting Up the Theme Selector Menu HTML
In order for the theme selection feature to work, we will need a theme selection menu! This can be accomplished with a pair of select tags and some elements. The HTML markup for this will be made as follows:
- Create a div just below the <header> tags and assign it the class “theme-box.”
- Insert a pair of <p> (paragraph) tags and between them, write “Choose a Theme.”
- Insert a pair of <select> tags and assign it an ID of “themeSelect.”
- Include option tags within the select element that exactly follow the code below.
div class="theme-box">
<p>Choose a Theme:</p>
<select id="themeSelect">
<option value="default">Default</option>
<option value="dark">Dark</option>
<option value="sepia">Sepia</option>
<option value="oldbook">Old Book</option>
<option value="bluegreen">Blue Green</option>
</select>
</div>All of the index.html code should now look like this:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Webpage with Multiple Themes</title>
<meta name="description" content="A webpage with more than just dark mode and light mode.">
</head>
<body>
<div class="everything-wrapper">
<header>
<h1>Site with Many Themes</h1>
</header>
<div class="theme-box">
<p>Choose a Theme:</p>
<select id="themeSelect">
<option value="default">Default</option>
<option value="dark">Dark</option>
<option value="sepia">Sepia</option>
<option value="oldbook">Old Book</option>
<option value="bluegreen">Blue Green</option>
</select>
</div>
<div class="content-wrapper">
<main>
<h2>Theme Selector with JavaScript & CSS</h2>
<p> It's very easy to create a theme selector with JavaScript & CSS. </p>
<p> It will even save on page refresh! 😎 </p>
<p>I added a lot more themes and an actual layout to the page, which the original tutorial did not include. You can change the themes with the dropdown menu in the bottom right corner of the page.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem doloribus molestiae at soluta provident aut hic, aliquam eos esse porro ratione minima, doloremque laboriosam obcaecati accusantium ipsa maiores sequi tenetur. </p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem doloribus molestiae at soluta provident aut hic, aliquam eos esse porro ratione minima, doloremque laboriosam obcaecati accusantium ipsa maiores sequi tenetur. </p>
</main>
<aside class="about-author">
<h3>About the Author</h3>
<p>This was made with the help of a tutorial.</p>
</aside>
</div>
<footer>
<p>Copyright 2022 <br> a tutorial completed by me</p>
</footer>
</div>
</body>
</html>
Setting Up the CSS
In order to make the site look correct, the page needs to be connected to some CSS stylesheets. We will need multiple stylesheets with one for the main site settings, and then one CSS file for each theme. For simplicity’s sake, the code for the “common.css” file will be included all at once.
Adding the Common CSS File
First, add a CSS folder to the home folder for your project. Next, inside this folder, create a CSS file called “common.css.” Then inside this file, paste the CSS in the common.css figure.
The functionality of the entire project hinges on the use of CSS variables, which are CSS property values such as “var(–primary-background-color);” and similar in the common.css style sheet included below. The values for these variables will be determined by the theme files, which will be added in the next section.
The common.css file should contain the CSS below:
@charset "UTF-8";
body{
background-color: var(--primary-background-color);
background-image: var(--primary-background-image);
color: var(--primary-text-color);
font-family: var(--primary-font-stack);
padding: 0;
}
select{
padding: 5px;
border-radius: 10px;
background-color: var(--primary-background-color);
border: 3px solid var(--primary-text-color);
color: var(--primary-text-color);
}
header, footer{
background-color: var(--primary-text-color);
padding: 10px 25px;
margin-bottom: 10px;
}
header h1, footer p {
color: var(--primary-background-color);
}
main{
border: 3px solid var(--primary-text-color);
padding: 15px;
border-radius: 4px;
margin: 10px;
flex-shrink: 1;
flex-grow: 2;
}
aside{
border: 3px solid var(--primary-text-color);
padding: 15px;
border-radius: 4px;
margin: 10px;
flex-shrink: 1;
flex-grow: 0;
}
.content-wrapper{
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: center;
align-items: flex-start;
}
@media screen and (max-width: 800px) {
.content-wrapper{
flex-wrap: wrap;
align-content: stretch;
align-items: stretch;
}
aside{
width: 100%;
}
}
.theme-box{
position: fixed;
bottom: 1px;
right: 1px;
border: 3px solid var(--primary-text-color);
background-color: var(--primary-background-color);
padding: 5px;
border-radius: 4px;
margin: 10px;
}
.theme-box p{
display: inline;
}
footer{
margin-top: 20vw;
padding-bottom: 10vh;
}
The file tree should have the common.css file contained within a folder named “css.”
Designing and Including the Theme CSS
In order for the themes to be changeable, we will have multiple theme files that simply contain different values for the CSS variable that will be used in the common.css file.
This will require a subfolder within the CSS file named “themes.” Within this folder, add five CSS files: “bluegreen.css,” “dark.css,” “default.css,” “oldbook.css,” and “sepia.css.” For future use, I have included an image folder, but theme image implementation will be covered in a different tutorial, so that should be ignored for now. The file tree should now look like this, with the file names all exactly the same as illustrated here:
Now that all of the theme files are in place, it is time to fill them out. They will control the CSS variables for the color, background image, text color, and font stack.
bluegreen.css ->
:root{
--primary-background-color: #9fe4f7;
--primary-background-image: url("");
--primary-text-color: #08353e;
--primary-font-stack: 'Consolas', monospace;
}dark.css ->
:root{
--primary-background-color: #333;
--primary-background-image: url("");
--primary-text-color: #efefef;
--primary-font-stack: 'Roboto Mono', sans-serif;
}
default.css ->
:root{
--primary-background-color: #efefef;
--primary-background-image: url("");
--primary-text-color: #333;
--primary-font-stack: 'Roboto Mono', sans-serif;
}
oldbook.css ->
:root{
--primary-background-color: #dad2bc;
--primary-background-image: url("");
--primary-text-color: #1f0f08;
--primary-font-stack: serif;
}
The oldbook.css theme file is similar to the sepia theme which we will add next, but with a serif font. In addition, in my files, I have added an image texture to the page. However, do not worry about how it will look without the image for now; it will look fine.
sepia.css ->
:root{
--primary-background-color: #e6caae;
--primary-background-image: url("");
--primary-text-color: #3a291f;
--primary-font-stack: 'Roboto Mono', sans-serif;
}
The sepia theme CSS has a sans-serif font and mellow colors; it is intended to serve as a middle ground between the dark mode and the default mode, as it is light-colored but emits less eye-damaging blue light due to its warm colors.
Finally, in order for the CSS files to affect the pages at all, we need to insert some code into the head section of the HTML document:
<link rel="stylesheet" id="themeStylesheetLink" href="css/themes/default.css">
<link rel="stylesheet" href="css/common.css">
The head code should now look like this:
The site now has styling, but no theme-changing abilities. It is set to default.css.
The last part needed for this project to work is JavaScript, which we will add in the next step.
Setting Up the JavaScript
In order to implement a theme-changing ability, we will need to insert some JavaScript code into the bottom of the HTML page before the closing </body> tag. Review the image below and type it all out exactly, examining the explanations for each part of the code. Reviewing code to ensure it makes sense is a standard security practice, and it helps with teaching things faster! Once this is inserted, open up file explorer and test the project in the browser!
Reviewing the Code and Output
Now that all of the markup, styling, and code have been put in place, the website should be fully functional! If anything has gone wrong, check for misspelled file names and compare your index file with the code below.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Webpage with Multiple Themes</title>
<meta name="description" content="A webpage with more than just dark mode and light mode.">
<!-- This link is changed by the JavaScript code -->
<link rel="stylesheet" id="themeStylesheetLink" href="css/themes/default.css">
<!-- This stylesheet remains the same regardless of what theme is selected. -->
<link rel="stylesheet" href="css/common.css">
</head>
<body>
<div class="everything-wrapper">
<header>
<h1>Site with Many Themes</h1>
</header>
<div class="theme-box">
<p>Choose a Theme:</p>
<select id="themeSelect">
<option value="default">Default</option>
<option value="dark">Dark</option>
<option value="sepia">Sepia</option>
<option value="oldbook">Old Book</option>
<option value="bluegreen">Blue Green</option>
</select>
</div>
<div class="content-wrapper">
<main>
<h2>Theme Selector with JavaScript & CSS</h2>
<p> It's very easy to create a theme selector with JavaScript & CSS. </p>
<p> It will even save on page refresh! 😎 </p>
<p>I added a lot more themes and an actual layout to the page, which the original tutorial did not include. You can change the themes with the dropdown menu in the bottom right corner of the page.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem doloribus molestiae at soluta provident aut hic, aliquam eos esse porro ratione minima, doloremque laboriosam obcaecati accusantium ipsa maiores sequi tenetur. </p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem doloribus molestiae at soluta provident aut hic, aliquam eos esse porro ratione minima, doloremque laboriosam obcaecati accusantium ipsa maiores sequi tenetur. </p>
</main>
<aside class="about-author">
<h3>About the Author</h3>
<p>This was made with the help of a tutorial.</p>
</aside>
</div>
<footer>
<p>Copyright 2022 <br> a tutorial completed by me</p>
</footer>
</div>
<script>
function initThemeSelector(){
const themeSelect = document.getElementById("themeSelect");
// <- this selects the theme select menu and assigns it to a variable that we can alter.
const themeStylesheetLink = document.getElementById("themeStylesheetLink");
// <- this selects the meta data in the header and makes it a variable that can be changed.
const currentTheme = localStorage.getItem("theme") || "default";
// <- this assigns the current theme to whatever is currently stored in the cache
function activateTheme(themeName) {
themeStylesheetLink.setAttribute("href", `css/themes/${themeName}.css`);
}
// <- This is a function that alters the first CSS stylesheet link in the header when called.
themeSelect.addEventListener("change", () => {
activateTheme(themeSelect.value);
localStorage.setItem("theme", themeSelect.value)
});
// <- this makes the theme setting stay saved after page reload, a minimum caching feature
themeSelect.value = currentTheme;
activateTheme(currentTheme);
// <- this code set the value of the theme selector to a variable that is passed through the activateItem function. This is what makes the theme get activated.
}
initThemeSelector();
// <- This activates all of the above code.
</script>
</body>
</html>
If everything is where it should be, the page should work perfectly. Now, the theme of the site can be changed easily!
The link to the project on my server is here: https://www.tealsparrow.com/ewtt/standards-specifications/
This is a very flexible setup that is very open to modification. Have fun modifying the styling! If you found this tutorial useful or made a spinoff, I would love to see it! Drop me a link to your project in the comments! Thank you for reading, and have a good day!
Leave a Reply