White background on dark mode

[DamienDeSousa]

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.