repos/website
1
Fork 0
Code Issues 1 Pull requests 26 Activity

Use native dark mode for comentario

Browse source
This commit is contained in:
Jake Howard 2024-07-28 21:37:04 +01:00
parent 4cfb0a896e
commit 7d4a9647d4
Signed by: jake
GPG key ID: 57AFB45680EDD477
4 changed files with 6 additions and 47 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
static/src/js/dark-mode.js
View file

@ -3,6 +3,7 @@ const STORAGE_KEY = "dark-mode";
const htmlTag = document.getElementsByTagName("html")[0]; const htmlTag = document.getElementsByTagName("html")[0];
const darkModeToggle = document.getElementById("dark-mode-toggle"); const darkModeToggle = document.getElementById("dark-mode-toggle");
const comentarioComments = document.getElementsByTagName("comentario-comments");
const matchesDarkMode = window.matchMedia("(prefers-color-scheme: dark)"); const matchesDarkMode = window.matchMedia("(prefers-color-scheme: dark)");
@ -14,6 +15,10 @@ function handleDarkMode(darkMode) {
} else { } else {
htmlTag.classList.remove(DARK_MODE_CLASS); htmlTag.classList.remove(DARK_MODE_CLASS);
} }
for (const commentElement of comentarioComments) {
commentElement.setAttribute("theme", darkMode ? "dark" : "light");
}
} }
if (window.localStorage.getItem(STORAGE_KEY) === null) { if (window.localStorage.getItem(STORAGE_KEY) === null) {

46
static/src/scss/_comments.scss
View file

@ -1,46 +0,0 @@
#comments {
margin-top: 2rem;
}
.comentario-text-muted,
.comentario-root,
.comentario-card .comentario-name {
@include dark-mode {
color: $dark-mode-text !important;
}
}
.comentario-add-comment-host,
.comentario-comment-editor textarea,
.comentario-toolbar.comentario-disabled {
background-color: transparent !important;
}
.comentario-add-comment-host:not(.comentario-editor-inserted) {
border: 1px solid color.adjust($white, $alpha: -0.5) !important;
}
.comentario-comment-editor textarea {
background-color: transparent !important;
@include dark-mode {
color: $dark-mode-text !important;
}
}
.comentario-footer a {
color: $link !important;
}
.comentario-btn-link {
color: $link !important;
}
.comentario-card {
@include dark-mode {
border-top: 1px solid color.adjust($white, $alpha: -0.5);
p {
color: $dark-mode-text;
}
}
}

1
static/src/scss/_content.scss
View file

@ -67,5 +67,6 @@ section.content {
} }
#comments { #comments {
margin-top: 2rem;
scroll-margin-top: var(--hero-height); // hero height (ish) scroll-margin-top: var(--hero-height); // hero height (ish)
} }

1
static/src/scss/base.scss
View file

@ -19,7 +19,6 @@
@import "spotify"; @import "spotify";
@import "404"; @import "404";
@import "password_required"; @import "password_required";
@import "comments";
@import "similar_content"; @import "similar_content";
@import "support_pill"; @import "support_pill";