>>> [!note] Migrated issue <!-- Drupal.org comment --> <!-- Migrated from issue #3579887. --> Reported by: [timkroehler](https://www.drupal.org/user/857780) Related to !768 >>> <p>Problem:<br> styles/theme/variables.scss (and compiled dist/css/theme/variables.css) contains invalid CSS in the .gin--dark-mode block:<br> scss--gin-shadow-button: rgba(#111, .9);<br> rgba() does not accept hex colour values. This is invalid CSS and causes browsers to abort parsing the entire .gin--dark-mode block silently, meaning all dark mode custom properties fail to resolve &mdash; --gin-bg-app, --gin-bg-layer, --gin-color-text etc. all fall back to their light mode :root values.<br> Steps to reproduce:</p> <p>Enable Gin as admin theme with dark mode on<br> Install Gutenberg module and enable on any content type<br> Open a node edit form<br> In browser console run:</p> <p>javascriptconst sheet = Array.from(document.styleSheets).find(s =&gt; s.href &amp;&amp; s.href.includes('variables.css'));<br> console.log('rules:', sheet.cssRules.length);<br> console.log('--gin-bg-app:', getComputedStyle(document.documentElement).getPropertyValue('--gin-bg-app'));<br> Actual result:</p> <p>rules: 1 &mdash; .gin--dark-mode block silently dropped by browser<br> --gin-bg-app is empty<br> All Gutenberg editor panels are white with white text (unreadable)</p> <p>Expected result:</p> <p>rules: 2<br> Dark mode variables resolve correctly</p> <p>Why it's hidden on normal Gin pages:<br> Gin's init.js re-applies the dark mode class via JS on normal pages, partially masking the issue. Gutenberg's React bootstrap interferes with this JS, fully exposing the parse failure.<br> Fix:<br> In styles/theme/variables.scss change:<br> scss--gin-shadow-button: rgba(#111, .9);<br> to:<br> scss--gin-shadow-button: rgba(17, 17, 17, 0.9);<br> Then recompile to update dist/css/theme/variables.css.<br> Environment:</p> <p>Drupal 11.2<br> Gin 5.0.12<br> Gutenberg module (any version)<br> All modern browsers affected</p>