/* Dark theme for the Fake File/Music Generator template, plus the light/dark switcher. Light mode is untouched: every rule below only applies in dark mode, which follows the visitor's system setting unless they picked a theme with the switcher (data-theme="light" or "dark" on ). Generated: the same rules are emitted once for each of those two cases. */ :root { color-scheme: light dark; } :root[data-theme="light"] { color-scheme: light; } :root[data-theme="dark"] { color-scheme: dark; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; } :root:not([data-theme="light"]) html, :root:not([data-theme="light"]) body { background-color: #16181b; } :root:not([data-theme="light"]) body, :root:not([data-theme="light"]) button, :root:not([data-theme="light"]) input, :root:not([data-theme="light"]) select, :root:not([data-theme="light"]) textarea { color: #d6d8dc; } :root:not([data-theme="light"]) a, :root:not([data-theme="light"]) a:visited { color: #7db8ff; } :root:not([data-theme="light"]) .sbox { background: #1f2226; border-color: #33383e; box-shadow: 0 0 5px rgba(0, 0, 0, .6); } :root:not([data-theme="light"]) .sbox p { color: #d6d8dc; } :root:not([data-theme="light"]) footer { color: #9aa0a7; } :root:not([data-theme="light"]) a.minimal, :root:not([data-theme="light"]) a.minimal:visited { background: #2a2e33; border-color: #4a4f56; box-shadow: inset 0 0 1px 1px #33383e; color: #e6e8eb; text-shadow: none; } :root:not([data-theme="light"]) a.minimal:hover { background: #353a40; box-shadow: inset 0 0 1px 1px #3d4248; color: #fff; } :root:not([data-theme="light"]) a.minimal:active { background: #3d4248; color: #fff; } :root:not([data-theme="light"]) a.red, :root:not([data-theme="light"]) a.red:visited { color: #fff; } :root:not([data-theme="light"]) input[type="text"], :root:not([data-theme="light"]) select { background-color: #26292f; color: #eceef1; border: 1px solid #555b63; } :root:not([data-theme="light"]) ins.adsbygoogle { background: transparent; } :root:not([data-theme="light"]) tr.trackOdd { background-color: #262a2f; } } :root[data-theme="dark"] html, :root[data-theme="dark"] body { background-color: #16181b; } :root[data-theme="dark"] body, :root[data-theme="dark"] button, :root[data-theme="dark"] input, :root[data-theme="dark"] select, :root[data-theme="dark"] textarea { color: #d6d8dc; } :root[data-theme="dark"] a, :root[data-theme="dark"] a:visited { color: #7db8ff; } :root[data-theme="dark"] .sbox { background: #1f2226; border-color: #33383e; box-shadow: 0 0 5px rgba(0, 0, 0, .6); } :root[data-theme="dark"] .sbox p { color: #d6d8dc; } :root[data-theme="dark"] footer { color: #9aa0a7; } :root[data-theme="dark"] a.minimal, :root[data-theme="dark"] a.minimal:visited { background: #2a2e33; border-color: #4a4f56; box-shadow: inset 0 0 1px 1px #33383e; color: #e6e8eb; text-shadow: none; } :root[data-theme="dark"] a.minimal:hover { background: #353a40; box-shadow: inset 0 0 1px 1px #3d4248; color: #fff; } :root[data-theme="dark"] a.minimal:active { background: #3d4248; color: #fff; } :root[data-theme="dark"] a.red, :root[data-theme="dark"] a.red:visited { color: #fff; } :root[data-theme="dark"] input[type="text"], :root[data-theme="dark"] select { background-color: #26292f; color: #eceef1; border: 1px solid #555b63; } :root[data-theme="dark"] ins.adsbygoogle { background: transparent; } :root[data-theme="dark"] tr.trackOdd { background-color: #262a2f; } /* Theme switcher (top right): shows a moon in light mode and a sun in dark mode */ #theme-toggle { position: absolute; top: 14px; right: 12px; width: 34px; height: 34px; padding: 6px; border: 1px solid #bbb; border-radius: 50%; background: #fff; color: #555; cursor: pointer; line-height: 0; } #theme-toggle:hover, #theme-toggle:focus-visible { color: #06c; border-color: #06c; } #theme-toggle[hidden] { display: none; } #theme-toggle svg { width: 20px; height: 20px; } #theme-toggle .icon-sun { display: none; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) #theme-toggle { background: #1f2226; border-color: #4a4f56; color: #d6d8dc; } :root:not([data-theme="light"]) #theme-toggle:hover { color: #7db8ff; border-color: #7db8ff; } :root:not([data-theme="light"]) #theme-toggle .icon-sun { display: inline; } :root:not([data-theme="light"]) #theme-toggle .icon-moon { display: none; } } :root[data-theme="dark"] #theme-toggle { background: #1f2226; border-color: #4a4f56; color: #d6d8dc; } :root[data-theme="dark"] #theme-toggle:hover { color: #7db8ff; border-color: #7db8ff; } :root[data-theme="dark"] #theme-toggle .icon-sun { display: inline; } :root[data-theme="dark"] #theme-toggle .icon-moon { display: none; }