Firefox all black on page backgrounds after update

I haven't changed anything but I restarted Firefox a little while ago, so it probably updated. The problem now is that all sorts of websites have a dark theme. Worse still, EVERYTHING in Firefox is now dark-themed. The download window/settings/library/etc. all have a dark theme, which I absolutely do not want.

After tinkering a bit, I found out that if the URL bar is white text on a black background, it changes the websites and things like the download window. Is there a way to stop this behavior? When I read for long periods, I absolutely need Firefox itself to be dark for eye strain reasons. I really don't want this to apply everywhere.

EDIT: I found a solution for websites only for anyone else facing this: change layout.css.prefers-color-scheme.content-override to 1 in about:config. (0 - dark mode, 1 - light mode, 2 - system colors?, 3 - theme colors?) 

I like the default dark color theme in Firefox, but I prefer to display websites in light mode. This distinction worked until recently, but with Firefox 95, the dark theme of the browser will also impose dark mode on websites. This seems to be a good default value, but I want to separate the browser's UI from the website content. Fortunately, there is an undocumented setting to change this behavior.

/* Light mode */
@media (prefers-color-scheme: light) {
 body {
 background-color: white;
 color: black;
 }
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
 body {
 background-color: black;
 color: white;
 }
}

The Bugbug bot thinks this bug should belong to the 'Core::Widget: Cocoa' component and moves the bug to this component. Please undo this change if you think the bot is incorrect.

The dark/light theme for websites (those that respect prefers-color-scheme) is now based on the browser theme rather than the operating system, this has been intentionally modified with bug 1529323. Bug 1736218 concerns adding a user interface to change whether websites/content appear dark or light.

Some websites will switch to dark mode if the browser indicates that the user prefers it. Unfortunately, starting with Firefox 95, it uses the user's theme to determine this.

Changing layout.css.prefers-color-scheme.content-override to 1 in about:config can solve this issue for websites.

Unfortunately, another change is that the theme colors for the URL dropdown and download/history/etc. windows have been modified for a new setting.

This has never happened before. I want to keep the colors of the sites I visit. As far as I know, only Google changes color based on Firefox's theme. How do I disable this feature? Is it part of Google or Firefox? 

It's a bit of both. Firefox can tell websites that you prefer to enable a dark theme, and sites that pay attention to this message may give the pages a dark appearance when requested.

Before the recent update of Firefox, Firefox read (by default) your system theme settings to see if dark mode was enabled. If so, Firefox's default theme would turn dark, and it would convey the dark preference to supported websites.

The recent update changed it so that Firefox conveys the dark preference to sites by default if Firefox is in dark mode. 

If you wish to have different color scheme preferences for the UI and FF sites, you can change “layout.css.prefers-color-scheme.content-override” in “about:config” to:

 Dark (0), Light (1), System (2) or Browser (3)

For 94, the default value was 2, in version 95, it is 3. You can either revert to 2, or just use 0/1 to change the color preference for the sites.
 

menupopup{
 --menuitem-hover-background-color: #e0e0e6 !important;
 --menu-background-color: #f9f9fb !important;
 --menu-color: #15141a !important;
 --menuitem-disabled-hover-background-color: rgba(224, 224, 230, 0.4) !important;
 --menu-disabled-color: rgba(21, 20, 26, 0.4) !important;
 --menu-border-color: #cfcfd8!important;
 --menu-icon-opacity: 0.7 !important;
}

/* Bookmark menu */
#PlacesToolbarItems .bookmark-item {
padding-top: 0px !important;
padding-bottom: 0px !important;
}

/* Right-click menu */
menupopup#contentAreaContextMenu menu,
menupopup#contentAreaContextMenu menuitem {
padding-top:0px !important;
padding-bottom:0px !important;
}

menupopup > menuitem, menupopup > menu {
padding-block: 4px !important;
}
:root {
--arrowpanel-menuitem-padding: 4px 8px !important;
}