aljaz/njump
1
0
Fork 0
mirror of https://github.com/aljazceru/njump.git synced 2026-02-23 15:04:22 +01:00
Code Issues Packages Projects Releases Wiki Activity

Add automati + manual dark mode switch

Browse Source
This commit is contained in:
Daniele Tonon
2023-05-27 12:30:48 +02:00
parent f00926440d
commit d5c90abb58
7 changed files with 127 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
static/head.html
View File

@@ -46,6 +46,6 @@
<!----------->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/static/styles.css?v=20230526" />
<link rel="stylesheet" href="/static/styles.css?v=20230527" />
</head>

2
static/note.html
View File

@@ -1,5 +1,5 @@
<!DOCTYPE html>
<html class="theme--dark">
<html class="theme--default">
<meta charset="UTF-8">
{{template "head.html" .}}

2
static/profile.html
View File

@@ -1,5 +1,5 @@
<!DOCTYPE html>
<html class="theme--dark">
<html class="theme--default">
<meta charset="UTF-8">
{{template "head.html" .}}

55
static/styles.css
View File

@@ -65,6 +65,45 @@ body {
}
}
.theme-toggle {
position: fixed;
top: 1rem;
right: 1rem;
width: 1rem;
height: 1rem;
border-radius: 50%;
cursor: pointer;
}
.theme--default .theme-toggle {
color: #F3F3F3;
}
.theme--dark .theme-toggle {
color: #9a9a9a;
}
@media (max-width: 580px) {
.theme-toggle {
position: relative;
float: right;
top: 0;
right: 0;
}
}
.sun {
display: none;
}
.moon {
display: block;
}
.theme--dark .sun {
display: block;
}
.theme--dark .moon {
display: none;
}
.top {
display: flex;
justify-content: center;
@@ -76,7 +115,7 @@ body {
.top {
display: block;
width: 90%;
margin: 1.5rem auto 0 auto;
margin: 1rem auto 1rem auto;
font-size: 0.8rem;
}
}
@@ -462,7 +501,7 @@ body {
font-size: 0.9rem;
color: #FFFFFF;
background-color: #3d3d3d;
border-bottom: 1px solid #373737;
border-bottom: 1px solid #131313;
text-decoration: none;
border-radius: 8px;
}
@@ -515,12 +554,7 @@ body {
.container .column_clients .btn span {
flex-basis: 20%;
margin-left: 0.4rem;
}
.theme--default .container .column_clients .btn span {
color: #9a9a9a;
}
.theme--dark .container .column_clients .btn span {
color: #F3F3F3;
color: #FFFFFF;
}
@media (max-width: 580px) {
.container .column_clients .btn span {
@@ -540,11 +574,6 @@ body.profile .column_content {
}
}
@media (max-width: 580px) {
body.note .top {
text-align: right;
}
}
body.note .column_content {
flex-basis: 70%;
max-width: 70%;

2
static/styles.css.map
View File

@@ -1 +1 @@
{"version":3,"sourceRoot":"","sources":["styles.scss"],"names":[],"mappings":";AAoFA;EACC;EACA;EACA;;;AAED;EAIC;EACA;;AA3BG;EAwBA;;AAxBA;EAwBA;;AAKF;EADD;IAEE;;;;AA9BC;EAoCA;;AApCA;EAoCA;;;AAGJ;EACC;EACA;EACA;EACA;EACA;EAIA;EACA;;AAjDG;EA8CF;;AA9CE;EA8CF;;AAID;EACC;EACA;EAIA;EACA;EACA;EACA;EACA;;AA5DE;EAsDD;;AAtDC;EAsDD;;AAOD;EAXD;IAYE;IACA;;;;AAIH;EACC;EACA;EACA;EACA;EACA;;AACA;EAND;IAOE;IACA;IACA;IACA;;;AA7EE;EAiFD;;AAjFC;EAiFD;;;AAKH;EACC;EACA;;AACA;EAHD;IAIE;;;AAED;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIF;EACC;EACA;EACA;;AACC;EAJF;IAKE;IACE;IACF;;;;AAGF;EACC;EACA;EACA;;;AAGD;EACC;EACA;EACA;EACA;;AAEC;EANF;IAOE;IACE;;;AAGH;EACC;EACA;;AACA;EAHD;IAIE;IACA;IACA;;;AAED;EACC;;AACA;EAFD;IAGE;IACA;IACA;IACA;IACA;;EACA;IACC;IACA;;EArJD;IAuJE;;EAvJF;IAuJE;;;AAKJ;EACC;EACA;EACA;;AA/JC;EAiKA;;AAjKA;EAiKA;;AAED;EAPD;IAQE;;;AAIH;EAEC;EACA;EACA;EACA;;AAEA;EACC;;AAhLC;EAmLC;;AAnLD;EAmLC;;AAGF;EACC;;AAvLA;EAyLC;;AAzLD;EAyLC;;AAGF;EAbD;IAcE;;;AAGF;EACC;EACA;EACA;;AAnMC;EAqMA;;AArMA;EAqMA;;AAED;EACC;;AAED;EAVD;IAWE;;;AAGF;EACC;;AACA;EACC;;AAjNA;EAmNC;;AAnND;EAmNC;;AAGF;EACC;;AACA;EACC;;AAED;EACC;EACA;EACA;;AA9ND;EAgOE;;AAhOF;EAgOE;;AAED;EACC;EACA;;AApOF;EAsOG;;AAtOH;EAsOG;;AAtOH;EAyOG;;AAzOH;EAyOG;;AAKJ;EACC;EACA;;AAEA;EACC;EACA;EACA;EACA;;AAGD;EACC;EACA;EACA;EACA;EACA,YA3TS;EA4TT;EACA;EACA;EACA;;AACA;EAVD;IAWE;IACA;;;AAIF;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EAVD;IAWE;IACA;;;AArRF;EA2RE;;AA3RF;EA2RE;;AAIF;EACC;EACA;;AAGD;EACC;;AAIF;EACC;;AACA;EACC;EACA;;AAGF;EACC;EACA;EACA;;AACA;EACC;EACA;;AAtTD;EAwTE;;AAxTF;EAwTE;;AAxTF;EA6TI;;AA7TJ;EA6TI;;AAGJ;EAAU;;AAhUV;EAmUI;;AAnUJ;EAmUI;;AAnUJ;EAwUI;;AAxUJ;EAwUI;;AAIL;EACC;;AACA;EAFD;IAGE;IACA;;EAhVD;IAkVE;;EAlVF;IAkVE;;;AAQL;EACC;EACA;;AACA;EAHD;IAIE;IAEA;IACA;IACA;IACA;;EAEC;IACC;;EAED;IACC;;;AAIH;EACC;EACA;EACA;;AACA;EACC;;AAED;EAPD;IAQE;IACA;IACA;IACA;IACA;IACA;;EACA;IACC;;EAED;IACC;;EACA;IACC;IACA;IACA;IACA;;;AAKJ;EACC;EACA;EACA;;AACA;EAJD;IAKE;IACA;;;AAED;EACC;EACA;EACA;EACA;EACA,OAxdU;EAydV,kBApdU;EAqdV;EACA;EACA;;AACA;EAVD;IAWE;IACA;IACA;IACA;IACA;;;AAED;EACC;;AACA;EAFD;IAGE;IACA,OAxeQ;;;AA2eV;EACC,YAteS;;AA0eV;EADD;IAEE;;;AAED;EAIC;;AArbD;EAmbG;;AAnbH;EAmbG;;AAGF;EALD;IAME;;;AAvbF;EA2bG;;AA3bH;EA2bG;;AAKJ;EACC;EACA;;AAlcA;EAocC;;AApcD;EAocC;;AAED;EAND;IAOE;;;;AASJ;EACC;EACA;;AACA;EAHD;IAIE;IACA;IACA;;;;AAOD;EADD;IAEE;;;AAGF;EACC;EACA;;AACA;EAHD;IAIE;IACA;IACA;;;AAED;EACC;EACA;EACA;;AACA;EACC;EACA;EACA;EACA;EACA;;AACA;EAND;IAOE;IACA;;;AAGF;EACC;;AACA;EAFD;IAGE;;;AAGA;EADD;IAEE;IACA;;;AAIH;EACC;EACA;;AACA;EAHD;IAIE;;;AAGF;EACC;EACA;EACA;EACA;;AA/gBA;EAihBC;;AAjhBD;EAihBC;;AAED;EARD;IASE;;;;AAOL;EACC;EACA","file":"styles.css"}
{"version":3,"sourceRoot":"","sources":["styles.scss"],"names":[],"mappings":";AAoFA;EACC;EACA;EACA;;;AAED;EAIC;EACA;;AA3BG;EAwBA;;AAxBA;EAwBA;;AAKF;EADD;IAEE;;;;AA9BC;EAoCA;;AApCA;EAoCA;;;AAGJ;EACC;EACA;EACA;EACA;EACA;EAIA;EACA;;AAjDG;EA8CF;;AA9CE;EA8CF;;AAID;EACC;EACA;EAIA;EACA;EACA;EACA;EACA;;AA5DE;EAsDD;;AAtDC;EAsDD;;AAOD;EAXD;IAYE;IACA;;;;AAKH;EACC;EACA;EACA;EACA;EACA;EAKA;EACA;;AA/EG;EA2EF;;AA3EE;EA2EF;;AAKD;EAZD;IAaE;IACE;IACA;IACA;;;;AAIJ;EACC;;;AAED;EACC;;;AAIA;EACC;;AAED;EACC;;;AAIF;EACC;EACA;EACA;EACA;EACA;;AACA;EAND;IAOE;IACA;IACA;IACA;;;AAlHE;EAsHD;;AAtHC;EAsHD;;;AAKH;EACC;EACA;;AACA;EAHD;IAIE;;;AAED;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIF;EACC;EACA;EACA;;AACC;EAJF;IAKE;IACE;IACF;;;;AAGF;EACC;EACA;EACA;;;AAGD;EACC;EACA;EACA;EACA;;AAEC;EANF;IAOE;IACE;;;AAGH;EACC;EACA;;AACA;EAHD;IAIE;IACA;IACA;;;AAED;EACC;;AACA;EAFD;IAGE;IACA;IACA;IACA;IACA;;EACA;IACC;IACA;;EA1LD;IA4LE;;EA5LF;IA4LE;;;AAKJ;EACC;EACA;EACA;;AApMC;EAsMA;;AAtMA;EAsMA;;AAED;EAPD;IAQE;;;AAIH;EAEC;EACA;EACA;EACA;;AAEA;EACC;;AArNC;EAwNC;;AAxND;EAwNC;;AAGF;EACC;;AA5NA;EA8NC;;AA9ND;EA8NC;;AAGF;EAbD;IAcE;;;AAGF;EACC;EACA;EACA;;AAxOC;EA0OA;;AA1OA;EA0OA;;AAED;EACC;;AAED;EAVD;IAWE;;;AAGF;EACC;;AACA;EACC;;AAtPA;EAwPC;;AAxPD;EAwPC;;AAGF;EACC;;AACA;EACC;;AAED;EACC;EACA;EACA;;AAnQD;EAqQE;;AArQF;EAqQE;;AAED;EACC;EACA;;AAzQF;EA2QG;;AA3QH;EA2QG;;AA3QH;EA8QG;;AA9QH;EA8QG;;AAKJ;EACC;EACA;;AAEA;EACC;EACA;EACA;EACA;;AAGD;EACC;EACA;EACA;EACA;EACA,YAhWS;EAiWT;EACA;EACA;EACA;;AACA;EAVD;IAWE;IACA;;;AAIF;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EAVD;IAWE;IACA;;;AA1TF;EAgUE;;AAhUF;EAgUE;;AAIF;EACC;EACA;;AAGD;EACC;;AAIF;EACC;;AACA;EACC;EACA;;AAGF;EACC;EACA;EACA;;AACA;EACC;EACA;;AA3VD;EA6VE;;AA7VF;EA6VE;;AA7VF;EAkWI;;AAlWJ;EAkWI;;AAGJ;EAAU;;AArWV;EAwWI;;AAxWJ;EAwWI;;AAxWJ;EA6WI;;AA7WJ;EA6WI;;AAIL;EACC;;AACA;EAFD;IAGE;IACA;;EArXD;IAuXE;;EAvXF;IAuXE;;;AAQL;EACC;EACA;;AACA;EAHD;IAIE;IAEA;IACA;IACA;IACA;;EAEC;IACC;;EAED;IACC;;;AAIH;EACC;EACA;EACA;;AACA;EACC;;AAED;EAPD;IAQE;IACA;IACA;IACA;IACA;IACA;;EACA;IACC;;EAED;IACC;;EACA;IACC;IACA;IACA;IACA;;;AAKJ;EACC;EACA;EACA;;AACA;EAJD;IAKE;IACA;;;AAED;EACC;EACA;EACA;EACA;EACA,OA7fU;EA8fV,kBAzfU;EA0fV;EACA;EACA;;AACA;EAVD;IAWE;IACA;IACA;IACA;IACA;;;AAED;EACC;;AACA;EAFD;IAGE;IACA,OA7gBQ;;;AAghBV;EACC,YA3gBS;;AA+gBV;EADD;IAEE;;;AAED;EAIC;;AA1dD;EAwdG;;AAxdH;EAwdG;;AAGF;EALD;IAME;;;AA5dF;EAgeG;;AAheH;EAgeG;;AAKJ;EACC;EACA;EACA,OA1iBU;;AA2iBV;EAJD;IAKE;;;;AASJ;EACC;EACA;;AACA;EAHD;IAIE;IACA;IACA;;;;AAMF;EACC;EACA;;AACA;EAHD;IAIE;IACA;IACA;;;AAED;EACC;EACA;EACA;;AACA;EACC;EACA;EACA;EACA;EACA;;AACA;EAND;IAOE;IACA;;;AAGF;EACC;;AACA;EAFD;IAGE;;;AAGA;EADD;IAEE;IACA;;;AAIH;EACC;EACA;;AACA;EAHD;IAIE;;;AAGF;EACC;EACA;EACA;EACA;;AA7iBA;EA+iBC;;AA/iBD;EA+iBC;;AAED;EARD;IASE;;;;AAOL;EACC;EACA","file":"styles.css"}

50
static/styles.scss
View File

@@ -132,6 +132,43 @@ a {
}
}
}
.theme-toggle {
position: fixed;
top: 1rem;
right: 1rem;
width: 1rem;
height: 1rem;
@include themed() {
color: t($base3);
// background: t($base3);
}
border-radius: 50%;
cursor: pointer;
@media (max-width: 580px) {
position: relative;
float: right;
top: 0;
right: 0;
}
}
.sun {
display: none
}
.moon {
display: block
}
.theme--dark {
.sun {
display: block
}
.moon {
display: none
}
}
.top {
display: flex;
justify-content: center;
@@ -141,7 +178,7 @@ a {
@media (max-width: 580px) {
display: block;
width: 90%;
margin: 1.5rem auto 0 auto;
margin: 1rem auto 1rem auto;
font-size: 0.8rem;
}
span {
@@ -473,7 +510,7 @@ a {
font-size: 0.9rem;
color: $color-base1;
background-color: $color-base6;
border-bottom: 1px solid $color-base7;
border-bottom: 1px solid darken($color-base7, 14%);
text-decoration: none;
border-radius: 8px;
@media (max-width: 580px) {
@@ -516,9 +553,7 @@ a {
span {
flex-basis: 20%;
margin-left: 0.4rem;
@include themed() {
color: t($base5);
}
color: $color-base1;
@media (max-width: 580px) {
display: none;
}
@@ -541,11 +576,6 @@ body.profile {
}
body.note {
.top {
@media (max-width: 580px) {
text-align: right;
}
}
.column_content {
flex-basis: 70%;
max-width: 70%;

42
static/top.html
View File

@@ -1,3 +1,43 @@
<div class="top">
<a href="https://nostr.com" class="nostr_link">What is <span>nostr</span>?</a>
</div>
<div class="theme-toggle">
<svg aria-hidden="true" data-prefix="fas" class="moon" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M283.211 512c78.962 0 151.079-35.925 198.857-94.792 7.068-8.708-.639-21.43-11.562-19.35-124.203 23.654-238.262-71.576-238.262-196.954 0-72.222 38.662-138.635 101.498-174.394 9.686-5.512 7.25-20.197-3.756-22.23A258.156 258.156 0 0 0 283.211 0c-141.309 0-256 114.511-256 256 0 141.309 114.511 256 256 256z"></path></svg>
<svg aria-hidden="true" data-prefix="fas" class="sun" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M256 160c-52.9 0-96 43.1-96 96s43.1 96 96 96 96-43.1 96-96-43.1-96-96-96zm246.4 80.5l-94.7-47.3 33.5-100.4c4.5-13.6-8.4-26.5-21.9-21.9l-100.4 33.5-47.4-94.8c-6.4-12.8-24.6-12.8-31 0l-47.3 94.7L92.7 70.8c-13.6-4.5-26.5 8.4-21.9 21.9l33.5 100.4-94.7 47.4c-12.8 6.4-12.8 24.6 0 31l94.7 47.3-33.5 100.5c-4.5 13.6 8.4 26.5 21.9 21.9l100.4-33.5 47.3 94.7c6.4 12.8 24.6 12.8 31 0l47.3-94.7 100.4 33.5c13.6 4.5 26.5-8.4 21.9-21.9l-33.5-100.4 94.7-47.3c13-6.5 13-24.7.2-31.1zm-155.9 106c-49.9 49.9-131.1 49.9-181 0-49.9-49.9-49.9-131.1 0-181 49.9-49.9 131.1-49.9 181 0 49.9 49.9 49.9 131.1 0 181z"></path></svg>
</div>
</div>
<script>
function toggleTheme() {
const htmlElement = document.documentElement;
const isDarkMode = htmlElement.classList.contains('theme--dark');
// Toggle theme classes on the html element
htmlElement.classList.toggle('theme--dark', !isDarkMode);
htmlElement.classList.toggle('theme--default', isDarkMode);
// Save preference in a cookie that expires at the end of the session
const expiryDate = new Date();
document.cookie = `themePreference=${isDarkMode ? 'light' : 'dark'};`;
}
// Check if the OS prefers dark mode
const prefersDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
// Load preference from the cookie if it exists
const themePreference = document.cookie.replace(/(?:(?:^|.*;\s*)themePreference\s*\=\s*([^;]*).*$)|^.*$/, '$1');
const isDarkMode = themePreference === 'dark' || (themePreference === '' && prefersDarkMode);
// Apply theme based on the preference
const htmlElement = document.documentElement;
htmlElement.classList.toggle('theme--dark', isDarkMode);
htmlElement.classList.toggle('theme--default', !isDarkMode);
// Add click event listener to the theme toggle button
const themeToggleButton = document.querySelector('.theme-toggle');
themeToggleButton.addEventListener('click', toggleTheme);
// const prefersDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
// if (prefersDarkMode) {
// document.documentElement.classList.add('theme--dark');
// }
</script>