theme: simplify device dark theme detection
Signed-off-by: Harsh Shandilya <me@msfjarvis.dev>
This commit is contained in:
parent
104680611f
commit
266835b881
|
@ -9,7 +9,6 @@
|
|||
--post-time-color: #757575;
|
||||
--strong-color: #303030;
|
||||
--code-background-color: #202020;
|
||||
--color-mode: 'light';
|
||||
--color-light: var(--background-color);
|
||||
--button-icon: var(--icon-moon);
|
||||
--button-icon-filter: var(--icon-moon-filter);
|
||||
|
@ -26,32 +25,6 @@
|
|||
--sans-font: -apple-system,BlinkMacSystemFont,"avenir next",avenir,helvetica,"helvetica neue",ubuntu,roboto,noto,"segoe ui",arial,sans-serif;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root:not([data-user-color-scheme]) {
|
||||
--sidebar-color: #121212;
|
||||
--background-color: #202020;
|
||||
--text-color: #f0f0f0;
|
||||
--heading-color: white;
|
||||
--blockquote-color: #bababa;
|
||||
--inline-code-text-color: #f82439;
|
||||
--inline-code-background-color: #202020;
|
||||
--post-time-color: #bababa;
|
||||
--code-background-color: #000000;
|
||||
--strong-color: white;
|
||||
--color-mode: 'dark';
|
||||
--button-icon: var(--icon-sun);
|
||||
--button-icon-filter: var(--icon-sun-filter);
|
||||
--button-color: var(--color-dark);
|
||||
--border-color: var(--color-light-alpha);
|
||||
--toggle-button-label: "Disable dark mode";
|
||||
}
|
||||
|
||||
.link {
|
||||
color: #0091ff;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
[data-user-color-scheme='dark'] {
|
||||
--sidebar-color: #121212;
|
||||
--background-color: #202020;
|
||||
|
@ -63,7 +36,6 @@
|
|||
--post-time-color: #bababa;
|
||||
--code-background-color: #000000;
|
||||
--strong-color: white;
|
||||
--color-mode: 'dark';
|
||||
--button-icon: var(--icon-sun);
|
||||
--button-icon-filter: var(--icon-sun-filter);
|
||||
--button-color: var(--color-dark);
|
||||
|
|
|
@ -1,4 +1,3 @@
|
|||
const COLOR_MODE_KEY = '--color-mode';
|
||||
const STORAGE_KEY = 'user-color-scheme';
|
||||
const modeToggleButtonMobile = document.querySelector('.js-mode-toggle');
|
||||
const modeToggleButtonDesktop = document.querySelector(
|
||||
|
@ -14,21 +13,12 @@ const applySetting = (passedSetting) => {
|
|||
);
|
||||
}
|
||||
};
|
||||
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';
|
||||
const userPrefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
|
||||
currentSetting = userPrefersDark ? 'dark' : 'light';
|
||||
break;
|
||||
case 'light':
|
||||
currentSetting = 'dark';
|
||||
|
|
Loading…
Reference in New Issue