Add icons to theme selector
BIN
assets/icons/dark-mode/theme-auto.png
Normal file
After Width: | Height: | Size: 1.0 KiB |
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
After Width: | Height: | Size: 989 B |
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
After Width: | Height: | Size: 1.1 KiB |
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
After Width: | Height: | Size: 971 B |
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
After Width: | Height: | Size: 965 B |
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
After Width: | Height: | Size: 1.0 KiB |
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 {
|
.inline-code, .inline-code-text, .inline-code-icon {
|
||||||
background-color: #212121;
|
background-color: #212121;
|
||||||
}
|
}
|
||||||
object[type='image/svg+xml'] {
|
|
||||||
color: #212121;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dark {
|
.dark {
|
||||||
display: initial !important;
|
display: initial !important;
|
||||||
|
@ -60,9 +60,6 @@ body {
|
|||||||
.inline-code, .inline-code-text, .inline-code-icon {
|
.inline-code, .inline-code-text, .inline-code-icon {
|
||||||
background-color: #EEE;
|
background-color: #EEE;
|
||||||
}
|
}
|
||||||
object[type='image/svg+xml'] {
|
|
||||||
color: #EEE;
|
|
||||||
}
|
|
||||||
|
|
||||||
.light {
|
.light {
|
||||||
display: initial !important;
|
display: initial !important;
|
||||||
|
@ -92,6 +92,9 @@ a:hover {
|
|||||||
text-align: left;
|
text-align: left;
|
||||||
line-height: 1.5;
|
line-height: 1.5;
|
||||||
}
|
}
|
||||||
|
.theme-btn {
|
||||||
|
padding-left: 3px;
|
||||||
|
}
|
||||||
.theme-btn.selected {
|
.theme-btn.selected {
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
cursor: default;
|
cursor: default;
|
||||||
|
@ -12,7 +12,17 @@
|
|||||||
];
|
];
|
||||||
?>
|
?>
|
||||||
<?php foreach ($themes as $name=>$condition): ?>
|
<?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>
|
<br>
|
||||||
<?php endforeach; ?>
|
<?php endforeach; ?>
|
||||||
</div>
|
</div>
|
||||||
|