feat(ui): implement dark theme and refactor color usage

backend/server/api/auth/auth_test.go

@@ -39,7 +39,7 @@ func TestSafeReturnURL(t *testing.T) {
 		{"missing leading slash", "projects", "/"},
 		{"javascript scheme", "javascript:alert(1)", "/"},
 		{"data scheme", "data:text/html,x", "/"},
-		{"unparseable", "://", "/"},
+		{"unparsable", "://", "/"},
 	}
 	for _, tc := range cases {
 		t.Run(tc.name, func(t *testing.T) {

config-ui/src/app/store.ts

@@ -18,11 +18,12 @@
 
 import { configureStore, ThunkAction, Action } from '@reduxjs/toolkit';
 
-import { connectionsSlice } from '@/features';
+import { connectionsSlice, themeSlice } from '@/features';
 
 export const store = configureStore({
   reducer: {
     connections: connectionsSlice.reducer,
+    theme: themeSlice.reducer,
   },
 });
 

config-ui/src/components/block/styled.ts

@@ -24,7 +24,7 @@ export const Label = styled.label`
 `;
 
 export const LabelInfo = styled.i`
-  color: #ff8b8b;
+  color: ${({ theme }) => theme.colors.secondary};
 `;
 
 export const subLabel = styled.p`

config-ui/src/components/inspector/styled.ts

@@ -20,7 +20,7 @@ import styled from 'styled-components';
 
 export const Wrapper = styled.div`
   padding: 16px 24px;
-  background-color: #f3f3f3;
+  background-color: ${({ theme }) => theme.colors.bgElevated};
 
   .title {
     display: flex;
@@ -34,7 +34,7 @@ export const Wrapper = styled.div`
 
     span {
       font-size: 10px;
-      color: #aaaaaa;
+      color: ${({ theme }) => theme.colors.textFaint};
     }
   }
 
@@ -46,7 +46,7 @@ export const Wrapper = styled.div`
   .content {
     padding: 10px;
     max-height: 600;
-    background-color: #ffff;
+    background-color: ${({ theme }) => theme.colors.bgContainer};
     border-radius: 4px;
     box-shadow: 1px 1px 3px 0px rgb(0 0 0 / 20%) inset;
     overflow-y: auto;

config-ui/src/components/loading/styled.ts

@@ -37,7 +37,7 @@ export const Wrapper = styled.div`
 export const Spin = styled.div<{ size: number }>`
   width: ${({ size }) => size}px;
   height: ${({ size }) => size}px;
-  border: 2px solid #7497f7;
+  border: 2px solid ${({ theme }) => theme.colors.primary};
   border-radius: 50%;
   border-right-color: transparent;
   box-sizing: border-box;

config-ui/src/components/message/index.tsx

@@ -35,7 +35,7 @@ export const Message = ({ style, size = 20, content }: Props) => {
   return (
     <Wrapper style={style}>
       <Space>
-        <WarningOutlined style={{ fontSize: size, color: '#f4be55' }} />
+        <WarningOutlined style={{ fontSize: size, color: 'var(--devlake-color-warning-soft)' }} />
         <span>{content}</span>
       </Space>
     </Wrapper>

config-ui/src/components/page-header/styled.ts

@@ -47,7 +47,7 @@ export const Breadcrumb = styled.li`
   a {
     display: flex;
     align-items: center;
-    color: #292b3f;
+    color: ${({ theme }) => theme.colors.text};
   }
 `;
 export const Extra = styled.div``;

config-ui/src/components/tip-layout/styled.ts

@@ -24,7 +24,7 @@ export const Wrapper = styled.div`
   align-items: center;
   padding-top: 100px;
   height: 100vh;
-  background-color: #f9f9fa;
+  background-color: ${({ theme }) => theme.colors.bgLayout};
   box-sizing: border-box;
 `;
 
@@ -42,7 +42,7 @@ export const Inner = styled.div`
     margin: 16px 0;
 
     &.warning {
-      color: #faad14;
+      color: ${({ theme }) => theme.colors.warningAlt};
     }
   }
 `;

config-ui/src/features/index.ts

@@ -17,3 +17,4 @@
  */
 
 export * from './connections';
+export * from './theme';

config-ui/src/features/theme/index.ts

@@ -0,0 +1,19 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ */
+
+export * from './slice';

config-ui/src/features/theme/slice.ts

@@ -0,0 +1,87 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ */
+
+import { createSlice, PayloadAction } from '@reduxjs/toolkit';
+
+import { RootState } from '@/app/store';
+import type { ThemeMode, ResolvedTheme } from '@/theme/tokens';
+
+export const THEME_STORAGE_KEY = 'devlake.theme';
+
+const NEXT_MODE: Record<ThemeMode, ThemeMode> = {
+  light: 'dark',
+  dark: 'system',
+  system: 'light',
+};
+
+const isThemeMode = (value: unknown): value is ThemeMode => value === 'light' || value === 'dark' || value === 'system';
+
+const loadInitialMode = (): ThemeMode => {
+  if (typeof window === 'undefined') return 'system';
+  try {
+    const stored = window.localStorage.getItem(THEME_STORAGE_KEY);
+    if (isThemeMode(stored)) return stored;
+  } catch {
+    // localStorage may be unavailable (e.g., SSR / privacy mode)
+  }
+  return 'system';
+};
+
+const persistMode = (mode: ThemeMode): void => {
+  if (typeof window === 'undefined') return;
+  try {
+    window.localStorage.setItem(THEME_STORAGE_KEY, mode);
+  } catch {
+    // localStorage may be unavailable (e.g., SSR / privacy mode)
+  }
+};
+
+interface ThemeState {
+  mode: ThemeMode;
+}
+
+const initialState: ThemeState = {
+  mode: loadInitialMode(),
+};
+
+export const themeSlice = createSlice({
+  name: 'theme',
+  initialState,
+  reducers: {
+    setMode(state, action: PayloadAction<ThemeMode>) {
+      state.mode = action.payload;
+      persistMode(action.payload);
+    },
+    cycleMode(state) {
+      state.mode = NEXT_MODE[state.mode];
+      persistMode(state.mode);
+    },
+  },
+});
+
+export const { setMode, cycleMode } = themeSlice.actions;
+
+export default themeSlice.reducer;
+
+export const selectThemeMode = (state: RootState): ThemeMode => state.theme.mode;
+
+export const resolveThemeMode = (mode: ThemeMode): ResolvedTheme => {
+  if (mode !== 'system') return mode;
+  if (typeof window === 'undefined' || typeof window.matchMedia !== 'function') return 'light';
+  return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+};

config-ui/src/index.css

@@ -16,8 +16,16 @@
  *
  */
 
+/* Initial-paint fallbacks; ThemeProvider overrides these from theme tokens. */
+:root {
+  --devlake-color-text: #292b3f;
+  --devlake-color-text-muted: #94959f;
+  --devlake-color-bg: #ffffff;
+}
+
 body {
-  color: #292b3f;
+  color: var(--devlake-color-text);
+  background-color: var(--devlake-color-bg);
   margin: 0;
 }
 
@@ -64,7 +72,7 @@ ul {
 p {
   margin: 8px 0;
   font-size: 12px;
-  color: #94959f;
+  color: var(--devlake-color-text-muted);
 }
 
 #root {

config-ui/src/main.tsx

@@ -19,25 +19,19 @@
 import ReactDOM from 'react-dom';
 import { Provider } from 'react-redux';
 import { RouterProvider } from 'react-router-dom';
-import { ConfigProvider } from 'antd';
 
 import { PageLoading } from '@/components';
+import { ThemeProvider } from '@/theme';
 
 import { store } from './app/store';
 import { router } from './app/router';
 import './index.css';
 
 ReactDOM.render(
-  <ConfigProvider
-    theme={{
-      token: {
-        colorPrimary: import.meta.env.DEVLAKE_COLOR_CUSTOM ?? '#7497F7',
-      },
-    }}
-  >
-    <Provider store={store}>
+  <Provider store={store}>
+    <ThemeProvider>
       <RouterProvider router={router} fallbackElement={<PageLoading />} />
-    </Provider>
-  </ConfigProvider>,
+    </ThemeProvider>
+  </Provider>,
   document.getElementById('root'),
 );

config-ui/src/plugins/components/connection-form/fields/styled.ts

@@ -24,7 +24,7 @@ export const Label = styled.label`
 `;
 
 export const LabelInfo = styled.i`
-  color: #ff8b8b;
+  color: ${({ theme }) => theme.colors.secondary};
 `;
 
 export const LabelDescription = styled.p`

config-ui/src/plugins/components/data-scope-remote/search-local.tsx

@@ -219,7 +219,7 @@ export const SearchLocal = ({ mode, plugin, connectionId, config, disabledScope,
 
         {status === 'loaded' && (
           <S.JobLoad>
-            <CheckCircleFilled style={{ color: '#4DB764' }} />
+            <CheckCircleFilled style={{ color: 'var(--devlake-color-success)' }} />
             <span className="count">{miller.items.length}</span> scopes found
           </S.JobLoad>
         )}

config-ui/src/plugins/components/data-scope-remote/styled.ts

@@ -31,6 +31,6 @@ export const JobLoad = styled.div`
 
   & > span.count {
     margin: 0 8px;
-    color: #7497f7;
+    color: ${({ theme }) => theme.colors.primary};
   }
 `;

config-ui/src/plugins/register/argocd/transformation.tsx

@@ -19,8 +19,8 @@
 import { CaretRightOutlined } from '@ant-design/icons';
 import { theme, Collapse, Tag, Input } from 'antd';
 
 import { ExternalLink, HelpTooltip } from '@/components';
 import { DOC_URL } from '@/release';
 
 interface Props {
   entities: string[];
@@ -99,7 +99,7 @@
                 })
               }
             />
-            <i style={{ color: '#E34040' }}>*</i>
+            <i style={{ color: 'var(--devlake-color-error-alt)' }}>*</i>
             <HelpTooltip content="Use regex to match application names. Default pattern matches any name containing 'prod' (case-insensitive)." />
           </div>
           <div style={{ marginTop: 16, marginBottom: 8 }}>

config-ui/src/plugins/register/azure/connection-fields/styled.ts

@@ -24,7 +24,7 @@ export const Label = styled.label`
 `;
 
 export const LabelInfo = styled.i`
-  color: #ff8b8b;
+  color: ${({ theme }) => theme.colors.secondary};
 `;
 
 export const LabelDescription = styled.p`

config-ui/src/plugins/register/azure/transformation.tsx

@@ -100,7 +100,7 @@ const renderCollapseItems = ({
                 })
               }
             />
-            <i style={{ color: '#E34040' }}>*</i>
+            <i style={{ color: 'var(--devlake-color-error-alt)' }}>*</i>
             <HelpTooltip content="Azure Pipelines: https://learn.microsoft.com/en-us/azure/devops/pipelines/get-started/what-is-azure-pipelines?view=azure-devops#continuous-testing" />
           </div>
           <div style={{ margin: '8px 0', paddingLeft: 28 }}>

config-ui/src/plugins/register/circleci/transformation.tsx

@@ -100,7 +100,7 @@ const renderCollapseItems = ({
                 })
               }
             />
-            <i style={{ color: '#E34040' }}>*</i>
+            <i style={{ color: 'var(--devlake-color-error-alt)' }}>*</i>
             <HelpTooltip content="CircleCI Workflows: https://circleci.com/docs/workflows/" />
           </div>
           <div style={{ margin: '8px 0', paddingLeft: 28 }}>

config-ui/src/plugins/register/gh-copilot/connection-fields/styled.ts

@@ -20,6 +20,6 @@ import styled from 'styled-components';
 
 export const ErrorText = styled.div`
   margin-top: 4px;
-  color: #f5222d;
+  color: ${({ theme }) => theme.colors.error};
   font-size: 12px;
 `;

config-ui/src/plugins/register/github/connection-fields/styled.ts

@@ -24,7 +24,7 @@ export const Label = styled.label`
 `;
 
 export const LabelInfo = styled.i`
-  color: #ff8b8b;
+  color: ${({ theme }) => theme.colors.secondary};
 `;
 
 export const LabelDescription = styled.p`
@@ -48,11 +48,11 @@ export const Input = styled.div`
       margin-left: 4px;
 
       span.error {
-        color: #f5222d;
+        color: ${({ theme }) => theme.colors.error};
       }
 
       span.success {
-        color: #4db764;
+        color: ${({ theme }) => theme.colors.success};
       }
     }
   }
@@ -65,7 +65,7 @@ export const Input = styled.div`
 export const Alert = styled.div`
   margin-top: 8px;
   padding: 12px 20px;
-  background: #f9f9fa;
-  border: 1px solid #dbdcdf;
+  background: ${({ theme }) => theme.colors.bgLayout};
+  border: 1px solid ${({ theme }) => theme.colors.border};
   border-radius: 4px;
 `;

config-ui/src/plugins/register/github/connection-fields/token.tsx

@@ -171,9 +171,9 @@ export const Token = ({
             {status && (
               <S.Alert>
                 <h4>
-                  {status === 'success' && <CheckCircleFilled style={{ color: '#4DB764' }} />}
-                  {status === 'warning' && <WarningFilled style={{ color: '#F4BE55' }} />}
-                  {status === 'error' && <CloseCircleFilled style={{ color: '#E34040' }} />}
+                  {status === 'success' && <CheckCircleFilled style={{ color: 'var(--devlake-color-success)' }} />}
+                  {status === 'warning' && <WarningFilled style={{ color: 'var(--devlake-color-warning-soft)' }} />}
+                  {status === 'error' && <CloseCircleFilled style={{ color: 'var(--devlake-color-error-alt)' }} />}
                   <span style={{ marginLeft: 8 }}>Token Permissions</span>
                 </h4>
                 {status === 'success' && <p>All required fields are checked.</p>}