[ramansg]

Adds a light theme alongside the already existing dark theme; its hue is similar to it. It is set to adhere to the OS setting.

Changes

• light-dark() function (2024 baseline), with fallbacks, is used.
• Hard-coded colors were replaced with variables.
• The dark palette was untouched to preserve its style; except --surface-code is now #121115 instead of a translucent tint: it appeared gray in light mode.
• Code blocks (pre) & code tabs use dark-theme colors in both themes.
• Selected text in code blocks now uses a fixed lighter color, so it's visible even in light theme.
• The Playground’s request bar and output have theme-dark, so text and controls follow dark-theme even on light pages.
• Added light theme-color alongside the pre-existing dark one.

Things to know

• Always add theme-dark to non-pre code elements that should appear dark in light mode. Without it, their text and controls use the light-theme colors.
• The @supports fallback for light-dark() function is temporary. Colors currently need to be changed in two places. I suggest removing it if supporting browser versions older than May 2024 is not a priority. The fallback wasn't tested.