Dark mode 🌙 (#835)

* dark mode * switch light/dark mode * version is downgraded to resolve @typescript-eslint error
felixmosh · Oct 13, 2024 · 278559f · 278559f
1 parent 9ef8531
commit 278559f
Show file tree

Hide file tree

Showing 21 changed files with 173 additions and 62 deletions.
diff --git a/packages/ui/package.json b/packages/ui/package.json
@@ -64,6 +64,7 @@
     "i18next-http-backend": "^2.6.2",
     "i18next-locales-sync": "^2.1.0",
     "nanoid": "^4.0.1",
+    "next-themes": "^0.2.1",
     "pretty-bytes": "^6.1.1",
     "react": "^17.0.0",
     "react-dom": "^17.0.0",

diff --git a/packages/ui/src/App.tsx b/packages/ui/src/App.tsx
@@ -12,6 +12,7 @@ import { useQueues } from './hooks/useQueues';
 import { useScrollTopOnNav } from './hooks/useScrollTopOnNav';
 import { useTranslation } from 'react-i18next';
 import { useSettingsStore } from './hooks/useSettings';
+import { ThemeProvider } from 'next-themes';
 
 const JobPageLazy = React.lazy(() =>
   import('./pages/JobPage/JobPage').then(({ JobPage }) => ({ default: JobPage }))
@@ -45,7 +46,7 @@ export const App = () => {
   }, [language]);
 
   return (
-    <>
+    <ThemeProvider>
       <Header>
         <Title />
         <HeaderActions />
@@ -65,6 +66,6 @@ export const App = () => {
       </main>
       <Menu />
       <ToastContainer />
-    </>
+    </ThemeProvider>
   );
 };
diff --git a/packages/ui/src/components/Button/Button.module.css b/packages/ui/src/components/Button/Button.module.css
@@ -7,7 +7,7 @@
   outline: none;
   white-space: nowrap;
   padding: 0.65em 0.92857143em;
-  color: inherit;
+  color: var(--button-text-color);
   font-family: inherit;
   vertical-align: baseline;
   min-height: 1em;
@@ -26,58 +26,58 @@
   height: 1.25em;
   vertical-align: middle;
   display: inline-block;
-  fill: #718096;
+  fill: var(--button-icon-fill);
 }
 
 .button.default:hover,
 .button.default:focus {
-  background-color: #e2e8f0;
+  background-color: var(--button-default-hover-bg);
 }
 
 .button.default:active,
 .button.default.isActive {
-  background-color: #cbd5e0;
+  background-color: var(--button-default-active-bg);
 }
 
 .button.default:hover > svg,
 .button.default:focus > svg {
-  fill: #718096;
+  fill: var(--button-icon-fill);
 }
 
 .button.basic {
-  color: rgba(0, 0, 0, 0.6);
-  box-shadow: 0 0 0 1px rgba(34, 36, 38, 0.15) inset;
+  color: var(--button-basic-color);
+  box-shadow: var(--button-basic-box-shadow);
 }
 
 .button.basic:focus {
-  background: #fff;
-  color: rgba(0, 0, 0, 0.8);
-  box-shadow: 0 0 0 1px rgba(34, 36, 38, 0.35) inset, 0 0 0 0 rgba(34, 36, 38, 0.15) inset;
+  background: var(--button-basic-focus-bg);
+  color: var(--button-basic-focus-color);
+  box-shadow: var(--button-basic-focus-box-shadow);
 }
 
 .button.basic:hover {
-  background: #fff;
-  color: rgba(0, 0, 0, 0.8);
-  box-shadow: 0 0 0 1px rgba(34, 36, 38, 0.15) inset, 0 0 0 0 rgba(34, 36, 38, 0.15) inset;
+  background: var(--button-default-hover-bg);
+  color: var(--button-basic-focus-color);
+  box-shadow: var(--button-basic-box-shadow);
 }
 
 .button.basic:active {
-  background: #f8f8f8;
-  color: rgba(0, 0, 0, 0.9);
-  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15) inset, 0 1px 4px 0 rgba(34, 36, 38, 0.15) inset;
+  background: var(--button-basic-active-bg);
+  color: var(--button-basic-active-color);
+  box-shadow: var(--button-basic-active-box-shadow);
 }
 
 .button.primary {
-  background-color: hsl(216, 15%, 47%);
-  color: #fff;
+  background-color: var(--button-primary-bg);
+  color: var(--button-primary-color);
 }
 
 .button.primary:hover {
-  background-color: hsl(216, 15%, 42%);
+  background-color: var(--button-primary-hover-bg);
 }
 .button.primary:active {
-  background-color: hsl(216, 15%, 39%);
+  background-color: var(--button-primary-active-bg);
 }
 .button.primary:focus {
-  background-color: hsl(216, 15%, 37%);
+  background-color: var(--button-primary-focus-bg);
 }
