msfjarvis
/
msfjarvis.dev
mirror of https://github.com/msfjarvis/msfjarvis.dev.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Make theme switcher compliant with my new CSP 

Signed-off-by: Harsh Shandilya <me@msfjarvis.dev>
This commit is contained in:
Harsh Shandilya 2020-04-20 00:23:38 +05:30
parent 356efbe491
commit 97f06d1085
2 changed files with 51 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

49
assets/js/theme-switcher.js Normal file
View File

@ -0,0 +1,49 @@
const COLOR_MODE_KEY = '--color-mode';
const STORAGE_KEY = 'user-color-scheme';
const modeToggleButtonMobile = document.querySelector('.js-mode-toggle');
const modeToggleButtonDesktop = document.querySelector(
'.js-mode-toggle-desktop'
);
const applySetting = (passedSetting) => {
let currentSetting = passedSetting || localStorage.getItem(STORAGE_KEY);
if (currentSetting) {
document.documentElement.setAttribute(
'data-user-color-scheme',
currentSetting
);
}
};
const getCSSCustomProp = (propKey) => {
let response = getComputedStyle(document.documentElement).getPropertyValue(
propKey
);
if (response.length) {
response = response.replace(/\"/g, '').trim();
}
return response;
};
const toggleSetting = () => {
let currentSetting = localStorage.getItem(STORAGE_KEY);
switch (currentSetting) {
case null:
currentSetting =
getCSSCustomProp(COLOR_MODE_KEY) === 'dark' ? 'light' : 'dark';
break;
case 'light':
currentSetting = 'dark';
break;
case 'dark':
currentSetting = 'light';
break;
}
localStorage.setItem(STORAGE_KEY, currentSetting);
return currentSetting;
};
[modeToggleButtonDesktop, modeToggleButtonMobile].forEach((element) => {
element.addEventListener('click', (evt) => {
evt.preventDefault();
applySetting(toggleSetting());
});
});
applySetting();

45
layouts/partials/sidebar.html
View File

@ -28,47 +28,6 @@
<h6 class="dark-theme-label"></h6>
</div>
</div>
<script>
const COLOR_MODE_KEY = '--color-mode';
const STORAGE_KEY = 'user-color-scheme';
const modeToggleButtonMobile = document.querySelector('.js-mode-toggle');
const modeToggleButtonDesktop = document.querySelector('.js-mode-toggle-desktop');
const applySetting = passedSetting => {
let currentSetting = passedSetting || localStorage.getItem(STORAGE_KEY);
if (currentSetting) {
document.documentElement.setAttribute('data-user-color-scheme', currentSetting);
}
};
const getCSSCustomProp = propKey => {
let response = getComputedStyle(document.documentElement).getPropertyValue(propKey);
if (response.length) {
response = response.replace(/\"/g, '').trim();
}
return response;
};
const toggleSetting = () => {
let currentSetting = localStorage.getItem(STORAGE_KEY);
switch (currentSetting) {
case null:
currentSetting = getCSSCustomProp(COLOR_MODE_KEY) === 'dark' ? 'light' : 'dark';
break;
case 'light':
currentSetting = 'dark';
break;
case 'dark':
currentSetting = 'light';
break;
}
localStorage.setItem(STORAGE_KEY, currentSetting);
return currentSetting;
};
[modeToggleButtonDesktop, modeToggleButtonMobile].forEach(element => {
element.addEventListener('click', evt => {
evt.preventDefault();
applySetting(toggleSetting());
});
});
applySetting();
</script>
{{ $themeSwitcher := resources.Get "js/theme-switcher.js" | resources.ExecuteAsTemplate "js/theme-switcher.js" . | minify | fingerprint }}
<script type="text/javascript" src="{{ $themeSwitcher.RelPermalink }}" {{ printf "integrity=%q" $themeSwitcher.Data.Integrity | safeHTMLAttr }}></script>
</aside>