Feature/add more themes scheme#4
Open
KanoCifer wants to merge 5 commits into
Open
Conversation
- Redesign all components to Material Design 3 spec - Add collapsible MissionCard with chevron toggle and smooth animation - Replace purple MD3 palette with Google Blue color system - Update cards, buttons, inputs, modals, and drawer to MD3 surface containers - Increase nav height to 64px and adjust layout spacing - Center search form and quick links in DashboardHeader
Replace 2-theme system with 6 schemes (google-blue, forest-green, paper, sage, mist, blush) × light/dark/auto via data-color-scheme attribute. Migrate hardcoded colors in 8 components to CSS vars. Add config v2 export/import with v1 backward compatibility.
There was a problem hiding this comment.
Pull request overview
Note
Copilot was unable to run its full agentic suite in this review.
This PR introduces a multi-scheme theming system (6 color schemes × light/dark/auto modes) replacing the previous simple light/dark theme toggle. It refactors the theme store, adds Material Design 3 color tokens, and extends the config import/export format to v2 while maintaining backwards compatibility with v1.
Changes:
- Reworked theme store to support
colorScheme+colorMode(withauto/system listener) and added 6 CSS theme files plus MD3 surface tokens. - Introduced
configV2schema for config import/export with backwards-compatible v1 import handling. - Updated UI components extensively to use new MD3 tokens, added collapsible mission cards, accessibility attributes to the popup, and an
isExcludedTabUrlhelper for tab filtering.
Reviewed changes
Copilot reviewed 33 out of 33 changed files in this pull request and generated 7 comments.
Show a summary per file
| File | Description |
|---|---|
| src/stores/theme.ts | Rewrote store for color scheme/mode separation with system-preference listener. |
| src/types/config.ts | Added configV2 interface. |
| src/utils/configs.ts | Export v2 configs; import supports v1 and v2. |
| src/stores/tabs.ts | Added isExcludedTabUrl helper; updated tab event handlers. |
| src/components/settings/SettingsPanel.vue | New color scheme grid + light/dark/auto mode toggle UI. |
| src/components/tabs/MissionCard.vue | Added collapse/expand interaction for tab groups. |
| src/components/dashboard/DashboardHeader.vue | Centered search/quick-links layout; disposition: NEW_TAB for search. |
| src/components/popup/PopupApp.vue | Added ARIA attributes; loads settings; uses theme vars. |
| src/assets/themes/*.css | Added 6 theme CSS files + index aggregator. |
| src/assets/variables.scss | Removed hardcoded theme vars; added MD3 radius scale. |
| Various style files | Migrated to MD3 / theme tokens. |
| src/App.vue | Awaited nextTick(). |
| package.json | Minor dependency bumps. |
Comments suppressed due to low confidence (5)
src/stores/theme.ts:1
- When importing a v1 config via
themeStore.setTheme(v1.theme.themeId), the v1themeIdwas'light' | 'dark'representing the theme mode. This function silently does nothing for any other value. More importantly, since v1 only had light/dark, this works, but the comment says "兼容旧版 localStorage 单 key 'theme'" which is misleading — this function is also called from the v1 config import path. Consider renaming the function or adding handling for unexpected values (e.g., log a warning), and updating the comment to reflect both usages.
src/stores/theme.ts:1 - Indentation is inconsistent here — the comment has a leading space before
//while surrounding function declarations use two-space indentation. Align with the surrounding code style.
src/utils/configs.ts:1 - When importing a v1 config, the user's currently selected
colorSchemeis preserved (only the mode is set viasetTheme). The comment says "默认配色为 google-blue" but the code does not actually reset the color scheme togoogle-blue. Either explicitly callthemeStore.setColorScheme('google-blue')to match the comment, or update the comment to reflect that the current color scheme is retained.
src/utils/configs.ts:1 JSON.parseis followed only by aconfigVersioncheck. The rest of the import code accesses many fields (e.g.,raw.deferred.map,raw.todos.map,raw.quickLinks) without runtime validation of their types/shapes. A malformed config file could cause runtime errors mid-import, potentially leaving the store in a partially-mutated state. Consider validating each section's shape before mutating stores, or wrap individual imports in try/catch so one bad section doesn't corrupt others.
src/stores/theme.ts:1- Using non-null assertion
mediaQuery!inside the handler is unsafe ifstopSystemListener()is called before the handler fires (though unlikely due toremoveEventListenerbeing called first). CapturemediaQueryin a local variable insidestartSystemListenerto avoid the assertion and make ownership clearer.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Comment on lines
+148
to
+164
| if (isExcludedTabUrl(tab.url || '')) { | ||
| tabs.value = tabs.value.filter(t => t.id !== tabId) | ||
| return | ||
| } | ||
| const index = tabs.value.findIndex(t => t.id === tabId) | ||
| if (index === -1) return | ||
|
|
||
| if (index === -1) { | ||
| tabs.value.push({ | ||
| id: tabId, | ||
| url: tab.url || '', | ||
| title: tab.title || 'Untitled', | ||
| windowId: tab.windowId, | ||
| active: tab.active || false, | ||
| favIconUrl: tab.favIconUrl || '', | ||
| isTabOut: false, | ||
| }) | ||
| return | ||
| } |
Comment on lines
+24
to
+29
| function applyHeight() { | ||
| nextTick(() => { | ||
| if (!contentEl.value) return; | ||
| contentHeight.value = collapsed.value ? '0px' : `${contentEl.value.scrollHeight}px`; | ||
| }); | ||
| } |
| themeStore.setColorScheme(scheme); | ||
| } | ||
|
|
||
| import type { ColorMode } from '@/stores/theme'; |
| import { MoonIcon, SunIcon } from '@/components/icons'; | ||
| import { useSettingsStore } from '@/stores/settings'; | ||
| import { type ThemeId, useThemeStore } from '@/stores/theme'; | ||
| import { useThemeStore, type ColorScheme, COLOR_SCHEMES } from '@/stores/theme'; |
Comment on lines
+31
to
+32
| // 动态计算 active-bg（基于当前强调色） | ||
| --theme-c-active-bg: color-mix(in srgb, var(--theme-c-accent) 8%, transparent); |
Comment on lines
+59
to
+62
| const newTabUrl = chrome.runtime.getURL('index.html') | ||
|
|
||
| function isExcludedTabUrl(url: string): boolean { | ||
| return url === 'chrome://newtab/' || url === '' || url === newTabUrl |
Comment on lines
41
to
+42
| if (typeof chrome !== 'undefined' && chrome.search) { | ||
| chrome.search.query({ text: props.searchQuery }); | ||
| chrome.search.query({ text: props.searchQuery, disposition: 'NEW_TAB' }); |
…tem listener Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Change
Preview