diff --git a/packages/ui/src/components/Card/Card.module.css b/packages/ui/src/components/Card/Card.module.css
@@ -1,8 +1,7 @@
 .card {
-  background-color: #fff;
-  box-shadow: 0 1px 1px 0 rgba(60, 75, 100, 0.14), 0 2px 1px -1px rgba(60, 75, 100, 0.12),
-  0 1px 3px 0 rgba(60, 75, 100, 0.2);
+  background-color: var(--card-bg);
+  box-shadow: var(--card-shadow);
   border-radius: 0.25rem;
   padding: 1em;
   display: flex;
-}
+}
diff --git a/packages/ui/src/components/Header/Header.module.css b/packages/ui/src/components/Header/Header.module.css
@@ -4,12 +4,12 @@
   top: 0;
   left: 0;
   width: 100%;
-  background: white;
+  background: var(--header-bg);
   transition: box-shadow 0.5s ease-in-out;
   display: flex;
   height: var(--header-height);
   box-sizing: border-box;
-  border-bottom: 1px solid #e6e7e8;
+  border-bottom: 1px solid var(--header-border);
 }
 
 .header > .logo {

diff --git a/packages/ui/src/components/JobCard/Details/Details.module.css b/packages/ui/src/components/JobCard/Details/Details.module.css
@@ -21,11 +21,11 @@
 
 .tabContent::-webkit-scrollbar-track {
   padding: 2px;
-  background: rgba(255, 255, 255, 0.2);
+  background: var(--details-scrollbar-track-bg);
 }
 
 .tabContent::-webkit-scrollbar-thumb {
-  background-color: #cbd5e0;
+  background-color: var(--details-scrollbar-thumb-bg);
   border-radius: 4px;
 }
 
@@ -37,11 +37,11 @@
 }
 
 .tabContent :global(.error) {
-  color: #d73a49;
+  color: var(--details-error-color);
 }
 
 .tabContent :global(.warn) {
-  color: orange;
+  color: var(--details-warn-color);
 }
 
 .tabContent pre {

diff --git a/packages/ui/src/components/JobCard/Details/DetailsContent/JobLogs/JobLogs.module.css b/packages/ui/src/components/JobCard/Details/DetailsContent/JobLogs/JobLogs.module.css
@@ -2,7 +2,7 @@
   margin: 0;
   overflow: hidden;
   position: relative;
-  background: #fff;
+  background: var(--job-logs-bg);
   height: 100%;
 }
 
@@ -23,7 +23,7 @@
 }
 
 .preWrapper ol li::marker {
-  color: #a0aec0;
+  color: var(--job-logs-marker-color);
   content: attr(data-line-number);
 }
 
@@ -33,11 +33,11 @@
 
 .preWrapper::-webkit-scrollbar-track {
   padding: 2px;
-  background: rgba(255, 255, 255, 0.2);
+  background: var(--job-logs-scrollbar-track-bg);
 }
 
 .preWrapper::-webkit-scrollbar-thumb {
-  background-color: #cbd5e0;
+  background-color: var(--job-logs-scrollbar-thumb-bg);
   border-radius: 4px;
 }
 
@@ -46,7 +46,7 @@
   top: 0;
   left: 0;
   right: 1rem;
-  background: rgba(255, 255, 255, 0.85);
+  background: var(--job-logs-toolbar-bg);
   backdrop-filter: blur(4px);
   padding: 0 0 0.5rem 0.5rem;
   margin: 0;

