pporto/arch-panel-extension-browser
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

Ajustes visuais no botão de light/dark mode

Browse Source
This commit is contained in:
Paulo Porto
2026-05-27 11:12:57 -03:00
parent cbf9550f0b
commit 945da04db0
2 changed files with 23 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
content-script.js
View File

@@ -474,7 +474,8 @@
action === "calendar-prev" || action === "calendar-prev" ||
action === "calendar-next" || action === "calendar-next" ||
action === "calendar-today" || action === "calendar-today" ||
action === "toggle-sidebar" action === "toggle-sidebar" ||
action === "toggle-theme"
) { ) {
return `[data-action="${action}"]`; return `[data-action="${action}"]`;
} }
@@ -530,9 +531,16 @@
type="button" type="button"
class="arch-panel-extension-theme-toggle" class="arch-panel-extension-theme-toggle"
data-action="toggle-theme" data-action="toggle-theme"
aria-label="Toggle dashboard theme" aria-label="${appState.theme === "dark" ? "Switch to light mode" : "Switch to dark mode"}"
title="${appState.theme === "dark" ? "Switch to light mode" : "Switch to dark mode"}"
> >
${appState.theme === "dark" ? "Light mode" : "Dark mode"} <svg viewBox="0 0 20 20" aria-hidden="true" focusable="false">
${
appState.theme === "dark"
? `<path d="M10 2.25a.75.75 0 0 1 .75.75v1a.75.75 0 0 1-1.5 0V3a.75.75 0 0 1 .75-.75Zm0 3.5a4.25 4.25 0 1 0 0 8.5 4.25 4.25 0 0 0 0-8.5ZM4.47 3.97a.75.75 0 0 1 1.06 0l.71.71a.75.75 0 1 1-1.06 1.06l-.71-.71a.75.75 0 0 1 0-1.06Zm11.06 0a.75.75 0 0 1 0 1.06l-.71.71a.75.75 0 1 1-1.06-1.06l.71-.71a.75.75 0 0 1 1.06 0ZM2.25 10a.75.75 0 0 1 .75-.75h1a.75.75 0 0 1 0 1.5H3a.75.75 0 0 1-.75-.75Zm13 0a.75.75 0 0 1 .75-.75h1a.75.75 0 0 1 0 1.5h-1a.75.75 0 0 1-.75-.75ZM5.18 14.26a.75.75 0 0 1 1.06 1.06l-.71.71a.75.75 0 0 1-1.06-1.06l.71-.71Zm8.58 1.06a.75.75 0 0 1 1.06-1.06l.71.71a.75.75 0 0 1-1.06 1.06l-.71-.71ZM10 15.25a.75.75 0 0 1 .75.75v1a.75.75 0 0 1-1.5 0v-1a.75.75 0 0 1 .75-.75Z"></path>`
: `<path d="M15.42 12.88a6.4 6.4 0 0 1-8.3-8.3.75.75 0 0 0-.88-.98 7.72 7.72 0 1 0 10.16 10.16.75.75 0 0 0-.98-.88Zm-5.7 2.89a6.22 6.22 0 0 1-4.36-10.66 7.9 7.9 0 0 0 9.53 9.53 6.2 6.2 0 0 1-5.17 1.13Z"></path>`
}
</svg>
</button> </button>
<button <button
type="button" type="button"

13
src/content/styles.css
View File

@@ -222,8 +222,12 @@ body.arch-panel-extension-modal-open {
.arch-panel-extension-theme-toggle { .arch-panel-extension-theme-toggle {
appearance: none; appearance: none;
display: inline-flex;
align-items: center;
justify-content: center;
width: 34px;
min-height: 34px; min-height: 34px;
padding: 0 14px; padding: 0;
border: 1px solid rgba(255, 255, 255, 0.28); border: 1px solid rgba(255, 255, 255, 0.28);
border-radius: 4px; border-radius: 4px;
background: rgba(255, 255, 255, 0.12); background: rgba(255, 255, 255, 0.12);
@@ -235,6 +239,13 @@ body.arch-panel-extension-modal-open {
transition: background-color 160ms ease, border-color 160ms ease, transform 160ms ease; transition: background-color 160ms ease, border-color 160ms ease, transform 160ms ease;
} }
.arch-panel-extension-theme-toggle svg {
width: 16px;
height: 16px;
fill: currentColor;
pointer-events: none;
}
.arch-panel-extension-shell-header .arch-panel-extension-theme-toggle:hover { .arch-panel-extension-shell-header .arch-panel-extension-theme-toggle:hover {
border-color: rgba(255, 255, 255, 0.44); border-color: rgba(255, 255, 255, 0.44);
background: rgba(255, 255, 255, 0.2); background: rgba(255, 255, 255, 0.2);