Skip to content

Commit 2e457e8

Browse files
efimov90efimov90
committed
Reworked theme switcher
1 parent 49a48f9 commit 2e457e8

File tree

6 files changed

+88
-166
lines changed

6 files changed

+88
-166
lines changed

‎deps/rabbitmq_management/priv/www/css/dark.css‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -269,14 +269,14 @@
269269

270270
/* Theme switcher */
271271

272-
.switcher__radio {
272+
.theme-switcher[x-scheme="auto"]:after {
273273
filter: invert(1);
274274
}
275-
276-
.switcher__radio:checked {
277-
filter: invert(0);
275+
276+
.theme-switcher[x-scheme="dark"]:after {
277+
filter: invert(1);
278278
}
279-
280-
.switcher__status {
279+
280+
.theme-switcher[x-scheme="light"]:after {
281281
filter: invert(1);
282282
}

‎deps/rabbitmq_management/priv/www/css/light.css‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -269,14 +269,14 @@
269269

270270
/* Theme switcher */
271271

272-
.switcher__radio {
272+
.theme-switcher[x-scheme="auto"]:after {
273273
filter: invert(0);
274274
}
275-
276-
.switcher__radio:checked {
277-
filter: invert(1);
275+
276+
.theme-switcher[x-scheme="dark"]:after {
277+
filter: invert(0);
278278
}
279-
280-
.switcher__status {
279+
280+
.theme-switcher[x-scheme="light"]:after {
281281
filter: invert(0);
282282
}

‎deps/rabbitmq_management/priv/www/css/main.css‎

Lines changed: 19 additions & 71 deletions
Original file line numberDiff line numberDiff line change
@@ -434,87 +434,35 @@ input.toggle:checked + label.toggle:after {
434434

435435
/* Theme switcher */
436436

437-
.switcher {
438-
height: 32px;
439-
width: 96px;
437+
.theme-switcher {
440438
position: relative;
441-
margin: 2px;
442-
margin-left: -50px;
443-
padding: 2px;
444-
display: grid;
445-
grid-template-columns: 1fr 1fr 1fr;
446-
border: none;
447-
}
448-
449-
/* Theme switcher legend */
450-
451-
.switcher__legend {
452-
position: absolute;
453-
opacity: 0;
454-
pointer-events: none;
455-
}
456-
457-
/* Theme switcher radio */
458-
459-
.switcher__radio {
460-
-webkit-appearance: none;
461-
appearance: none;
462-
margin: 0;
463439
width: 32px;
464440
height: 32px;
465-
background-position: center;
466-
background-repeat: no-repeat;
467-
background-size: 24px;
468-
transition: filter 0.1s ease-in;
469-
}
470-
471-
.switcher__radio:focus {
472-
outline: none;
473-
}
474-
475-
.switcher__radio--light {
476-
background-image: url('../img/light.svg');
441+
border-radius: 45%;
442+
border: 2px solid var(--input-border-color);
443+
background-color: var(--dafault-background-color);
477444
}
478445

479-
.switcher__radio--auto {
480-
background-image: url('../img/auto.svg');
481-
}
482-
483-
.switcher__radio--dark {
484-
background-image: url('../img/dark.svg');
485-
}
486-
487-
/* Switcher status */
488-
489-
.switcher__status {
490-
position: absolute;
491-
top: 0;
492-
right: 0;
493-
bottom: 0;
494-
left: 0;
495-
z-index: -1;
496-
box-shadow: 0 0 0 2px rgb(0 0 0 /0.2);
497-
border-radius: 18px;
498-
background-color: rgb(255 255 255 / 0.5);
446+
.theme-switcher:after {
447+
content: "";
448+
background-size: 24px;
499449
background-repeat: no-repeat;
500-
background-image: url('../img/status.svg');
501-
background-size: 32px;
502450
background-position: center;
503-
transition: background-position 0.1s ease-in;
504-
}
505-
506-
.switcher__radio:focus-visible ~ .switcher__status {
507-
box-shadow: 0 0 0 2px black;
451+
position: absolute;
452+
width: 100%;
453+
height: 100%;
454+
left: 0;
455+
top: 0;
508456
}
509457

510-
.switcher__radio--light:checked ~ .switcher__status {
511-
background-position: left 2px center;
458+
.theme-switcher[x-scheme="auto"]:after {
459+
background-image: url(../img/auto.svg);
512460
}
513461

514-
.switcher__radio--auto:checked ~ .switcher__status {
515-
background-position: center center;
462+
.theme-switcher[x-scheme="dark"]:after {
463+
background-image: url(../img/dark.svg);
516464
}
517465

518-
.switcher__radio--dark:checked ~ .switcher__status {
519-
background-position: right 2px center;
520-
}
466+
.theme-switcher[x-scheme="light"]:after {
467+
background-image: url(../img/light.svg);
468+
}

‎deps/rabbitmq_management/priv/www/img/status.svg‎

Lines changed: 0 additions & 64 deletions
This file was deleted.

‎deps/rabbitmq_management/priv/www/js/theme-switcher.js‎

Lines changed: 48 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,62 @@
11
var lightStyles;
22
var darkStyles;
33
var darkSdhemeMedia;
4-
var switcherRadios;
54

6-
var initializeSwitcher = function initializeSwitcher() {
5+
function initializeSwitcher() {
76
lightStyles = document.querySelectorAll('link[rel=stylesheet][media*=prefers-color-scheme][media*=light]');
87
darkStyles = document.querySelectorAll('link[rel=stylesheet][media*=prefers-color-scheme][media*=dark]');
98
darkSdhemeMedia = matchMedia('(prefers-color-scheme: dark)');
10-
switcherRadios = document.getElementsByClassName('switcher__radio');
119

1210
let savedScheme = getSavedScheme();
11+
let switcherButtons = document.getElementsByClassName('theme-switcher');
1312

14-
if (savedScheme !== null) {
15-
let currentRadio = document.querySelector(`.switcher__radio[value=${savedScheme}]`);
16-
if (currentRadio !== null) {
17-
currentRadio.checked = true;
18-
}
13+
if(switcherButtons.length === 0) return;
14+
15+
if(savedScheme !== null)
16+
{
17+
switcherButtons[0].setAttribute("x-scheme", savedScheme);
1918
}
2019

21-
[...switcherRadios].forEach((radio) => {
22-
radio.addEventListener('change', (event) => {
23-
setScheme(event.target.value);
20+
[...switcherButtons].forEach((button) => {
21+
button.addEventListener('click', function() {
22+
let currentScheme = switcherButtons[0].getAttribute("x-scheme");
23+
let systemScheme = getSystemScheme();
24+
let newScheme;
25+
switch (currentScheme) {
26+
case "dark":
27+
if(systemScheme === "dark")
28+
{
29+
newScheme = "auto";
30+
}
31+
else
32+
{
33+
newScheme = "light";
34+
}
35+
break;
36+
case "light":
37+
if(systemScheme === "light")
38+
{
39+
newScheme = "auto";
40+
}
41+
else
42+
{
43+
newScheme = "dark";
44+
}
45+
break;
46+
default:
47+
if(systemScheme === "light")
48+
{
49+
newScheme = "dark";
50+
}
51+
else
52+
{
53+
newScheme = "light";
54+
}
55+
break;
56+
}
57+
58+
setScheme(newScheme);
59+
switcherButtons[0].setAttribute("x-scheme", newScheme);
2460
});
2561
});
2662
}
@@ -93,4 +129,4 @@ $(window).on('popstate', function() {
93129
$(document).ready(function() {
94130
initializeSwitcher();
95131
initializeScheme();
96-
});
132+
});

‎deps/rabbitmq_management/priv/www/js/tmpl/layout.ejs‎

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -54,11 +54,13 @@
5454
<li><a rel="noopener noreferrer" href="https://www.rabbitmq.com/docs/plugins" target="_blank">Plugins</a></li>
5555
<li><a rel="noopener noreferrer" href="https://www.rabbitmq.com/github" target="_blank">GitHub</a></li>
5656
</ul>
57-
<fieldset class="switcher">
58-
<legend class="switcher__legend">Scheme</legend>
59-
<input class="switcher__radio switcher__radio--light" type="radio" name="color-scheme" value="light" aria-label="Light">
60-
<input class="switcher__radio switcher__radio--auto" type="radio" name="color-scheme" value="auto" aria-label="System" checked>
61-
<input class="switcher__radio switcher__radio--dark" type="radio" name="color-scheme" value="dark" aria-label="Dark">
62-
<div class="switcher__status"></div>
63-
</fieldset>
57+
<button
58+
class="theme-switcher"
59+
type="button"
60+
title="Switch between dark and light mode (currently auto mode)"
61+
aria-label="Switch between dark and light mode (currently auto mode)"
62+
aria-live="polite"
63+
aria-pressed="true"
64+
x-scheme="auto">
65+
</button>
6466
</div>

0 commit comments

Comments
 (0)