Add icons to theme selector
This commit is contained in:
parent
8aee61c01c
commit
a13bb5c0f6
BIN
assets/icons/dark-mode/theme-auto.png
Normal file
BIN
assets/icons/dark-mode/theme-auto.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.0 KiB |
8
assets/icons/dark-mode/theme-auto.svg
Normal file
8
assets/icons/dark-mode/theme-auto.svg
Normal file
@ -0,0 +1,8 @@
|
||||
<?xml version="1.0" encoding="utf-8" ?>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
|
||||
<mask id="mask">
|
||||
<rect x="0" y="0" width="50" height="100" fill="white" />
|
||||
</mask>
|
||||
<circle cx="50" cy="50" r="50" fill="white" mask="url(#mask)" />
|
||||
<circle cx="50" cy="50" r="45" fill-opacity="0" stroke="white" stroke-width="10" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 366 B |
BIN
assets/icons/dark-mode/theme-dark.png
Normal file
BIN
assets/icons/dark-mode/theme-dark.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 989 B |
8
assets/icons/dark-mode/theme-dark.svg
Normal file
8
assets/icons/dark-mode/theme-dark.svg
Normal file
@ -0,0 +1,8 @@
|
||||
<?xml version="1.0" encoding="utf-8" ?>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
|
||||
<mask id="mask">
|
||||
<rect x="0" y="0" width="100" height="100" fill="white" />
|
||||
<circle cx="30" cy="50" r="35" fill="black" />
|
||||
</mask>
|
||||
<circle cx="50" cy="50" r="50" fill="white" mask="url(#mask)" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 334 B |
BIN
assets/icons/dark-mode/theme-light.png
Normal file
BIN
assets/icons/dark-mode/theme-light.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
20
assets/icons/dark-mode/theme-light.svg
Normal file
20
assets/icons/dark-mode/theme-light.svg
Normal file
@ -0,0 +1,20 @@
|
||||
<?xml version="1.0" encoding="utf-8" ?>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
|
||||
<circle cx="50" cy="50" r="25" fill="white" />
|
||||
<rect x="47" y="2" width="6" height="15" rx="2" fill="white" />
|
||||
<rect x="47" y="2" width="6" height="15" rx="2" fill="white" transform="rotate(22.5 50 50)" />
|
||||
<rect x="47" y="2" width="6" height="15" rx="2" fill="white" transform="rotate(45 50 50)" />
|
||||
<rect x="47" y="2" width="6" height="15" rx="2" fill="white" transform="rotate(67.5 50 50)" />
|
||||
<rect x="47" y="2" width="6" height="15" rx="2" fill="white" transform="rotate(90 50 50)" />
|
||||
<rect x="47" y="2" width="6" height="15" rx="2" fill="white" transform="rotate(112.5 50 50)" />
|
||||
<rect x="47" y="2" width="6" height="15" rx="2" fill="white" transform="rotate(135 50 50)" />
|
||||
<rect x="47" y="2" width="6" height="15" rx="2" fill="white" transform="rotate(157.5 50 50)" />
|
||||
<rect x="47" y="2" width="6" height="15" rx="2" fill="white" transform="rotate(180 50 50)" />
|
||||
<rect x="47" y="2" width="6" height="15" rx="2" fill="white" transform="rotate(202.5 50 50)" />
|
||||
<rect x="47" y="2" width="6" height="15" rx="2" fill="white" transform="rotate(225 50 50)" />
|
||||
<rect x="47" y="2" width="6" height="15" rx="2" fill="white" transform="rotate(247.5 50 50)" />
|
||||
<rect x="47" y="2" width="6" height="15" rx="2" fill="white" transform="rotate(270 50 50)" />
|
||||
<rect x="47" y="2" width="6" height="15" rx="2" fill="white" transform="rotate(292.5 50 50)" />
|
||||
<rect x="47" y="2" width="6" height="15" rx="2" fill="white" transform="rotate(315 50 50)" />
|
||||
<rect x="47" y="2" width="6" height="15" rx="2" fill="white" transform="rotate(337.5 50 50)" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.7 KiB |
BIN
assets/icons/light-mode/theme-auto.png
Normal file
BIN
assets/icons/light-mode/theme-auto.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 971 B |
8
assets/icons/light-mode/theme-auto.svg
Normal file
8
assets/icons/light-mode/theme-auto.svg
Normal file
@ -0,0 +1,8 @@
|
||||
<?xml version="1.0" encoding="utf-8" ?>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
|
||||
<mask id="mask">
|
||||
<rect x="0" y="0" width="50" height="100" fill="white" />
|
||||
</mask>
|
||||
<circle cx="50" cy="50" r="50" fill="black" mask="url(#mask)" />
|
||||
<circle cx="50" cy="50" r="45" fill-opacity="0" stroke="black" stroke-width="10" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 366 B |
BIN
assets/icons/light-mode/theme-dark.png
Normal file
BIN
assets/icons/light-mode/theme-dark.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 965 B |
8
assets/icons/light-mode/theme-dark.svg
Normal file
8
assets/icons/light-mode/theme-dark.svg
Normal file
@ -0,0 +1,8 @@
|
||||
<?xml version="1.0" encoding="utf-8" ?>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
|
||||
<mask id="mask">
|
||||
<rect x="0" y="0" width="100" height="100" fill="white" />
|
||||
<circle cx="30" cy="50" r="35" fill="black" />
|
||||
</mask>
|
||||
<circle cx="50" cy="50" r="50" fill="black" mask="url(#mask)" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 334 B |
BIN
assets/icons/light-mode/theme-light.png
Normal file
BIN
assets/icons/light-mode/theme-light.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.0 KiB |
20
assets/icons/light-mode/theme-light.svg
Normal file
20
assets/icons/light-mode/theme-light.svg
Normal file
@ -0,0 +1,20 @@
|
||||
<?xml version="1.0" encoding="utf-8" ?>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
|
||||
<circle cx="50" cy="50" r="25" fill="black" />
|
||||
<rect x="47" y="2" width="6" height="15" rx="2" fill="black" />
|
||||
<rect x="47" y="2" width="6" height="15" rx="2" fill="black" transform="rotate(22.5 50 50)" />
|
||||
<rect x="47" y="2" width="6" height="15" rx="2" fill="black" transform="rotate(45 50 50)" />
|
||||
<rect x="47" y="2" width="6" height="15" rx="2" fill="black" transform="rotate(67.5 50 50)" />
|
||||
<rect x="47" y="2" width="6" height="15" rx="2" fill="black" transform="rotate(90 50 50)" />
|
||||
<rect x="47" y="2" width="6" height="15" rx="2" fill="black" transform="rotate(112.5 50 50)" />
|
||||
<rect x="47" y="2" width="6" height="15" rx="2" fill="black" transform="rotate(135 50 50)" />
|
||||
<rect x="47" y="2" width="6" height="15" rx="2" fill="black" transform="rotate(157.5 50 50)" />
|
||||
<rect x="47" y="2" width="6" height="15" rx="2" fill="black" transform="rotate(180 50 50)" />
|
||||
<rect x="47" y="2" width="6" height="15" rx="2" fill="black" transform="rotate(202.5 50 50)" />
|
||||
<rect x="47" y="2" width="6" height="15" rx="2" fill="black" transform="rotate(225 50 50)" />
|
||||
<rect x="47" y="2" width="6" height="15" rx="2" fill="black" transform="rotate(247.5 50 50)" />
|
||||
<rect x="47" y="2" width="6" height="15" rx="2" fill="black" transform="rotate(270 50 50)" />
|
||||
<rect x="47" y="2" width="6" height="15" rx="2" fill="black" transform="rotate(292.5 50 50)" />
|
||||
<rect x="47" y="2" width="6" height="15" rx="2" fill="black" transform="rotate(315 50 50)" />
|
||||
<rect x="47" y="2" width="6" height="15" rx="2" fill="black" transform="rotate(337.5 50 50)" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.7 KiB |
@ -60,9 +60,6 @@ body {
|
||||
.inline-code, .inline-code-text, .inline-code-icon {
|
||||
background-color: #212121;
|
||||
}
|
||||
object[type='image/svg+xml'] {
|
||||
color: #212121;
|
||||
}
|
||||
|
||||
.dark {
|
||||
display: initial !important;
|
||||
|
||||
@ -60,9 +60,6 @@ body {
|
||||
.inline-code, .inline-code-text, .inline-code-icon {
|
||||
background-color: #EEE;
|
||||
}
|
||||
object[type='image/svg+xml'] {
|
||||
color: #EEE;
|
||||
}
|
||||
|
||||
.light {
|
||||
display: initial !important;
|
||||
|
||||
@ -92,6 +92,9 @@ a:hover {
|
||||
text-align: left;
|
||||
line-height: 1.5;
|
||||
}
|
||||
.theme-btn {
|
||||
padding-left: 3px;
|
||||
}
|
||||
.theme-btn.selected {
|
||||
text-decoration: none;
|
||||
cursor: default;
|
||||
|
||||
@ -12,7 +12,17 @@
|
||||
];
|
||||
?>
|
||||
<?php foreach ($themes as $name=>$condition): ?>
|
||||
<a class="theme-btn <?= $condition ? "" : "selected" ?>" data-theme="<?= $name ?>" href="/api/set_theme/<?= $name ?>.php"><?= ucwords($name) . ($condition ? "" : " ✓") ?></a>
|
||||
<picture class="light">
|
||||
<source type="image/svg+xml" srcset="/assets/icons/light-mode/theme-<?= $name ?>.svg">
|
||||
<img class="icon" src="/assets/icons/theme-<?= $name ?>.png" alt="">
|
||||
</picture>
|
||||
<picture class="dark">
|
||||
<source type="image/svg+xml" srcset="/assets/icons/dark-mode/theme-<?= $name ?>.svg">
|
||||
<img class="icon" src="/assets/icons/theme-<?= $name ?>.png" alt="">
|
||||
</picture>
|
||||
<a class="theme-btn <?= $condition ? "" : "selected" ?>" data-theme="<?= $name ?>" href="/api/set_theme/<?= $name ?>.php">
|
||||
<?= ucwords($name) . ($condition ? "" : " ✓") ?>
|
||||
</a>
|
||||
<br>
|
||||
<?php endforeach; ?>
|
||||
</div>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user