Use native dark mode for comentario

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

View file

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

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;
}
}
}

View file

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

View file

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