Window Controls Overlay Demo - Online PWA Title Bar Customization

/* Detect WCO mode */
@media (display-mode: window-controls-overlay) {
  /* Styles specific to WCO mode */
  .titlebar {
    position: fixed;
    left: env(titlebar-area-x, 0);
    top: env(titlebar-area-y, 0);
    width: env(titlebar-area-width, 100%);
    height: env(titlebar-area-height, 40px);
    background: #1a1a2e;
    color: #fff;
    display: flex;
    align-items: center;
    padding: 0 12px;
  }
}

/* Drag region - titlebar background */
.titlebar {
  -webkit-app-region: drag;
  app-region: drag;
}

/* Interactive elements need no-drag */
.titlebar button,
.titlebar input {
  -webkit-app-region: no-drag;
  app-region: no-drag;
}

// Check if WCO is available
if ('windowControlsOverlay' in navigator) {
  const wco = navigator.windowControlsOverlay;
  
  console.log('WCO visible:', wco.visible);
  
  // Listen for geometry changes
  wco.addEventListener('geometrychange', () => {
    if (wco.visible) {
      console.log('Titlebar area changed!');
      // CSS env() variables update automatically
    }
  });
}

// CSS env variables available in WCO mode:
// env(titlebar-area-x)      - X offset of titlebar
// env(titlebar-area-y)      - Y offset of titlebar
// env(titlebar-area-width)  - Full titlebar width
// env(titlebar-area-height) - Titlebar height

<!-- Titlebar with safe content placement -->
<div class="titlebar">
  <div class="titlebar-content">
    <span class="app-logo">📱</span>
    <span class="app-name">My PWA</span>
  </div>
  <input type="search" placeholder="Search...">
</div>