White background on dark mode #1403
Description
I use epub.js on my Next.js project.
Next.js version 14 and epub.js version 0.3.93.
I've setup a dark and light mode with the following config:
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer utilities {
.text-balance {
text-wrap: balance;
}
}
@keyframes star-animation {
0% {
background-position: 0 0;
}
100% {
background-position: -2000px 0;
}
}
.bg-starfield {
background: url('/starfield-bg.jpg') repeat;
/* background-size: ; */
background-position: center;
animation: star-animation 200s linear infinite;
}
@layer base {
:root {
--background: 220 30% 90%; /* #DEE6F3 */
--foreground: 220 20% 10%; /* #161A21 */
--card: 220 30% 95%; /* #EEF3FA */
--card-foreground: 220 20% 10%; /* #161A21 */
--popover: 220 30% 95%; /* #EEF3FA */
--popover-foreground: 220 20% 10%; /* #161A21 */
--primary: 220 60% 50%; /* #3366CC */
--primary-foreground: 220 100% 98%; /* #F5F8FF */
--secondary: 240 30% 85%; /* #D1D4F0 */
--secondary-foreground: 220 20% 10%; /* #161A21 */
--muted: 220 20% 80%; /* #C2CAD6 */
--muted-foreground: 220 20% 40%; /* #5D6675 */
--accent: 280 30% 85%; /* #E0D1F0 */
--accent-foreground: 220 20% 10%; /* #161A21 */
--destructive: 0 84.2% 60.2%; /* #F03E3E */
--destructive-foreground: 0 0% 98%; /* #FAFAFA */
--border: 220 30% 70%; /* #A3B8D9 */
--input: 220 30% 70%; /* #A3B8D9 */
--ring: 220 60% 50%; /* #3366CC */
--chart-1: 220 70% 50%; /* #2952CC */
--chart-2: 280 60% 50%; /* #8033CC */
--chart-3: 40 80% 60%; /* #F2B705 */
--chart-4: 200 70% 50%; /* #05B2F2 */
--chart-5: 320 60% 50%; /* #CC3380 */
--radius: 0.5rem;
}
.dark {
--background: 220 30% 90%; /* #DEE6F3 */
--foreground: 220 20% 10%; /* #161A21 */
--card: 220 30% 95%; /* #EEF3FA */
--card-foreground: 220 20% 10%; /* #161A21 */
--popover: 220 30% 95%; /* #EEF3FA */
--popover-foreground: 220 20% 10%; /* #161A21 */
--primary: 220 60% 50%; /* #3366CC */
--primary-foreground: 220 100% 98%; /* #F5F8FF */
--secondary: 240 30% 85%; /* #D1D4F0 */
--secondary-foreground: 220 20% 10%; /* #161A21 */
--muted: 220 20% 80%; /* #C2CAD6 */
--muted-foreground: 220 20% 40%; /* #5D6675 */
--accent: 280 30% 85%; /* #E0D1F0 */
--accent-foreground: 220 20% 10%; /* #161A21 */
--destructive: 0 84.2% 60.2%; /* #F03E3E */
--destructive-foreground: 0 0% 98%; /* #FAFAFA */
--border: 220 30% 70%; /* #A3B8D9 */
--input: 220 30% 70%; /* #A3B8D9 */
--ring: 220 60% 50%; /* #3366CC */
--chart-1: 220 70% 50%; /* #2952CC */
--chart-2: 280 60% 50%; /* #8033CC */
--chart-3: 40 80% 60%; /* #F2B705 */
--chart-4: 200 70% 50%; /* #05B2F2 */
--chart-5: 320 60% 50%; /* #CC3380 */
--radius: 0.5rem;
}
}
@layer base {
* {
@apply border-border;
}
body {
@apply bg-background text-foreground;
}
}As you can see, the colors from light and dark mode are the same. So, if I switch from one theme to another, there would not be any changes.
But, when I switch to dark mode, a white background appears in the document. Is it something normal with your library ?
You can find here my project -> https://github.com/DamienDeSousa/star-wars-stories/tree/broken-background
If you want to test with my project, just be sure to use node.js 20 and run npm ci && npm run dev.