rottenwheel/revuo-weekly
1
0
Fork 0
mirror of https://github.com/rottenwheel/revuo-weekly.git synced 2024-12-22 07:40:24 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

fix theme switcher position on mobile

Browse source
This commit is contained in:
recanman 2024-01-10 17:08:58 -08:00
parent 9d3c3f2b99
commit 675ed6abf9
1 changed files with 61 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

62
js/main.js
View file

@ -15,4 +15,64 @@ if (document.addEventListener) {
themeSwitcher.attachEvent('onclick', setTheme);
}
checkTheme()
checkTheme()
// Make the theme switcher in the hamburger menu on mobile devices work.
if (document.body.clientWidth < 940) {
const themeSwitcherLabel = document.getElementById('main-theme-switcher');
const navActionsContainer = document.getElementById('nav-actions-container');
// Move the theme switcher to inside the hamburger menu.
navActionsContainer.appendChild(themeSwitcher);
navActionsContainer.appendChild(themeSwitcherLabel);
themeSwitcherLabel.style.top = '';
themeSwitcherLabel.style.left = '42vw';
const themeVariables = [
// Light theme
[
{ name: 'primary-color', value: '#666666' },
{ name: 'secondary-color', value: '#555555' },
{ name: 'font-color', value: '#555555' },
{ name: 'link-color', value: '#444444' },
{ name: 'bg-color', value: '#f0f0f0' },
{ name: 'heading-color', value: '#666666' },
{ name: 'block-bg-color', value: '#d7d7d7' },
{ name: 'block-bg-color-secondary', value: '#c0c0c0' },
{ name: 'block-bg-color-heading', value: '#a5a5a5' },
{ name: 'table-color', value: '#000000' },
{ name: 'head-nav-bg-color', value: 'transparent' },
{ name: 'head-nav-text-color', value: '#d56f2a' },
{ name: 'menu-color', value: '#202225' },
{ name: 'license-color', value: '#666666' },
],
// Dark theme
[
{ name: 'primary-color', value: '#888888' },
{ name: 'secondary-color', value: '#666666' },
{ name: 'font-color', value: '#cecece' },
{ name: 'link-color', value: '#e6e6e6' },
{ name: 'bg-color', value: '#0f0f0f' },
{ name: 'heading-color', value: '#454545' },
{ name: 'block-bg-color', value: '#2f3234' },
{ name: 'block-bg-color-secondary', value: '#444444' },
{ name: 'block-bg-color-heading', value: '#333333' },
{ name: 'table-color', value: '#cecece' },
{ name: 'head-nav-bg-color', value: 'transparent' },
{ name: 'head-nav-text-color', value: '#d56f2a' },
{ name: 'menu-color', value: '#e1e1e1' },
{ name: 'license-color', value: '#666666' },
]
]
// Switch the theme when the theme switcher is clicked.
themeSwitcher.addEventListener('change', () => {
const theme = themeVariables[themeSwitcher.checked ? 1 : 0];
theme.forEach(variable => {
document.documentElement.style.setProperty(`--${variable.name}`, variable.value);
});
});
}