<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<h1>
change theme by query parameters
</h1>
</body>
</html>
// Code goes here
// Code goes here
// dedicated method for get query string
function getQueryString(field, url) {
let href = url ? url : window.location.href;
let reg = new RegExp('[?&]' + field + '=([^&#]*)', 'i');
let string = reg.exec(href);
return string ? string[1] : null;
};
// Theme (?theme=ORANGE_theme)
function getCurrentTheme() {
let theme = getQueryString('theme');
if (theme) {
if (theme === 'theme_blue') {
document.querySelector('body').classList.add('theme_blue');
} else if (theme === 'theme_red') {
document.querySelector('body').classList.add('theme_red');
} else if (theme === 'theme_green') {
document.querySelector('body').classList.add('theme_green');
}
console.log('theme', theme);
} else {
console.log('No theme ');
}
}
// call method
getCurrentTheme();
/* Styles go here */