Merge pull request #98 from advanced-rest-client/fix/dark-mode-union-buttons

alexpmule · web-flow · commit c9751a906fb4 · 2026-03-10T16:15:49.000-03:00
[@W-21514384] fix(api-type-document): use transparent/inherit fallbacks for union buttons in dark mode
diff --git a/.gitignore b/.gitignore
@@ -64,6 +64,7 @@ dist/
 !demo/avro.json
 !demo/avro2.json
 !demo/grpc-test.json
+!demo/grpc-test-old.json
 !demo/product-order-minimal.json
 !demo/product-order-minimal-compact.json
 !demo/product-order-deep-allof.json
diff --git a/demo/grpc-test-old.json b/demo/grpc-test-old.json
diff --git a/demo/grpc-test.json b/demo/grpc-test.json
diff --git a/demo/index.html b/demo/index.html
@@ -61,15 +61,68 @@
     .options > * {
       margin-left: 8px;
     }
+
+    /* Dark mode: simulates theme where union/oneOf buttons use transparent/inherit */
+    body.dark-mode {
+      background-color: #1e1e1e !important;
+      color: #e0e0e0;
+    }
+    body.dark-mode header {
+      background-color: #2d2d2d;
+      --iron-icon-fill-color: #e0e0e0;
+      --paper-input-container-focus-color: #90caf9;
+      --paper-input-container-label: { color: #e0e0e0; };
+    }
+    body.dark-mode [role="main"] {
+      background-color: #1e1e1e;
+    }
+    .dark-mode-toggle {
+      position: fixed;
+      bottom: 12px;
+      right: 12px;
+      z-index: 9999;
+      padding: 6px 10px;
+      background: #333;
+      color: #fff;
+      border-radius: 4px;
+      font-size: 12px;
+      cursor: pointer;
+      box-shadow: 0 2px 8px rgba(0,0,0,0.3);
+    }
+    .dark-mode-toggle input { margin-right: 6px; }
     </style>
 </head>
 
 <body>
   <div id="demo"></div>
+  <label class="dark-mode-toggle" title="Toggle dark mode to verify union/oneOf button visibility">
+    <input type="checkbox" id="darkModeCheckbox" /> Dark mode
+  </label>
 
   <script type="module" src="index.js"></script>
 
   <script>
+  (function() {
+    function initDarkMode() {
+      var cb = document.getElementById('darkModeCheckbox');
+      var stored = localStorage.getItem('api-type-document-dark-mode') === 'true';
+      if (stored) {
+        document.body.classList.add('dark-mode');
+        if (cb) cb.checked = true;
+      }
+      if (cb) {
+        cb.addEventListener('change', function() {
+          document.body.classList.toggle('dark-mode', cb.checked);
+          localStorage.setItem('api-type-document-dark-mode', cb.checked);
+        });
+      }
+    }
+    if (document.readyState === 'loading') {
+      document.addEventListener('DOMContentLoaded', initDarkMode);
+    } else {
+      initDarkMode();
+    }
+  })();
   document.addEventListener('WebComponentsReady', function() {
     if (!window.ShadyCSS) {
       return;
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@api-components/api-type-document",
   "description": "A documentation table for type (resource) properties. Works with AMF data model",
-  "version": "4.2.42",
+  "version": "4.2.43",
   "license": "Apache-2.0",
   "main": "index.js",
   "module": "index.js",
diff --git a/src/TypeStyles.js b/src/TypeStyles.js
@@ -41,10 +41,10 @@ export default css`
 
   .media-toggle {
     outline: none;
-    color: var(--api-type-document-media-button-color, #000);
+    color: var(--api-type-document-media-button-color, inherit);
     background-color: var(
       --api-type-document-media-button-background-color,
-      #fff
+      transparent
     );
     border-width: 1px;
     border-color: var(--api-type-document-media-button-border-color, #a3b11d);
@@ -64,9 +64,9 @@ export default css`
     outline: none;
     background-color: var(
       --api-type-document-union-button-background-color,
-      #fff
+      transparent
     );
-    color: var(--api-type-document-union-button-color, #000);
+    color: var(--api-type-document-union-button-color, inherit);
     border-width: 1px;
     border-color: var(--api-type-document-media-button-border-color, #a3b11d);
     border-style: solid;
diff --git a/test/api-type-document.test.js b/test/api-type-document.test.js
@@ -690,6 +690,17 @@ describe('<api-type-document>', () => {
           assert.equal(buttons.length, 2);
         });
 
+        it('union toggle buttons have transparent background by default (dark mode fix)', () => {
+          const button = element.shadowRoot.querySelector('.union-toggle');
+          assert.ok(button, 'union toggle button should exist');
+          const styles = getComputedStyle(button);
+          assert.notEqual(
+            styles.backgroundColor,
+            'rgb(255, 255, 255)',
+            'should not use hardcoded white background (invisible in dark mode)'
+          );
+        });
+
         it('Button change selection', () => {
           const buttons = element.shadowRoot.querySelectorAll('.union-toggle');
           /** @type HTMLElement */ (buttons[1]).click();
diff --git a/test/grpc.test.js b/test/grpc.test.js
@@ -72,7 +72,7 @@ describe('<api-type-document> - gRPC', () => {
     let amf;
 
     before(async () => {
-      amf = await AmfLoader.load(compact, 'grpc-test');
+      amf = await AmfLoader.load(compact, 'grpc-test-old');
     });
 
       describe('link-target resolution', () => {
@@ -209,7 +209,7 @@ describe('<api-type-document> - gRPC', () => {
           assert.isDefined(props1, 'Should have initial computed properties');
           
           // Update amf reference (simulate amf reload)
-          const newAmf = await AmfLoader.load(compact, 'grpc-test');
+          const newAmf = await AmfLoader.load(compact, 'grpc-test-old');
           element.amf = newAmf;
           await nextFrame();
           await aTimeout(0);

Original file line number	Diff line number	Diff line change
`@@ -1,7 +1,7 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "@api-components/api-type-document",`
`3`	`3`	`"description": "A documentation table for type (resource) properties. Works with AMF data model",`
`4`		`- "version": "4.2.42",`
	`4`	`+ "version": "4.2.43",`
`5`	`5`	`"license": "Apache-2.0",`
`6`	`6`	`"main": "index.js",`
`7`	`7`	`"module": "index.js",`