The Theme Switcher is a drop-in page feature that allows users to easily switch between different visual themes throughout a website🕶. It provides a selection of predefined yet easily customized CSS variables for ten color palettes, and a script to update the page and save the selection to local storage. Users may select from the palette options to trigger the script.
- Features
- Screenshot
- Installation
- Usage Example
- Live Demo
- Development Prerequisites
- Files
- File Structure
- Overview
- Details
index.htmlscript.jsstyle.css
- Contributing
- Contributing Directly
- Meta
- Copyright
- Seamlessly switch between multiple visual themes on a website.
- Customize the appearance by selecting predefined CSS variables.
- Instantly apply theme changes for immediate visual feedback.
- Easy integration into any website using JavaScript.
The Theme Switcher runs directly in the browser🖥, eliminating the need for any installation process. Users can access and utilize it by simply visiting the demo website below.
To see the Theme Switcher in action, click here. 2
To develop with the Theme Switcher, a basic understanding of HTML, CSS, and JavaScript is required.
theme-switcher/
└── images/
│ ├── README.md
│ └── theme-switcher.gif
├── index.html
├── LICENSE.md
├── package.json
├── README.md
├── script.js
└── style.css| File Name | Description |
|---|---|
index.html |
The main HTML file that represents the webpage structure and content. It includes the title, theme switcher buttons, and a container for displaying the selected theme. |
style.css |
The CSS file that defines the styling rules for the webpage. It includes styles for various elements, such as the container, headings, buttons, and table. It also defines different CSS variables for each theme, allowing dynamic theme switching. |
script.js |
The JavaScript file that contains the changeTheme function and the titleCase helper function. The changeTheme function is called when a theme button is clicked and updates the theme of the webpage by adding/removing CSS classes on the body element. The titleCase function converts a string to title case by capitalizing the first letter of each word. |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Sci-Fi Theme Switcher</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Ubuntu:wght@300;700&display=swap" />
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container">
<h1 id="header">Theme Switcher</h1>
<p>
This is a prototype as well as a proof of concept to be used as a
feature in future projects.
</p>
<p>Select a theme from the choices below for a demo.</p>
<hr />
<table>
<tr>
<td>
<h2>Light</h2>
<table>
<tbody>
<tr>
<td>
<button onclick="changeTheme('alien')">Xeno</button>
</td>
</tr>
<tr>
<td>
<button onclick="changeTheme('back-to-the-future')">
McFly
</button>
</td>
</tr>
<tr>
<td>
<button onclick="changeTheme('star-wars-tatooine-jakku')">
Light Side
</button>
</td>
</tr>
<tr>
<td>
<button onclick="changeTheme('the-fifth-element')">
Multi-Pass
</button>
</td>
</tr>
<tr>
<td>
<button onclick="changeTheme('close-encounters')">
Close Encounters
</button>
</td>
</tr>
</tbody>
</table>
</td>
<td>
<h2>Dark</h2>
<table>
<tbody>
<tr>
<td>
<button onclick="changeTheme('blade-runner')">
Blade Runner
</button>
</td>
</tr>
<tr>
<td>
<button onclick="changeTheme('jurassic-park')">
Dino DNA
</button>
</td>
</tr>
<tr>
<td>
<button onclick="changeTheme('star-wars')">
Dark Side
</button>
</td>
</tr>
<tr>
<td>
<button onclick="changeTheme('the-matrix')">
The One
</button>
</td>
</tr>
<tr>
<td>
<button onclick="changeTheme('dune')">Spice</button>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
</div>
<script src="script.js"></script>
</body>
</html>Integrates the theme switcher functionality into the HTML structure. When a theme button is clicked, it calls the changeTheme function with the corresponding theme name as the argument.
function changeTheme(theme) {
// remove all theme classes from body
document.body.className = ``;
// add class for selected theme
document.body.classList.add(`theme-${theme}`);
// update header text
document.getElementById("header").innerHTML = titleCase(theme);
}
function titleCase(str) {
return str
.toLowerCase()
.split("-")
.map((word) => {
return word.charAt(0).toUpperCase() + word.slice(1);
})
.join(" ");
}Contains the JavaScript code for the theme switcher functionality.
The changeTheme function is called when a theme button is clicked. It takes a theme parameter and performs the following actions:
- Removes all existing theme classes from the
bodyelement. - Adds the appropriate theme class based on the selected theme.
- Updates the header text to display the selected theme name in title case.
The titleCase function is a helper function used to convert the theme name from kebab-case to title case. It splits the string by hyphens, capitalizes the first letter of each word, and then joins them back together.
/* just some standard style resets */
*
{
padding: 0;
margin: 0;
box-sizing: border-box;
background-color: var(--bg-color);
color: var(--font-color);
overflow: hidden;
font: 500 2.5vh / 1.5 Ubuntu, sans-serif;
}
/* Default theme */
body
{
background-color: var(--color-primary);
--color-primary: #eee;
--color-secondary: #555;
--color-accent: #aaa;
}
.theme-dune
{
--color: #ddd;
--bg-color: #666;
--color-primary: #de8735;
--font-color: #a11225;
--color-secondary: #f4c16e;
--color-accent: #b5a492;
}
.theme-jurassic-park
{
--color: #ddd;
--bg-color: #666;
--color-primary: #4b4921;
--font-color: #f01c1f;
--color-secondary: #2a8a56;
--color-accent: #66d848;
}
.theme-back-to-the-future
{
--color: #111;
--bg-color: #eee;
--color-primary: #e02411;
--font-color: #1e4ea0;
--color-secondary: #ffa913;
--color-accent: #569ced;
}
.theme-close-encounters
{
--color: #111;
--bg-color: #eee;
--hover-brightness: (1.12);
--color-primary: #84caec;
--font-color: #fcec86;
--color-secondary: #efb7dc;
--color-accent: #ff9969;
}
.theme-star-wars-tatooine-jakku
{
--color: #111;
--bg-color: #eee;
--color-primary: #dba05c;
--font-color: #9995bc;
--color-secondary: #e9cca4;
--color-accent: #8eafd8;
}
.theme-alien
{
--color: #111;
--bg-color: #eee;
--color-primary: #d2ff06;
--font-color: #042a05;
--color-secondary: #15aa5c;
--color-accent: #258073;
}
.theme-star-wars
{
--color: #ddd;
--bg-color: #666;
--color-primary: #27343a;
--font-color: #f02;
--color-secondary: #9ea5a8;
--color-accent: #ff6800;
}
.theme-blade-runner
{
--color: #ddd;
--bg-color: #666;
--color-primary: #d88f00;
--font-color: #812a89;
--color-secondary: #efca93;
--color-accent: #ff6cdc;
}
.theme-the-matrix
{
--color: #ddd;
--bg-color: #666;
--color-primary: #031624;
--font-color: #30ffa4;
--color-secondary: #044b4a;
--color-accent: #5fbe92;
}
.theme-the-fifth-element
{
--color: #111;
--bg-color: #eee;
--color-primary: #f3f1ed;
--font-color: #0b190c;
--color-secondary: #fffd6e;
--color-accent: #ff6100;
}
a
{
color: var(--color-secondary);
}
label
{
cursor: pointer;
}
html,
body
{
height: 100%;
width: 100%;
}
.container
{
border-style: solid;
border-color: var(--color-accent);
border-width: 0 1vw;
position: relative;
color: var(--color);
background-color: var(--bg-color);
width: 88vw;
margin-left: 6vw;
margin-right: 6vw;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100%;
}
h1,
h2
{
color: var(--font-color);
padding: 1vh;
text-align: center;
font-weight: 900;
text-shadow: 1px 0px 0px black, 1px 1px 0px black, 0px 1px 0px black,
-1px 1px 0px black, -1px 0px 0px black, -1px -1px 0px black,
0px -1px 0px black, 1px -1px 0px black, 4px 4px 4px var(--color-primary);
}
h2
{
font-size: 4vh;
}
h1
{
font-size: 5vh;
height: 15vh;
}
table
{
margin: auto;
text-align: center;
padding: 0.6vw;
}
hr
{
margin-top: 1vh;
margin-bottom: 5vh;
background-image: linear-gradient(
90deg,
rgba(0, 0, 0, 0) 0%,
var(--color-primary) 10%,
var(--color-accent) 50%,
var(--color-primary) 90%,
rgba(0, 0, 0, 0) 100%
);
width: 1vw;
height: 1px;
border: 2px outset var(--color-accent);
border-radius: 100%;
filter: blur(0px);
outline-width: 2px;
outline-style: outset;
outline-color: var(--color-secondary);
transform: scale(40, 1);
}
button
{
font-weight: 700;
color: var(--font-color);
margin: 2px;
background-color: var(--color-secondary);
font-size: 2.6vh;
max-width: 100%;
text-shadow: 1px 1px 0 var(--color-accent);
padding: 0.6vh 1.2vw;
border: 4px outset var(--color-secondary);
border-radius: 30px;
outline-style: solid;
outline-width: 1px;
outline-color: var(--color-secondary);
}
button:hover
{
transform: translateY(-1px);
outline-color: var(--color-accent);
outline-width: 1px;
animation-duration: 500ms;
transition: ease-in-out;
}Contains the CSS styling for the theme switcher.
The CSS file defines CSS variables to customize the theme colors. The default theme is defined under the body selector, and there are individual selectors for each theme, such as .theme-dune, .theme-jurassic-park, etc. You can define the theme colors and additional styles under the respective theme selectors.
Make sure that all the files (index.html, style.css and script.js) are in the same directory for the webpage to work properly.
Contributions to the Theme Switcher project are welcome!
| There are two ways to contribute: |
|---|
| submit an issue detailing a bug or feature request |
| or |
| follow the steps below: |
-
Fork the repository by clicking the "Fork" button on the top-right corner of this page.
This will create a copy of the repository under your GitHub account.
-
Clone your forked repository to your local machine. Open a terminal or command prompt and run the following command:
git clone https://github.com/YourUsername/theme-switcher.git
Replace
YourUsernamewith your GitHub username. -
Create a new branch for your feature or bug fix:
git checkout -b feature/your-feature-name
Choose a meaningful branch name that describes the purpose of your changes.
-
Make the necessary changes to the codebase using your preferred editor or IDE.
-
Stage and commit your changes. You can use the following commands:
git add . git commit -m "Add your commit message here"
Replace "Add your commit message here" with a concise and descriptive commit message explaining your changes.
-
Push your changes to your forked repository:
git push origin your-branch-name
Replace
your-branch-namewith the name of the branch you created earlier. -
Visit the original repository on GitHub at
https://github.com/PhobiaCide/theme-switcher. -
Once there, you should see a notification suggesting to create a new pull request.
Click on the "Compare & pull request" button to open a new pull request.
-
Provide a descriptive title and detailed description for your pull request, explaining the purpose of your changes.
-
Click the "Create pull request" button to submit your contribution.
-
Your pull request will be reviewed by the project maintainers.
They may provide feedback or request further changes.
-
Once your changes are approved, they will be merged into the main repository.
Thank you for contributing to the Theme Switcher project! We appreciate your support and effort in making this project better.
© 2023 PhobiaCide
Distributed under the MIT license. See LICENSE for more information.