/** * Wetzlar Color Mode Toggle — frontend & shared styles. * * The button renders both icons; CSS shows only the one that matches the * current mode. Default = dark mode → show the "sun" (switch-to-light) icon. * Light mode is signaled by [data-theme="light"] on . */ .wetzlar-color-mode-toggle { background: transparent; border: 0; color: inherit; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; line-height: 1; transition: opacity 0.2s ease; } .wetzlar-color-mode-toggle:hover { opacity: 0.75; } .wetzlar-color-mode-toggle:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; } .wetzlar-color-mode-toggle__icon { display: inline-flex; align-items: center; justify-content: center; width: var( --wetzlar-color-mode-icon-size, 20px ); height: var( --wetzlar-color-mode-icon-size, 20px ); } .wetzlar-color-mode-toggle__icon svg, .wetzlar-color-mode-toggle__icon img { width: 100%; height: 100%; display: block; } /* Default (dark mode active): show the sun (switch-to-light) icon. */ .wetzlar-color-mode-toggle__icon--light { display: none; } /* Light mode active: swap icons. */ [data-theme="light"] .wetzlar-color-mode-toggle__icon--dark { display: none; } [data-theme="light"] .wetzlar-color-mode-toggle__icon--light { display: inline-flex; } /* Alignment helpers when used inside a flex/grid cell. */ .wetzlar-color-mode-toggle.alignleft { justify-self: start; margin-right: auto; } .wetzlar-color-mode-toggle.aligncenter { justify-self: center; margin-left: auto; margin-right: auto; } .wetzlar-color-mode-toggle.alignright { justify-self: end; margin-left: auto; }