judahsotomayor/simpletheme
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat[css,js]: Further edits to dark.js

Browse Source 
I removed all css styling from dark.js

I edited dark.js to run immediately, rather than after the page is loaded.

I added css styling for dark mode.
This commit is contained in:
Judah Sotomayor 2023-11-13 20:52:45 -05:00
parent d3a9e3fe67
commit edba941110
Signed by: judahsotomayor
SSH Key Fingerprint: SHA256:9Dq4ppxhfAjbX+7HLXEt+ROMiIojI6kqQgUyFUJb9lI
2 changed files with 73 additions and 153 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

56
static/css/style.css
View File

@ -10,14 +10,25 @@ background: #fafafa;
overscroll-behavior-y: none;
}
body.dark{
color: #DDD;
background: #151515;
}
body.dark > *{
color: #DDD;
}
img {
max-width: 100%; }
a {
color: #0074D9; }
color: #0074D9;
h1, h2, strong {
color: #111; }
}
body.dark a {
color: #ff8b26;
}
h1 {
font-size: 1.6em; }
@ -29,8 +40,14 @@ h3 {
font-size: 1.1em; }
.muted {
color: #555;
text-decoration: none;
}
body.dark .muted {
color: #aaa;
text-decoration: none; }
text-decoration: none;
}
.small {
font-size: .8em; }
@ -81,3 +98,34 @@ alert {
color: #ed6a5a;
weight: bold;
}
#mode-selector {
position: relative;
display: flex;
padding: 0.125em 0.25em;
border: 3px solid transparent;
}
#mode-selector button {
-moz-appearance: none;
appearance: none;
border: none;
background-color: transparent;
padding: 0.5em;
margin: 0;
line-height: 1;
font-family: Lucida Sans Unicode, Source Sans Pro, Helvetica, Trebuchet MS, sans-serif;
font-size: 0.99rem;
text-align: center;
color: #000;
position: relative;
}
#mode-selector button:hover,
#mode-selector button.selected {
border-bottom: solid;
}
#mode-selector.dark button {
color: #FFF
}

136
static/js/dark.js
View File

@ -49,73 +49,6 @@ GW.modeOptions = [
[ 'light', 'Light', 'Light mode at all times' ],
[ 'dark', 'Dark', 'Dark mode at all times' ]
];
GW.modeStyles = `
:root {
--GW-blockquote-background-color: #ddd
}
body::before,
body > * {
filter: invert(90%)
}
body::before {
content: '';
width: 100vw;
height: 100%;
position: fixed;
left: 0;
top: 0;
background-color: #fff;
z-index: -1
}
img,
video {
filter: invert(100%);
}
#markdownBody, #mode-selector button {
text-shadow: 0 0 0 #000
}
article > :not(#TOC) a:link {
text-shadow:
0 0 #777,
.03em 0 #fff,
-.03em 0 #fff,
0 .03em #fff,
0 -.03em #fff,
.06em 0 #fff,
-.06em 0 #fff,
.09em 0 #fff,
-.09em 0 #fff,
.12em 0 #fff,
-.12em 0 #fff,
.15em 0 #fff,
-.15em 0 #fff
}
article > :not(#TOC) blockquote a:link {
text-shadow:
0 0 #777,
.03em 0 var(--GW-blockquote-background-color),
-.03em 0 var(--GW-blockquote-background-color),
0 .03em var(--GW-blockquote-background-color),
0 -.03em var(--GW-blockquote-background-color),
.06em 0 var(--GW-blockquote-background-color),
-.06em 0 var(--GW-blockquote-background-color),
.09em 0 var(--GW-blockquote-background-color),
-.09em 0 var(--GW-blockquote-background-color),
.12em 0 var(--GW-blockquote-background-color),
-.12em 0 var(--GW-blockquote-background-color),
.15em 0 var(--GW-blockquote-background-color),
-.15em 0 var(--GW-blockquote-background-color)
}
#logo img {
filter: none;
}
#mode-selector {
opacity: 0.6;
}
#mode-selector:hover {
background-color: #fff;
}
`;
/****************/
/* DEBUG OUTPUT */
@ -262,67 +195,6 @@ function injectModeSelector() {
});
});
document.querySelector("head").insertAdjacentHTML("beforeend", `<style id='mode-selector-styles'>
#mode-selector {
position: relative;
display: flex;
padding: 0.125em 0.25em;
border: 3px solid transparent;
opacity: 0.3;
transition:
opacity 2s ease;
}
#mode-selector.hidden {
opacity: 0;
}
#mode-selector:hover {
transition: none;
opacity: 1.0;
}
#mode-selector button {
-moz-appearance: none;
appearance: none;
border: none;
background-color: transparent;
padding: 0.5em;
margin: 0;
line-height: 1;
font-family: Lucida Sans Unicode, Source Sans Pro, Helvetica, Trebuchet MS, sans-serif;
font-size: 0.99rem;
text-align: center;
color: #000;
position: relative;
}
#mode-selector button:hover,
#mode-selector button.selected {
box-shadow:
0 2px 0 6px #fff inset,
0 1px 0 6px currentColor inset;
}
#mode-selector button:not(:disabled):hover {
color: #000;
cursor: pointer;
}
#mode-selector button:not(:disabled):active {
transform: translateY(2px);
box-shadow:
0 0px 0 6px #fff inset,
0 -1px 0 6px currentColor inset;
}
#mode-selector button.active:not(:hover)::after {
content: "";
position: absolute;
bottom: 0.25em;
left: 0;
right: 0;
border-bottom: 1px dotted currentColor;
width: 25%;
margin: auto;
}
</style>`);
document.querySelector("head").insertAdjacentHTML("beforeend", `<style id='mode-styles'></style>`);
setMode(currentMode);
// We pre-query the relevant elements, so we don’t have to run queryAll on
@ -422,9 +294,11 @@ function setMode(modeOption) {
if (modeOption == 'auto') {
modeStyles.innerHTML = `@media (prefers-color-scheme:dark) {${GW.modeStyles}}`;
} else if (modeOption == 'dark') {
modeStyles.innerHTML = GW.modeStyles;
document.body.classList.add('dark');
document.getElementById("mode-selector").classList.add('dark');
} else {
modeStyles.innerHTML = "";
document.body.classList.remove('dark');
document.getElementById("mode-selector").classList.remove('dark');
}
// Update selector state.
@ -435,6 +309,4 @@ function setMode(modeOption) {
/* INITIALIZATION */
/******************/
doWhenPageLoaded(() => {
injectModeSelector();
});