pezkuwichain/pezkuwi-apps
1
0
Fork 0
mirror of https://github.com/pezkuwichain/pezkuwi-apps.git synced 2026-04-24 06:27:59 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: implement dark/light theme switching

Browse Source 
- Add ui-settings resolution for v3.16.9
- Add CSS variables for dark/light themes in GlobalStyle
- Set default data-theme attribute on html element
- Simplify theme creation in Root.tsx
- Disable webpack error overlay for cleaner dev experience
This commit is contained in:
Kurdistan Tech Ministry
2026-01-07 19:22:38 +03:00
parent fe0e014c4e
commit 67d71e128d
6 changed files with 39 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/react-components/src/styles/index.ts
+26
View File
@@ -61,6 +61,32 @@ function hexToRGB (hex: string, alpha?: string) {
}
export default createGlobalStyle<Props>(({ uiHighlight }: Props) => `
/* Dark theme CSS variables */
html[data-theme="dark"],
[data-theme="dark"] {
--bg-page: #26272c !important;
--bg-table: #3b3d3f !important;
--bg-input: #38393f !important;
--bg-menu: #26272c !important;
--bg-tabs: #38393f !important;
--bg-sidebar: #1a1b20 !important;
--color-text: rgba(244, 242, 240, 0.8) !important;
--border-table: #343536 !important;
}
/* Light theme CSS variables */
html[data-theme="light"],
[data-theme="light"] {
--bg-page: #f5f3f1 !important;
--bg-table: #ffffff !important;
--bg-input: #ffffff !important;
--bg-menu: #ffffff !important;
--bg-tabs: #ffffff !important;
--bg-sidebar: #fafafa !important;
--color-text: rgba(78, 78, 78, 0.8) !important;
--border-table: #efedeb !important;
}
.highlight--all {
background: ${getHighlight(uiHighlight)} !important;
border-color: ${getHighlight(uiHighlight)} !important;