diff --git a/packages/ui/src/components/JobCard/JobCard.module.css b/packages/ui/src/components/JobCard/JobCard.module.css
@@ -1,5 +1,5 @@
 .card {
-  background-color: #fff;
+  background-color: var(--card-bg);
   box-shadow: 0 1px 1px 0 rgba(60, 75, 100, 0.14), 0 2px 1px -1px rgba(60, 75, 100, 0.12),
     0 1px 3px 0 rgba(60, 75, 100, 0.2);
   border-radius: 0.25rem;

diff --git a/packages/ui/src/components/Modal/Modal.module.css b/packages/ui/src/components/Modal/Modal.module.css
@@ -63,7 +63,7 @@
   text-align: center;
   vertical-align: middle;
   padding: 1em;
-  background-color: rgba(0, 0, 0, 0.85);
+  background-color: var(--modal-overlay-bg);
   user-select: none;
   will-change: opacity;
   z-index: 1000;
@@ -85,7 +85,7 @@
 
 .content {
   width: 100%;
-  background-color: white;
+  background-color: var(--modal-content-bg);
   border-radius: 0.5rem;
   padding: 1rem;
   max-height: 100%;
@@ -106,7 +106,7 @@
 }
 
 .actions {
-  background: #f9fafb;
+  background: var(--modal-actions-bg);
   margin: 1rem -1rem -1rem;
   border-radius: 0 0 0.5rem 0.5rem;
   padding: 1rem 1rem;

diff --git a/packages/ui/src/components/QueueCard/QueueStats/QueueStats.module.css b/packages/ui/src/components/QueueCard/QueueStats/QueueStats.module.css
@@ -46,7 +46,7 @@
 }
 
 .waitingChildren {
-  background-color: var(--waitingChildren);
+  background-color: var(--waiting-children);
 }
 
 .prioritized {

diff --git a/packages/ui/src/components/SettingsModal/SettingsModal.tsx b/packages/ui/src/components/SettingsModal/SettingsModal.tsx
@@ -7,6 +7,7 @@ import { SelectField } from '../Form/SelectField/SelectField';
 import { SwitchField } from '../Form/SwitchField/SwitchField';
 import { Modal } from '../Modal/Modal';
 import { availableJobTabs } from '../../hooks/useDetailsTabs';
+import { useTheme } from 'next-themes';
 
 export interface SettingsModalProps {
   open: boolean;
@@ -34,6 +35,7 @@ export const SettingsModal = ({ open, onClose }: SettingsModalProps) => {
   } = useSettingsStore((state) => state);
   const { pollingInterval: uiConfigPollingInterval } = useUIConfig();
   const { t, i18n } = useTranslation();
+  const { theme, setTheme } = useTheme();
 
   return (
     <Modal width="small" open={open} onClose={onClose} title={t('SETTINGS.TITLE')}>
@@ -123,6 +125,12 @@ export const SettingsModal = ({ open, onClose }: SettingsModalProps) => {
         checked={collapseJobError}
         onCheckedChange={(checked) => setSettings({ collapseJobError: checked })}
       />
+      <SwitchField
+        label={t('SETTINGS.DARK_MODE')}
+        id="dark-mode"
+        checked={theme === 'dark'}
+        onCheckedChange={(checked) => setTheme(checked ? 'dark' : 'light')}
+      />
     </Modal>
   );
 };
diff --git a/packages/ui/src/components/StatusLegend/StatusLegend.module.css b/packages/ui/src/components/StatusLegend/StatusLegend.module.css
@@ -25,7 +25,7 @@
 }
 
 .waitingChildren {
-  --item-bg: var(--waitingChildren);
+  --item-bg: var(--waiting-children);
 }
 
 .prioritized {

diff --git a/packages/ui/src/components/StatusMenu/StatusMenu.module.css b/packages/ui/src/components/StatusMenu/StatusMenu.module.css
@@ -1,15 +1,15 @@
 .statusMenu {
   display: flex;
   margin-bottom: 2rem;
-  border-bottom: 2px solid #e0e7eb;
+  border-bottom: 2px solid var(--status-menu-border-color);
 }
 
 .statusMenu > a {
   text-decoration: none;
   border-bottom: 2px solid transparent;
   margin: 0 0 -2px;
   padding: 0.5em 1em;
-  color: rgba(0, 0, 0, 0.87);
+  color: var(--color-status-menu-text);
   transition: border-bottom-color 200ms ease-in-out, color 0.1s ease;
   display: flex;
   align-items: center;
@@ -35,8 +35,8 @@
 }
 
 .statusMenu > a.active {
-  border-color: #1b1c1d;
-  color: rgba(0, 0, 0, 0.95);
+  border-color: var(--status-menu-active-border);
+  color: var(--status-menu-active-text);
   font-weight: 500;
 }
 

diff --git a/packages/ui/src/components/StickyHeader/StickyHeader.module.css b/packages/ui/src/components/StickyHeader/StickyHeader.module.css
@@ -2,7 +2,7 @@
     position: sticky;
     top: var(--header-height);
     z-index: 2;
-    background-color: rgba(245, 248, 250, 0.85);
+    background-color: var(--sticky-header-bg);
     backdrop-filter: blur(4px);
     margin: 0 -1rem;
     padding: 0 1rem;