Feat(UI): Light / dark mode themes and toggle utility added.

This commit is contained in:
2025-03-05 16:33:32 +00:00
parent 3912506f24
commit bd58bd82ed
6 changed files with 337 additions and 51 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.8 KiB

View File

@@ -0,0 +1,28 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<!-- Defaults to black background but can be styled with CSS -->
<rect width="24" height="24" fill="black" style="fill: var(--page-background-colour, black);" />
<!-- Sun icon with transparent fill to reveal what's behind the SVG -->
<mask id="sun-mask">
<!-- The white parts of this mask will be the visible parts -->
<rect width="24" height="24" fill="white"/>
<!-- Sun circle -->
<circle cx="12" cy="12" r="4" fill="black"/>
<!-- Sun rays -->
<rect x="11" y="4" width="2" height="3" fill="black"/>
<rect x="11" y="17" width="2" height="3" fill="black"/>
<rect x="4" y="11" width="3" height="2" fill="black"/>
<rect x="17" y="11" width="3" height="2" fill="black"/>
<!-- Diagonal rays -->
<rect x="6.1" y="6.1" width="2" height="3" transform="rotate(-45 7.1 7.6)" fill="black"/>
<rect x="15.9" y="15.9" width="2" height="3" transform="rotate(-45 16.9 17.4)" fill="black"/>
<rect x="15.9" y="6.1" width="2" height="3" transform="rotate(45 16.9 7.6)" fill="black"/>
<rect x="6.1" y="15.9" width="2" height="3" transform="rotate(45 7.1 17.4)" fill="black"/>
</mask>
<!-- This is the transparent part that reveals what's behind the SVG -->
<rect width="24" height="24" fill="transparent" mask="url(#sun-mask)"/>
</svg>

After

Width:  |  Height:  |  Size: 1.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.5 KiB