Editor Component Forces Entire App into Dark Mode

[kumarpankajgkv]

When the editor component is loaded on a specific page, it forces the entire app into dark mode, even though my app is configured for light mode by default. The issue persists despite removing "dark" classes from and inside _app.tsx.

Steps to Reproduce

Start the app in light mode (no dark class on or ).

Navigate to the page where the editor is used.

Observe that the entire app (not just the editor) switches to dark mode.

Expected Behavior

The editor should only apply its theme styles within its container.

It should not modify global classes (dark on or ).

App pages outside the editor should remain in light mode unless explicitly toggled.

Actual Behavior

As soon as the editor mounts, the whole app switches to dark mode.

Even after removing "dark" classes with useEffect, the editor’s CSS still overrides global styles.

Importing github-dark.css (or other dark-only styles) from the editor package applies dark mode across the entire application.

_app.tsx (simplified):

useEffect(() => {
document.documentElement.classList.remove("dark");
document.body.classList.remove("dark");
}, []);

Editor import:
import "prism-code-editor-lightweight/themes/github-dark.css"; // seems to trigger global dark mode

Environment
Framework: Next.js
Styling: TailwindCSS (darkMode: 'class')

Editor package: [please fill actual package name/version]

Browser: Chrome / Firefox (reproducible across both)

[bernardarhia]

Editor has a prop dark which you can use to toogle between dark and light mode