Dark theme visibility issues
bLaCkwEw opened this issue · comments
Some elements remain the same color in both the light and dark themes which makes them hard to read.
Thanks for pointing this out @bLaCkwEw. It's happening due to prose-x classes being not override-able. As a stopgap solution, you can try as mentioned in : https://github.com/one-aalam/astro-ink/blob/main/src/components/Prose.astro
I'll come up with a more elegant solution in few days.
This seems to be back again on the latest main. Only text on the "About" page is colored properly on the dark variant of themes, all other text is too dark to read.
After a bisect and some manual fiddling this is the diff I came up with the restore it:
diff --git a/src/components/BaseLayout.astro b/src/components/BaseLayout.astro
index 1c3ff70..5e5f69b 100644
--- a/src/components/BaseLayout.astro
+++ b/src/components/BaseLayout.astro
@@ -1,5 +1,5 @@
-<body class="font-sans antialiased min-h-screen bg-gray-100 dark:bg-gray-800">
- <div class="transition-colors">
+<body class="font-sans antialiased min-h-screen">
+ <div class="bg-gray-100 dark:bg-gray-800 transition-colors">
<main class="mx-auto max-w-4xl px-4 md:px-0">
<slot />
</main>
diff --git a/src/components/ModeSwitcher.svelte b/src/components/ModeSwitcher.svelte
index 7194fe2..b58a0ce 100644
--- a/src/components/ModeSwitcher.svelte
+++ b/src/components/ModeSwitcher.svelte
@@ -10,7 +10,7 @@
function toggleTheme() {
- window.document.documentElement.classList.toggle(THEME_DARK)
+ window.document.body.classList.toggle(THEME_DARK)
currTheme = localStorage.getItem('theme') === THEME_DARK ? THEME_LIGHT : THEME_DARK
// Update Storage
localStorage.setItem('theme', currTheme)
@@ -20,10 +20,10 @@
onMount(() => {
if (localStorage.getItem('theme') === THEME_DARK || (!('theme' in localStorage) && window.matchMedia(`(prefers-color-scheme: ${THEME_DARK})`).matches)) {
- window.document.documentElement.classList.add(THEME_DARK)
+ window.document.body.classList.add(THEME_DARK)
currTheme = THEME_DARK
} else {
- window.document.documentElement.classList.remove(THEME_DARK)
+ window.document.body.classList.remove(THEME_DARK)
currTheme = THEME_LIGHT
}
// Update Store