SESP/sgse-app
2
0
Fork 0
Code Issues 3 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

feat: implement theme customization and user preferences

Browse Source 
- Added support for user-selected themes, allowing users to customize the appearance of the application.
- Introduced a new `temaPreferido` field in the user schema to store the preferred theme.
- Updated various components to apply the selected theme dynamically based on user preferences.
- Enhanced the UI to include a theme selection interface, enabling users to preview and save their theme choices.
- Implemented a polyfill for BlobBuilder to ensure compatibility across browsers, improving the functionality of the application.
This commit is contained in:
deyvisonwanderley
2025-11-22 22:05:52 -03:00
parent 58ac3a4f1b
commit 37d7318d5a
12 changed files with 1149 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files

314
apps/web/src/app.css
View File

@@ -74,4 +74,318 @@
:where(.card, .card-hover) > * {
position: relative;
z-index: 2;
}
/* Tema Aqua (padrão roxo/azul) - customizado para garantir funcionamento */
html[data-theme="aqua"],
html[data-theme="aqua"] body,
[data-theme="aqua"] {
color-scheme: light;
--p: 217 91% 60%;
--pf: 217 91% 50%;
--pc: 0 0% 100%;
--s: 217 91% 60%;
--sf: 217 91% 50%;
--sc: 0 0% 100%;
--a: 217 91% 60%;
--af: 217 91% 50%;
--ac: 0 0% 100%;
--n: 217 20% 17%;
--nf: 217 20% 10%;
--nc: 0 0% 100%;
--b1: 0 0% 100%;
--b2: 217 20% 95%;
--b3: 217 20% 90%;
--bc: 217 20% 17%;
--in: 217 91% 60%;
--inc: 0 0% 100%;
--su: 142 76% 36%;
--suc: 0 0% 100%;
--wa: 38 92% 50%;
--wac: 0 0% 100%;
--er: 0 84% 60%;
--erc: 0 0% 100%;
--rounded-box: 1rem;
--rounded-btn: 0.5rem;
--rounded-badge: 1.9rem;
--animation-btn: 0.25s;
--animation-input: 0.2s;
--btn-focus-scale: 0.95;
--border-btn: 1px;
--tab-border: 1px;
--tab-radius: 0.5rem;
}
/* Temas customizados para SGSE - Azul */
html[data-theme="sgse-blue"],
html[data-theme="sgse-blue"] body,
[data-theme="sgse-blue"] {
color-scheme: light;
--p: 217 91% 60%;
--pf: 217 91% 50%;
--pc: 0 0% 100%;
--s: 217 91% 60%;
--sf: 217 91% 50%;
--sc: 0 0% 100%;
--a: 217 91% 60%;
--af: 217 91% 50%;
--ac: 0 0% 100%;
--n: 217 20% 17%;
--nf: 217 20% 10%;
--nc: 0 0% 100%;
--b1: 0 0% 100%;
--b2: 217 20% 95%;
--b3: 217 20% 90%;
--bc: 217 20% 17%;
--in: 217 91% 60%;
--inc: 0 0% 100%;
--su: 142 76% 36%;
--suc: 0 0% 100%;
--wa: 38 92% 50%;
--wac: 0 0% 100%;
--er: 0 84% 60%;
--erc: 0 0% 100%;
--rounded-box: 1rem;
--rounded-btn: 0.5rem;
--rounded-badge: 1.9rem;
--animation-btn: 0.25s;
--animation-input: 0.2s;
--btn-focus-scale: 0.95;
--border-btn: 1px;
--tab-border: 1px;
--tab-radius: 0.5rem;
}
html[data-theme="sgse-green"],
html[data-theme="sgse-green"] body,
[data-theme="sgse-green"] {
color-scheme: light;
--p: 142 76% 36%;
--pf: 142 76% 26%;
--pc: 0 0% 100%;
--s: 142 76% 36%;
--sf: 142 76% 26%;
--sc: 0 0% 100%;
--a: 142 76% 36%;
--af: 142 76% 26%;
--ac: 0 0% 100%;
--n: 142 20% 17%;
--nf: 142 20% 10%;
--nc: 0 0% 100%;
--b1: 0 0% 100%;
--b2: 142 20% 95%;
--b3: 142 20% 90%;
--bc: 142 20% 17%;
--in: 142 76% 36%;
--inc: 0 0% 100%;
--su: 142 76% 36%;
--suc: 0 0% 100%;
--wa: 38 92% 50%;
--wac: 0 0% 100%;
--er: 0 84% 60%;
--erc: 0 0% 100%;
--rounded-box: 1rem;
--rounded-btn: 0.5rem;
--rounded-badge: 1.9rem;
--animation-btn: 0.25s;
--animation-input: 0.2s;
--btn-focus-scale: 0.95;
--border-btn: 1px;
--tab-border: 1px;
--tab-radius: 0.5rem;
}
html[data-theme="sgse-orange"],
html[data-theme="sgse-orange"] body,
[data-theme="sgse-orange"] {
color-scheme: light;
--p: 25 95% 53%;
--pf: 25 95% 43%;
--pc: 0 0% 100%;
--s: 25 95% 53%;
--sf: 25 95% 43%;
--sc: 0 0% 100%;
--a: 25 95% 53%;
--af: 25 95% 43%;
--ac: 0 0% 100%;
--n: 25 20% 17%;
--nf: 25 20% 10%;
--nc: 0 0% 100%;
--b1: 0 0% 100%;
--b2: 25 20% 95%;
--b3: 25 20% 90%;
--bc: 25 20% 17%;
--in: 25 95% 53%;
--inc: 0 0% 100%;
--su: 142 76% 36%;
--suc: 0 0% 100%;
--wa: 38 92% 50%;
--wac: 0 0% 100%;
--er: 0 84% 60%;
--erc: 0 0% 100%;
--rounded-box: 1rem;
--rounded-btn: 0.5rem;
--rounded-badge: 1.9rem;
--animation-btn: 0.25s;
--animation-input: 0.2s;
--btn-focus-scale: 0.95;
--border-btn: 1px;
--tab-border: 1px;
--tab-radius: 0.5rem;
}
html[data-theme="sgse-red"],
html[data-theme="sgse-red"] body,
[data-theme="sgse-red"] {
color-scheme: light;
--p: 0 84% 60%;
--pf: 0 84% 50%;
--pc: 0 0% 100%;
--s: 0 84% 60%;
--sf: 0 84% 50%;
--sc: 0 0% 100%;
--a: 0 84% 60%;
--af: 0 84% 50%;
--ac: 0 0% 100%;
--n: 0 20% 17%;
--nf: 0 20% 10%;
--nc: 0 0% 100%;
--b1: 0 0% 100%;
--b2: 0 20% 95%;
--b3: 0 20% 90%;
--bc: 0 20% 17%;
--in: 0 84% 60%;
--inc: 0 0% 100%;
--su: 142 76% 36%;
--suc: 0 0% 100%;
--wa: 38 92% 50%;
--wac: 0 0% 100%;
--er: 0 84% 60%;
--erc: 0 0% 100%;
--rounded-box: 1rem;
--rounded-btn: 0.5rem;
--rounded-badge: 1.9rem;
--animation-btn: 0.25s;
--animation-input: 0.2s;
--btn-focus-scale: 0.95;
--border-btn: 1px;
--tab-border: 1px;
--tab-radius: 0.5rem;
}
html[data-theme="sgse-pink"],
html[data-theme="sgse-pink"] body,
[data-theme="sgse-pink"] {
color-scheme: light;
--p: 330 81% 60%;
--pf: 330 81% 50%;
--pc: 0 0% 100%;
--s: 330 81% 60%;
--sf: 330 81% 50%;
--sc: 0 0% 100%;
--a: 330 81% 60%;
--af: 330 81% 50%;
--ac: 0 0% 100%;
--n: 330 20% 17%;
--nf: 330 20% 10%;
--nc: 0 0% 100%;
--b1: 0 0% 100%;
--b2: 330 20% 95%;
--b3: 330 20% 90%;
--bc: 330 20% 17%;
--in: 330 81% 60%;
--inc: 0 0% 100%;
--su: 142 76% 36%;
--suc: 0 0% 100%;
--wa: 38 92% 50%;
--wac: 0 0% 100%;
--er: 0 84% 60%;
--erc: 0 0% 100%;
--rounded-box: 1rem;
--rounded-btn: 0.5rem;
--rounded-badge: 1.9rem;
--animation-btn: 0.25s;
--animation-input: 0.2s;
--btn-focus-scale: 0.95;
--border-btn: 1px;
--tab-border: 1px;
--tab-radius: 0.5rem;
}
html[data-theme="sgse-teal"],
html[data-theme="sgse-teal"] body,
[data-theme="sgse-teal"] {
color-scheme: light;
--p: 173 80% 40%;
--pf: 173 80% 30%;
--pc: 0 0% 100%;
--s: 173 80% 40%;
--sf: 173 80% 30%;
--sc: 0 0% 100%;
--a: 173 80% 40%;
--af: 173 80% 30%;
--ac: 0 0% 100%;
--n: 173 20% 17%;
--nf: 173 20% 10%;
--nc: 0 0% 100%;
--b1: 0 0% 100%;
--b2: 173 20% 95%;
--b3: 173 20% 90%;
--bc: 173 20% 17%;
--in: 173 80% 40%;
--inc: 0 0% 100%;
--su: 142 76% 36%;
--suc: 0 0% 100%;
--wa: 38 92% 50%;
--wac: 0 0% 100%;
--er: 0 84% 60%;
--erc: 0 0% 100%;
--rounded-box: 1rem;
--rounded-btn: 0.5rem;
--rounded-badge: 1.9rem;
--animation-btn: 0.25s;
--animation-input: 0.2s;
--btn-focus-scale: 0.95;
--border-btn: 1px;
--tab-border: 1px;
--tab-radius: 0.5rem;
}
html[data-theme="sgse-corporate"],
html[data-theme="sgse-corporate"] body,
[data-theme="sgse-corporate"] {
color-scheme: dark;
--p: 217 91% 60%;
--pf: 217 91% 50%;
--pc: 0 0% 100%;
--s: 217 91% 60%;
--sf: 217 91% 50%;
--sc: 0 0% 100%;
--a: 217 91% 60%;
--af: 217 91% 50%;
--ac: 0 0% 100%;
--n: 217 30% 15%;
--nf: 217 30% 8%;
--nc: 0 0% 100%;
--b1: 217 30% 10%;
--b2: 217 30% 15%;
--b3: 217 30% 20%;
--bc: 217 10% 90%;
--in: 217 91% 60%;
--inc: 0 0% 100%;
--su: 142 76% 36%;
--suc: 0 0% 100%;
--wa: 38 92% 50%;
--wac: 0 0% 100%;
--er: 0 84% 60%;
--erc: 0 0% 100%;
--rounded-box: 1rem;
--rounded-btn: 0.5rem;
--rounded-badge: 1.9rem;
--animation-btn: 0.25s;
--animation-input: 0.2s;
--btn-focus-scale: 0.95;
--border-btn: 1px;
--tab-border: 1px;
--tab-radius: 0.5rem;
}