mirror of
https://github.com/LibreTranslate/LibreTranslate.git
synced 2024-11-16 20:40:10 +01:00
Toggle light/dark mode
This commit is contained in:
parent
e0a143987f
commit
3f9da87639
@ -162,7 +162,7 @@ h3.header {
|
||||
left: 2px;
|
||||
}
|
||||
|
||||
.locale-panel a:hover{
|
||||
.locale-panel a:hovselecter{
|
||||
background-color: transparent !important;
|
||||
}
|
||||
|
||||
@ -186,10 +186,7 @@ h3.header {
|
||||
|
||||
select {
|
||||
color: var(--fg-color);
|
||||
}
|
||||
|
||||
select option {
|
||||
color: var(--pri-bg-color);
|
||||
background-color: var(--pri-bg-color);
|
||||
}
|
||||
|
||||
.language-select {
|
||||
@ -206,7 +203,6 @@ select option {
|
||||
text-decoration: underline;
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
background-color: transparent;
|
||||
padding: 0;
|
||||
text-indent: 0.01px;
|
||||
text-overflow: "";
|
||||
|
@ -525,4 +525,83 @@ function setApiKey(){
|
||||
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
|
||||
|
@ -78,6 +78,8 @@
|
||||
</select>
|
||||
<a href="https://hosted.weblate.org/projects/libretranslate/app/{{ current_locale }}/">{{ _h("Edit") }}<i class="material-icons">create</i></a>
|
||||
</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 %}
|
||||
{{ menulinks }}
|
||||
</ul>
|
||||
|
Loading…
Reference in New Issue
Block a user