Toggle light/dark mode

This commit is contained in:
Piero Toffanin 2023-10-09 15:15:39 -04:00
parent e0a143987f
commit 3f9da87639
3 changed files with 83 additions and 6 deletions

View file

@ -162,7 +162,7 @@ h3.header {
left: 2px; left: 2px;
} }
.locale-panel a:hover{ .locale-panel a:hovselecter{
background-color: transparent !important; background-color: transparent !important;
} }
@ -186,10 +186,7 @@ h3.header {
select { select {
color: var(--fg-color); color: var(--fg-color);
} background-color: var(--pri-bg-color);
select option {
color: var(--pri-bg-color);
} }
.language-select { .language-select {
@ -206,7 +203,6 @@ select option {
text-decoration: underline; text-decoration: underline;
-webkit-appearance: none; -webkit-appearance: none;
appearance: none; appearance: none;
background-color: transparent;
padding: 0; padding: 0;
text-indent: 0.01px; text-indent: 0.01px;
text-overflow: ""; text-overflow: "";

View file

@ -525,4 +525,83 @@ function setApiKey(){
localStorage.setItem("api_key", newKey); localStorage.setItem("api_key", newKey);
} }
// Color scheme handling
function getPreferredColorScheme(){
var systemScheme = 'light';
if(window.matchMedia('(prefers-color-scheme: dark)').matches){
systemScheme = 'dark';
}
var chosenScheme = systemScheme;
if(localStorage.getItem("scheme")){
chosenScheme = localStorage.getItem("scheme");
}
if(systemScheme === chosenScheme){
localStorage.removeItem("scheme");
}
return chosenScheme;
}
// Write chosen color scheme to local storage
// Unless the system scheme matches the the stored scheme, in which case... remove from local storage
function savePreferredColorScheme(scheme){
var systemScheme = 'light';
if(window.matchMedia('(prefers-color-scheme: dark)').matches){
systemScheme = 'dark';
}
if(systemScheme === scheme){
localStorage.removeItem("scheme");
} else {
localStorage.setItem("scheme", scheme);
}
}
// Get the current scheme, and apply the opposite
function toggleColorScheme(){
let newScheme = "light";
let scheme = getPreferredColorScheme();
if (scheme === "light"){
newScheme = "dark";
}
applyPreferredColorScheme(newScheme);
}
// Apply the chosen color scheme by traversing stylesheet rules, and applying a medium.
function applyPreferredColorScheme(scheme) {
for (var s = 0; s < document.styleSheets.length; s++) {
for (var i = 0; i < document.styleSheets[s].cssRules.length; i++) {
rule = document.styleSheets[s].cssRules[i];
if (rule && rule.media && rule.media.mediaText.includes("prefers-color-scheme")) {
switch (scheme) {
case "light":
rule.media.appendMedium("original-prefers-color-scheme");
if (rule.media.mediaText.includes("light")) rule.media.deleteMedium("(prefers-color-scheme: light)");
if (rule.media.mediaText.includes("dark")) rule.media.deleteMedium("(prefers-color-scheme: dark)");
break;
case "dark":
rule.media.appendMedium("(prefers-color-scheme: light)");
rule.media.appendMedium("(prefers-color-scheme: dark)");
if (rule.media.mediaText.includes("original")) rule.media.deleteMedium("original-prefers-color-scheme");
break;
default:
rule.media.appendMedium("(prefers-color-scheme: dark)");
if (rule.media.mediaText.includes("light")) rule.media.deleteMedium("(prefers-color-scheme: light)");
if (rule.media.mediaText.includes("original")) rule.media.deleteMedium("original-prefers-color-scheme");
break;
}
}
}
}
savePreferredColorScheme(scheme);
}
applyPreferredColorScheme(getPreferredColorScheme());
// @license-end // @license-end

View file

@ -78,6 +78,8 @@
</select> </select>
<a href="https://hosted.weblate.org/projects/libretranslate/app/{{ current_locale }}/">{{ _h("Edit") }}<i class="material-icons">create</i></a> <a href="https://hosted.weblate.org/projects/libretranslate/app/{{ current_locale }}/">{{ _h("Edit") }}<i class="material-icons">create</i></a>
</li> </li>
<li class="change-theme"><a class="noline" href="javascript:toggleColorScheme()" title="{{ _h('Toggle dark/light mode') }}"><i class="material-icons">lightbulb_outline</i></a>
</li>
{% endset %} {% endset %}
{{ menulinks }} {{ menulinks }}
</ul> </ul>