Feat/console dark

[zhaozhuang521]

Description

Added night mode to the console

Type of Change

• Bug fix
• New feature
• Breaking change
• Documentation
• Refactoring

Component(s) Affected

• Core / Backend (app, agents, config, providers, utils, local_models)
• Console (frontend web UI)
• Channels (DingTalk, Feishu, QQ, Discord, iMessage, etc.)
• Skills
• CLI
• Documentation (website)
• Tests
• CI/CD
• Scripts / Deploy

Checklist

• I ran pre-commit run --all-files locally and it passes
• If pre-commit auto-fixed files, I committed those changes and reran checks
• I ran tests locally (pytest or as relevant) and they pass
• Documentation updated (if needed)
• Ready for review

Testing

[How to test these changes]

Local Verification Evidence

pre-commit run --all-files
# paste summary result

pytest
# paste summary result

Additional Notes

Closes #1116,Closes #669

[gemini-code-assist]

Summary of Changes

Hello, I'm Gemini Code Assist¹! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

This pull request delivers a highly anticipated dark mode feature to the console. It establishes a robust theme management system using React Context, provides a user-friendly toggle, and meticulously applies dark mode styling to a wide array of UI elements and pages, significantly enhancing the user experience and visual appeal.

Highlights

• Dark Mode Implementation: Introduced a comprehensive dark mode feature across the console, allowing users to switch between light and dark themes.
• Theme Context API: Developed a new React Context (ThemeContext) to manage and propagate theme preferences (light, dark, system) throughout the application.
• Dynamic UI Theming: Integrated a theme toggle button into the header and updated various components (e.g., sidebar logo, Ant Design elements) to dynamically adjust their appearance based on the selected theme.
• Extensive Style Overrides: Applied numerous Less/CSS modifications and global Ant Design token overrides to ensure consistent dark mode styling across all major console pages and components.

🧠 New Feature in Public Preview: You can now enable Memory to help Gemini Code Assist learn from your team's feedback. This makes future code reviews more consistent and personalized to your project's style. Click here to enable Memory in your admin console.

Changelog

• console/src/App.tsx
  • Imported Ant Design theme and ThemeContext components
  • Wrapped the main application with ThemeProvider
  • Configured Ant Design's ConfigProvider to dynamically apply dark or default algorithms based on the theme context
  • Refactored App component into AppInner to facilitate ThemeProvider wrapping
• console/src/components/ThemeToggleButton/index.module.less
  • Added Less module for styling the theme toggle button
  • Included dark mode specific styles for the toggle button
• console/src/components/ThemeToggleButton/index.tsx
  • Created a new React component to toggle between light and dark themes
  • Utilized Ant Design's Tooltip and Button components with SunOutlined and MoonOutlined icons
• console/src/contexts/ThemeContext.tsx
  • Created a new React Context for managing theme mode (light, dark, system) and resolved theme state
  • Implemented ThemeProvider to provide theme state and toggle functions to child components
  • Added logic to persist theme preference in local storage and listen for system theme changes
  • Applied 'dark-mode' class to the HTML element for global CSS overrides
• console/src/layouts/Header.tsx
  • Imported the new ThemeToggleButton component
  • Integrated ThemeToggleButton into the header layout
• console/src/layouts/Sidebar.tsx
  • Imported the useTheme hook from ThemeContext
  • Updated the sidebar's className to conditionally apply a dark mode style
  • Modified the logo image source to display a dark mode specific logo when the theme is dark
  • Set the Ant Design Menu component's theme prop dynamically based on the current theme
• console/src/layouts/index.module.less
  • Added specific dark mode styles for the sidebar (.siderDark) to override menu backgrounds, text colors, and hover/selected states
  • Introduced global dark mode overrides for header elements, including background, borders, text, and button styles
• console/src/pages/Agent/Config/index.module.less
  • Added dark mode specific styles for various elements on the Agent Configuration page, including titles, descriptions, form labels, and card hover effects
• console/src/pages/Agent/Skills/index.module.less
  • Added dark mode specific styles for elements on the Agent Skills page, such as descriptions, loading text, import modal hints, input fields, skill cards, status indicators, info blocks, and markdown viewer
• console/src/pages/Agent/Workspace/index.module.less
  • Added dark mode specific styles for elements on the Agent Workspace page, including descriptions, paths, info text, dividers, file list items, daily memory items, editor headers, and text areas
• console/src/pages/Chat/ModelSelector/index.module.less
  • Added dark mode specific styles for the Model Selector component, including trigger buttons, panels, provider items, and model list items
• console/src/pages/Chat/index.tsx
  • Imported the useTheme hook from ThemeContext
  • Passed the darkMode prop to the AgentScopeRuntimeWebUIOptions configuration based on the current theme
  • Dynamically changed the welcome avatar image based on the current theme
• console/src/pages/Control/Channels/index.module.less
  • Added dark mode specific styles for elements on the Channels control page, including titles, descriptions, filter tabs, channel cards, and status indicators
• console/src/pages/Control/CronJobs/index.module.less
  • Added dark mode specific styles for titles and descriptions on the Cron Jobs control page
• console/src/pages/Control/Heartbeat/index.module.less
  • Added dark mode specific styles for titles and descriptions on the Heartbeat control page
• console/src/pages/Control/Sessions/index.module.less
  • Added dark mode specific styles for elements on the Sessions control page, including selected table rows, titles, descriptions, and filter input/select components
• console/src/pages/Settings/Environments/index.module.less
  • Added dark mode specific styles for elements on the Environments settings page, including section descriptions, state text, table cards, toolbars, environment rows, input groups, and add bar components
• console/src/pages/Settings/Models/index.module.less
  • Added dark mode specific styles for elements on the Models settings page, including loading text, section descriptions, provider cards, slot sections, JSON editor, and model lists
• console/src/pages/Settings/TokenUsage/index.module.less
  • Added dark mode specific styles for elements on the Token Usage settings page, including section descriptions, loading text, empty states, summary cards, and data tables
• console/src/styles/layout.css
  • Introduced extensive global dark mode CSS overrides for various Ant Design components (Layout, Card, Table, Pagination, Checkbox, Input, Select, Form, InputNumber, TimePicker, DatePicker, Modal, Drawer, Slider, Tooltip)
  • Set color-scheme: dark for html.dark-mode
  • Adjusted background and text colors for body and root elements in dark mode

Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature	Command	Description
Code Review	/gemini review	Performs a code review for the current pull request in its current state.
Pull Request Summary	/gemini summary	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help	/gemini help	Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for GitHub and other Google products, sign up here.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Footnotes

1. Review the Generative AI Prohibited Use Policy, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

[gemini-code-assist]

Code Review

This pull request introduces a dark mode feature to the console. The implementation is comprehensive, adding a ThemeContext to manage the theme state, a toggle button, and extensive CSS overrides for dark mode. The core logic for theme switching is well-structured.

My review focuses on improving maintainability and code quality. I've pointed out the use of as any which bypasses type safety, a minor inefficiency in state initialization, and the extensive use of !important in CSS which can make future styling changes difficult. Addressing these points will make the new theme feature more robust and easier to maintain.