feat(glass): light-theme background images + enable the toggle in light
Add a light set of the 6 per-scheme backdrops (public/backdrops/light/*.svg) — soft, pastel-mid, non-figurative washes tuned to each accent so they read through the light translucent glass. Wire them up centrally: - App: the backdrop is on whenever bgImage && !perf (was dark-only), so light gets it too. - index.css: per-scheme rules are now [data-theme]-qualified — dark uses the dark set, light the /light/ set; shared cover/fixed size rule for both. - Settings: the Background image toggle + Image-fade slider work in light now (removed the dark-only gates); hint no longer says 'dark only'. Trilingual. The light glass (62% translucent tier) refracts the light backdrop just like dark refracts its own; one fade slider controls both.
This commit is contained in:
npeter83
parent
a4f42e6ea0
commit
36c27250c3
12 changed files with 134 additions and 20 deletions
18
frontend/public/backdrops/light/forest.svg
Normal file
18
frontend/public/backdrops/light/forest.svg
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1600 1000" preserveAspectRatio="xMidYMid slice">
|
||||
<defs>
|
||||
<radialGradient id="a" cx="20%" cy="18%" r="55%"><stop offset="0%" stop-color="#7fd0bf" stop-opacity=".9"/><stop offset="100%" stop-color="#7fd0bf" stop-opacity="0"/></radialGradient>
|
||||
<radialGradient id="b" cx="86%" cy="26%" r="52%"><stop offset="0%" stop-color="#2dd4bf" stop-opacity=".5"/><stop offset="100%" stop-color="#2dd4bf" stop-opacity="0"/></radialGradient>
|
||||
<radialGradient id="c" cx="68%" cy="92%" r="60%"><stop offset="0%" stop-color="#8fc9a5" stop-opacity=".85"/><stop offset="100%" stop-color="#8fc9a5" stop-opacity="0"/></radialGradient>
|
||||
<radialGradient id="d" cx="8%" cy="88%" r="55%"><stop offset="0%" stop-color="#88c2d6" stop-opacity=".8"/><stop offset="100%" stop-color="#88c2d6" stop-opacity="0"/></radialGradient>
|
||||
<filter id="s"><feGaussianBlur stdDeviation="60"/></filter>
|
||||
<filter id="g"><feTurbulence type="fractalNoise" baseFrequency="0.85" numOctaves="2" stitchTiles="stitch"/><feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .35 0"/></filter>
|
||||
</defs>
|
||||
<rect width="1600" height="1000" fill="#e9f5f0"/>
|
||||
<g filter="url(#s)">
|
||||
<rect width="1600" height="1000" fill="url(#a)"/>
|
||||
<rect width="1600" height="1000" fill="url(#c)"/>
|
||||
<rect width="1600" height="1000" fill="url(#d)"/>
|
||||
<rect width="1600" height="1000" fill="url(#b)"/>
|
||||
</g>
|
||||
<rect width="1600" height="1000" filter="url(#g)" opacity="0.04"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.5 KiB |
18
frontend/public/backdrops/light/matrix.svg
Normal file
18
frontend/public/backdrops/light/matrix.svg
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1600 1000" preserveAspectRatio="xMidYMid slice">
|
||||
<defs>
|
||||
<radialGradient id="a" cx="20%" cy="18%" r="55%"><stop offset="0%" stop-color="#8fd8ae" stop-opacity=".9"/><stop offset="100%" stop-color="#8fd8ae" stop-opacity="0"/></radialGradient>
|
||||
<radialGradient id="b" cx="86%" cy="26%" r="52%"><stop offset="0%" stop-color="#46b87c" stop-opacity=".45"/><stop offset="100%" stop-color="#46b87c" stop-opacity="0"/></radialGradient>
|
||||
<radialGradient id="c" cx="68%" cy="92%" r="60%"><stop offset="0%" stop-color="#7fc9c9" stop-opacity=".85"/><stop offset="100%" stop-color="#7fc9c9" stop-opacity="0"/></radialGradient>
|
||||
<radialGradient id="d" cx="8%" cy="88%" r="55%"><stop offset="0%" stop-color="#96d69c" stop-opacity=".8"/><stop offset="100%" stop-color="#96d69c" stop-opacity="0"/></radialGradient>
|
||||
<filter id="s"><feGaussianBlur stdDeviation="60"/></filter>
|
||||
<filter id="g"><feTurbulence type="fractalNoise" baseFrequency="0.85" numOctaves="2" stitchTiles="stitch"/><feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .35 0"/></filter>
|
||||
</defs>
|
||||
<rect width="1600" height="1000" fill="#eaf5ec"/>
|
||||
<g filter="url(#s)">
|
||||
<rect width="1600" height="1000" fill="url(#a)"/>
|
||||
<rect width="1600" height="1000" fill="url(#c)"/>
|
||||
<rect width="1600" height="1000" fill="url(#d)"/>
|
||||
<rect width="1600" height="1000" fill="url(#b)"/>
|
||||
</g>
|
||||
<rect width="1600" height="1000" filter="url(#g)" opacity="0.04"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.5 KiB |
18
frontend/public/backdrops/light/midnight.svg
Normal file
18
frontend/public/backdrops/light/midnight.svg
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1600 1000" preserveAspectRatio="xMidYMid slice">
|
||||
<defs>
|
||||
<radialGradient id="a" cx="20%" cy="18%" r="55%"><stop offset="0%" stop-color="#a9bcf3" stop-opacity=".9"/><stop offset="100%" stop-color="#a9bcf3" stop-opacity="0"/></radialGradient>
|
||||
<radialGradient id="b" cx="86%" cy="26%" r="52%"><stop offset="0%" stop-color="#6d8cff" stop-opacity=".5"/><stop offset="100%" stop-color="#6d8cff" stop-opacity="0"/></radialGradient>
|
||||
<radialGradient id="c" cx="68%" cy="92%" r="60%"><stop offset="0%" stop-color="#b3a8ec" stop-opacity=".85"/><stop offset="100%" stop-color="#b3a8ec" stop-opacity="0"/></radialGradient>
|
||||
<radialGradient id="d" cx="8%" cy="88%" r="55%"><stop offset="0%" stop-color="#9fd6e0" stop-opacity=".8"/><stop offset="100%" stop-color="#9fd6e0" stop-opacity="0"/></radialGradient>
|
||||
<filter id="s"><feGaussianBlur stdDeviation="60"/></filter>
|
||||
<filter id="g"><feTurbulence type="fractalNoise" baseFrequency="0.85" numOctaves="2" stitchTiles="stitch"/><feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .35 0"/></filter>
|
||||
</defs>
|
||||
<rect width="1600" height="1000" fill="#edf1fc"/>
|
||||
<g filter="url(#s)">
|
||||
<rect width="1600" height="1000" fill="url(#a)"/>
|
||||
<rect width="1600" height="1000" fill="url(#c)"/>
|
||||
<rect width="1600" height="1000" fill="url(#d)"/>
|
||||
<rect width="1600" height="1000" fill="url(#b)"/>
|
||||
</g>
|
||||
<rect width="1600" height="1000" filter="url(#g)" opacity="0.04"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.5 KiB |
18
frontend/public/backdrops/light/slate.svg
Normal file
18
frontend/public/backdrops/light/slate.svg
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1600 1000" preserveAspectRatio="xMidYMid slice">
|
||||
<defs>
|
||||
<radialGradient id="a" cx="20%" cy="18%" r="55%"><stop offset="0%" stop-color="#e6c393" stop-opacity=".9"/><stop offset="100%" stop-color="#e6c393" stop-opacity="0"/></radialGradient>
|
||||
<radialGradient id="b" cx="86%" cy="26%" r="52%"><stop offset="0%" stop-color="#e8913c" stop-opacity=".45"/><stop offset="100%" stop-color="#e8913c" stop-opacity="0"/></radialGradient>
|
||||
<radialGradient id="c" cx="68%" cy="92%" r="60%"><stop offset="0%" stop-color="#dba98c" stop-opacity=".85"/><stop offset="100%" stop-color="#dba98c" stop-opacity="0"/></radialGradient>
|
||||
<radialGradient id="d" cx="8%" cy="88%" r="55%"><stop offset="0%" stop-color="#cabf9e" stop-opacity=".8"/><stop offset="100%" stop-color="#cabf9e" stop-opacity="0"/></radialGradient>
|
||||
<filter id="s"><feGaussianBlur stdDeviation="60"/></filter>
|
||||
<filter id="g"><feTurbulence type="fractalNoise" baseFrequency="0.85" numOctaves="2" stitchTiles="stitch"/><feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .35 0"/></filter>
|
||||
</defs>
|
||||
<rect width="1600" height="1000" fill="#f4efe6"/>
|
||||
<g filter="url(#s)">
|
||||
<rect width="1600" height="1000" fill="url(#a)"/>
|
||||
<rect width="1600" height="1000" fill="url(#c)"/>
|
||||
<rect width="1600" height="1000" fill="url(#d)"/>
|
||||
<rect width="1600" height="1000" fill="url(#b)"/>
|
||||
</g>
|
||||
<rect width="1600" height="1000" filter="url(#g)" opacity="0.04"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.5 KiB |
18
frontend/public/backdrops/light/starship.svg
Normal file
18
frontend/public/backdrops/light/starship.svg
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1600 1000" preserveAspectRatio="xMidYMid slice">
|
||||
<defs>
|
||||
<radialGradient id="a" cx="20%" cy="18%" r="55%"><stop offset="0%" stop-color="#8fb6e8" stop-opacity=".9"/><stop offset="100%" stop-color="#8fb6e8" stop-opacity="0"/></radialGradient>
|
||||
<radialGradient id="b" cx="86%" cy="26%" r="52%"><stop offset="0%" stop-color="#38b6ff" stop-opacity=".45"/><stop offset="100%" stop-color="#38b6ff" stop-opacity="0"/></radialGradient>
|
||||
<radialGradient id="c" cx="68%" cy="92%" r="60%"><stop offset="0%" stop-color="#94a0e0" stop-opacity=".85"/><stop offset="100%" stop-color="#94a0e0" stop-opacity="0"/></radialGradient>
|
||||
<radialGradient id="d" cx="8%" cy="88%" r="55%"><stop offset="0%" stop-color="#8fc3d2" stop-opacity=".8"/><stop offset="100%" stop-color="#8fc3d2" stop-opacity="0"/></radialGradient>
|
||||
<filter id="s"><feGaussianBlur stdDeviation="60"/></filter>
|
||||
<filter id="g"><feTurbulence type="fractalNoise" baseFrequency="0.85" numOctaves="2" stitchTiles="stitch"/><feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .35 0"/></filter>
|
||||
</defs>
|
||||
<rect width="1600" height="1000" fill="#e9f1fc"/>
|
||||
<g filter="url(#s)">
|
||||
<rect width="1600" height="1000" fill="url(#a)"/>
|
||||
<rect width="1600" height="1000" fill="url(#c)"/>
|
||||
<rect width="1600" height="1000" fill="url(#d)"/>
|
||||
<rect width="1600" height="1000" fill="url(#b)"/>
|
||||
</g>
|
||||
<rect width="1600" height="1000" filter="url(#g)" opacity="0.04"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.5 KiB |
18
frontend/public/backdrops/light/youtube.svg
Normal file
18
frontend/public/backdrops/light/youtube.svg
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1600 1000" preserveAspectRatio="xMidYMid slice">
|
||||
<defs>
|
||||
<radialGradient id="a" cx="20%" cy="18%" r="55%"><stop offset="0%" stop-color="#f0a3aa" stop-opacity=".85"/><stop offset="100%" stop-color="#f0a3aa" stop-opacity="0"/></radialGradient>
|
||||
<radialGradient id="b" cx="86%" cy="26%" r="52%"><stop offset="0%" stop-color="#ff5b64" stop-opacity=".4"/><stop offset="100%" stop-color="#ff5b64" stop-opacity="0"/></radialGradient>
|
||||
<radialGradient id="c" cx="68%" cy="92%" r="60%"><stop offset="0%" stop-color="#e096a8" stop-opacity=".8"/><stop offset="100%" stop-color="#e096a8" stop-opacity="0"/></radialGradient>
|
||||
<radialGradient id="d" cx="8%" cy="88%" r="55%"><stop offset="0%" stop-color="#eec2c2" stop-opacity=".8"/><stop offset="100%" stop-color="#eec2c2" stop-opacity="0"/></radialGradient>
|
||||
<filter id="s"><feGaussianBlur stdDeviation="60"/></filter>
|
||||
<filter id="g"><feTurbulence type="fractalNoise" baseFrequency="0.85" numOctaves="2" stitchTiles="stitch"/><feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .35 0"/></filter>
|
||||
</defs>
|
||||
<rect width="1600" height="1000" fill="#faeef0"/>
|
||||
<g filter="url(#s)">
|
||||
<rect width="1600" height="1000" fill="url(#a)"/>
|
||||
<rect width="1600" height="1000" fill="url(#c)"/>
|
||||
<rect width="1600" height="1000" fill="url(#d)"/>
|
||||
<rect width="1600" height="1000" fill="url(#b)"/>
|
||||
</g>
|
||||
<rect width="1600" height="1000" filter="url(#g)" opacity="0.04"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.5 KiB |
Loading…
Add table
Add a link
Reference in a new issue