From 7cae521af2e20e446d3de7819922bc5d4c451d19 Mon Sep 17 00:00:00 2001 From: Dylan De Faoite Date: Sun, 30 Aug 2026 17:47:09 +0100 Subject: [PATCH] fix google login button not follwing dark theme --- frontend/src/index.css | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/frontend/src/index.css b/frontend/src/index.css index 487e6d2..d4d417e 100644 --- a/frontend/src/index.css +++ b/frontend/src/index.css @@ -125,6 +125,16 @@ body { color: var(--color-text-primary); } +/* Google Identity Services renders its sign-in button in a cross-origin iframe + whose document is light-scheme with a transparent background. Left to inherit + our `color-scheme: dark`, Chrome cannot honour dark there and paints an opaque + white canvas behind it instead — framing the pill in a white box on every dark + page. Pinning the iframe back to light keeps it transparent; the button's own + colours come from the `theme` prop in Topbar.tsx. */ +iframe[src*="accounts.google.com/gsi/"] { + color-scheme: light; +} + /* Clip trim slider (react-range-slider-input). Its own stylesheet ships blue defaults; the #id beats those class selectors regardless of import order. */ #range-slider {