Skip to content

WIP add simple dark mode #58

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 3 commits into from
Closed

WIP add simple dark mode #58

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
589b498
add simple dark mode
StephenFluin May 2, 2021
a875cfe
Merge branch 'main' into stephen/dark
aelmanaa Mar 17, 2022
c6fd616
Merge branch 'main' into stephen/dark
aelmanaa May 20, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions _includes/main.liquid
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,7 @@
<noscript><link rel="stylesheet" href="/prism.css"></noscript>
<script src="/index.js" defer></script>
<link href="/docs.css" rel="stylesheet" type="text/css">
<script src="/dark.js"></script>

<link href="https://assets-global.website-files.com/5f6b7190899f41fb70882d08/5fa97474da20bc75f63bfdc4_Chainlink-favicon-32.png" rel="shortcut icon" type="image/x-icon">
<link href="https://assets-global.website-files.com/5f6b7190899f41fb70882d08/5fa973e31adbc3414aa8f77d_Chainlink-webclip.png" rel="apple-touch-icon">
Expand Down Expand Up @@ -193,6 +194,7 @@
class="footer-list-item-link">Contract reference</a></li>
<li class="footer-list-item"><a href="/chainlink-nodes/"
class="footer-list-item-link">Node operators</a></li>
<li class="footer-list-item"><a href="#" id="dark-toggle" class="footer-list-item-link">Dark Mode</a></li>
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@StephenFluin why put the toggle button at the bottom? Wouldn't it be better to put it at the top of the page ?

</ul>
</nav>
<nav class="footer-col">
Expand Down
27 changes: 27 additions & 0 deletions _src/dark.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
(() => {
const render = (dark, toggle) => {
if (dark) {
document.body.classList.add('dark-theme');
toggle.innerHTML = 'Light Mode';
} else {
document.body.classList.remove('dark-theme');
toggle.innerHTML = 'Dark Mode';
}
};

document.addEventListener('DOMContentLoaded', () => {
const toggle = document.getElementById('dark-toggle');
let prefersDarkScheme =
JSON.parse(localStorage['darkMode'] || 'null') ||
window.matchMedia('(prefers-color-scheme: dark)').matches;
render(prefersDarkScheme, toggle);

toggle.addEventListener('click', (event) => {
console.log('toggling');
event.preventDefault();
prefersDarkScheme = !prefersDarkScheme;
localStorage['darkMode'] = prefersDarkScheme;
render(prefersDarkScheme, toggle);
});
});
})();
6 changes: 6 additions & 0 deletions _src/docs.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1046,6 +1046,12 @@ input[type='reset'] {
max-width: 120px;
}

/** Dark Theme */
.dark-theme, .dark-theme * {
background:black;
color:white;
}

/** Mobile */
@media screen and (max-width: 900px) {
navigation:not(.open) {
Expand Down
101 changes: 57 additions & 44 deletions _src/docsat.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,58 +1,71 @@
const sat = document.getElementById('docsat');
let rating = 0;
let submitted = false;
(() => {
const sat = document.getElementById('docsat');
let rating = 0;
let submitted = false;

const star = `<svg style="width:24px;height:24px" viewBox="0 0 24 24">
const star = `<svg style="width:24px;height:24px" viewBox="0 0 24 24">
<path fill="currentColor" d="M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z" />
</svg>`
const starOutline = `<svg style="width:24px;height:24px" viewBox="0 0 24 24">
</svg>`;
const starOutline = `<svg style="width:24px;height:24px" viewBox="0 0 24 24">
<path fill="currentColor" d="M12,15.39L8.24,17.66L9.23,13.38L5.91,10.5L10.29,10.13L12,6.09L13.71,10.13L18.09,10.5L14.77,13.38L15.76,17.66M22,9.24L14.81,8.63L12,2L9.19,8.63L2,9.24L7.45,13.97L5.82,21L12,17.27L18.18,21L16.54,13.97L22,9.24Z" />
</svg>`
</svg>`;

select = (n) => (event) => {
console.log('event', event)
if (n + 1 === rating) {
rating = 0
} else {
rating = n + 1
}
submitted = false;
render();
const path = 'https://docs2-cl-default-rtdb.firebaseio.com/allratings.json';
const data = {rating,time:Date.now(),url:window.location.href};
SULX.post(path, JSON.stringify(data));
}
render = () => {
sat.innerHTML = `
let render;
let select = (n) => (event) => {
console.log('event', event);
if (n + 1 === rating) {
rating = 0;
} else {
rating = n + 1;
}
submitted = false;
render();
const path = 'https://docs2-cl-default-rtdb.firebaseio.com/allratings.json';
const data = { rating, time: Date.now(), url: window.location.href };
SULX.post(path, JSON.stringify(data));
};
render = () => {
sat.innerHTML = `
<div id="starBox">
</div>
<div id="docsatFeedback" style="display:${rating && !submitted ? 'block' : 'none'};position:absolute;right:0;background-color:white;border:1px solid #CCC;padding:8px;">
<div id="docsatFeedback" style="display:${
rating && !submitted ? 'block' : 'none'
};position:absolute;right:0;background-color:white;border:1px solid #CCC;padding:8px;">
Tell us more about your experience.
<form id="docsatForm">
<textarea name="feedback" style="width:100%;"></textarea><br/>
<button type="submit">Submit</button>
</form>
</div>`;
let stars = ''
for (let i = 0; i < 5; i++) {
let child = document.createElement('span')
if (rating > i) {
child.innerHTML = star;
} else {
child.innerHTML = starOutline;
let stars = '';
for (let i = 0; i < 5; i++) {
let child = document.createElement('span');
if (rating > i) {
child.innerHTML = star;
} else {
child.innerHTML = starOutline;
}
child.addEventListener('click', select(i));
document.getElementById('starBox').appendChild(child);
}
child.addEventListener('click', select(i))
document.getElementById('starBox').appendChild(child);
}

document.getElementById('docsatForm').addEventListener('submit',(event) => {
event.preventDefault();

submitted = true;
const path = 'https://docs2-cl-default-rtdb.firebaseio.com/feedback.json';
const data = {rating,time:Date.now(),msg:event.target[0].value,url:window.location.href};
SULX.post(path, JSON.stringify(data));
render();
});
}
render()
document
.getElementById('docsatForm')
.addEventListener('submit', (event) => {
event.preventDefault();

submitted = true;
const path =
'https://docs2-cl-default-rtdb.firebaseio.com/feedback.json';
const data = {
rating,
time: Date.now(),
msg: event.target[0].value,
url: window.location.href,
};
SULX.post(path, JSON.stringify(data));
render();
});
};
render();
})();