Skip to content

feat(theme): add preset theme editor and expand theme token coverage #2046

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
Alexlangl wants to merge 9 commits into from
Closed

feat(theme): add preset theme editor and expand theme token coverage #2046

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
ff51869
feat(theme): add preset-based theme editor
Alexlangl Mar 25, 2026
8f8a258
feat(theme): expand preset theming coverage
Alexlangl Apr 1, 2026
7639360
fix(theme): align remaining preset theming details
Alexlangl Apr 1, 2026
d9924b3
fix(theme): localize preset names
Alexlangl Apr 1, 2026
4018903
fix(theme): address theme editor review issues
Alexlangl Apr 2, 2026
56ebccc
fix(theme): polish semantic preview and dark palette restore
Alexlangl Apr 2, 2026
a82cdf1
style: format theme changes
Alexlangl Apr 3, 2026
90fb7e4
fix(theme): preserve usage script modal layout after rebase
Alexlangl Apr 7, 2026
bffa6ed
fix(theme): clamp hue slider right edge
Alexlangl Apr 14, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
46 changes: 23 additions & 23 deletions src/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -225,7 +225,7 @@ function App() {
const skillsPageRef = useRef<any>(null);
const unifiedSkillsPanelRef = useRef<any>(null);
const addActionButtonClass =
"bg-orange-500 hover:bg-orange-600 dark:bg-orange-500 dark:hover:bg-orange-600 text-white shadow-lg shadow-orange-500/30 dark:shadow-orange-500/40 rounded-full w-8 h-8";
"bg-primary text-primary-foreground hover:bg-primary/90 shadow-lg shadow-primary/25 rounded-full w-8 h-8";

const {
isRunning: isProxyRunning,
Expand Down Expand Up @@ -1115,8 +1115,8 @@ function App() {
className={cn(
"text-xl font-semibold transition-colors",
isProxyRunning && isCurrentAppTakeoverActive
? "text-emerald-500 hover:text-emerald-600 dark:text-emerald-400 dark:hover:text-emerald-300"
: "text-blue-500 hover:text-blue-600 dark:text-blue-400 dark:hover:text-blue-300",
? "text-primary hover:text-primary/80"
: "text-foreground/80 hover:text-foreground",
)}
>
CC Switch
Expand All @@ -1130,7 +1130,7 @@ function App() {
setCurrentView("settings");
}}
title={t("common.settings")}
className="hover:bg-black/5 dark:hover:bg-white/5"
className="hover:bg-accent/60"
>
<Settings className="w-4 h-4" />
</Button>
Expand All @@ -1151,7 +1151,7 @@ function App() {
title={t("usage.title", {
defaultValue: "使用统计",
})}
className="hover:bg-black/5 dark:hover:bg-white/5"
className="hover:bg-accent/60"
>
<BarChart2 className="w-4 h-4" />
</Button>
Expand Down Expand Up @@ -1189,7 +1189,7 @@ function App() {
variant="ghost"
size="sm"
onClick={() => promptPanelRef.current?.openAdd()}
className="hover:bg-black/5 dark:hover:bg-white/5"
className="hover:bg-accent/60"
>
<Plus className="w-4 h-4 mr-2" />
{t("prompts.add")}
Expand All @@ -1201,7 +1201,7 @@ function App() {
variant="ghost"
size="sm"
onClick={() => mcpPanelRef.current?.openImport()}
className="hover:bg-black/5 dark:hover:bg-white/5"
className="hover:bg-accent/60"
>
<Download className="w-4 h-4 mr-2" />
{t("mcp.importExisting")}
Expand All @@ -1210,7 +1210,7 @@ function App() {
variant="ghost"
size="sm"
onClick={() => mcpPanelRef.current?.openAdd()}
className="hover:bg-black/5 dark:hover:bg-white/5"
className="hover:bg-accent/60"
>
<Plus className="w-4 h-4 mr-2" />
{t("mcp.addMcp")}
Expand All @@ -1225,7 +1225,7 @@ function App() {
onClick={() =>
unifiedSkillsPanelRef.current?.openRestoreFromBackup()
}
className="hover:bg-black/5 dark:hover:bg-white/5"
className="hover:bg-accent/60"
>
<History className="w-4 h-4 mr-2" />
{t("skills.restoreFromBackup.button")}
Expand All @@ -1236,7 +1236,7 @@ function App() {
onClick={() =>
unifiedSkillsPanelRef.current?.openInstallFromZip()
}
className="hover:bg-black/5 dark:hover:bg-white/5"
className="hover:bg-accent/60"
>
<FolderArchive className="w-4 h-4 mr-2" />
{t("skills.installFromZip.button")}
Expand All @@ -1247,7 +1247,7 @@ function App() {
onClick={() =>
unifiedSkillsPanelRef.current?.openImport()
}
className="hover:bg-black/5 dark:hover:bg-white/5"
className="hover:bg-accent/60"
>
<Download className="w-4 h-4 mr-2" />
{t("skills.import")}
Expand All @@ -1256,7 +1256,7 @@ function App() {
variant="ghost"
size="sm"
onClick={() => setCurrentView("skillsDiscovery")}
className="hover:bg-black/5 dark:hover:bg-white/5"
className="hover:bg-accent/60"
>
<Search className="w-4 h-4 mr-2" />
{t("skills.discover")}
Expand All @@ -1269,7 +1269,7 @@ function App() {
variant="ghost"
size="sm"
onClick={() => skillsPageRef.current?.refresh()}
className="hover:bg-black/5 dark:hover:bg-white/5"
className="hover:bg-accent/60"
>
<RefreshCw className="w-4 h-4 mr-2" />
{t("skills.refresh")}
Expand All @@ -1278,7 +1278,7 @@ function App() {
variant="ghost"
size="sm"
onClick={() => skillsPageRef.current?.openRepoManager()}
className="hover:bg-black/5 dark:hover:bg-white/5"
className="hover:bg-accent/60"
>
<Settings className="w-4 h-4 mr-2" />
{t("skills.repoManager")}
Expand Down Expand Up @@ -1312,7 +1312,7 @@ function App() {
variant="ghost"
size="sm"
onClick={() => setCurrentView("workspace")}
className="text-muted-foreground hover:text-foreground hover:bg-black/5 dark:hover:bg-white/5"
className="text-muted-foreground hover:text-foreground hover:bg-accent/60"
title={t("workspace.manage")}
>
<FolderOpen className="w-4 h-4" />
Expand All @@ -1321,7 +1321,7 @@ function App() {
variant="ghost"
size="sm"
onClick={() => setCurrentView("openclawEnv")}
className="text-muted-foreground hover:text-foreground hover:bg-black/5 dark:hover:bg-white/5"
className="text-muted-foreground hover:text-foreground hover:bg-accent/60"
title={t("openclaw.env.title")}
>
<KeyRound className="w-4 h-4" />
Expand All @@ -1330,7 +1330,7 @@ function App() {
variant="ghost"
size="sm"
onClick={() => setCurrentView("openclawTools")}
className="text-muted-foreground hover:text-foreground hover:bg-black/5 dark:hover:bg-white/5"
className="text-muted-foreground hover:text-foreground hover:bg-accent/60"
title={t("openclaw.tools.title")}
>
<Shield className="w-4 h-4" />
Expand All @@ -1339,7 +1339,7 @@ function App() {
variant="ghost"
size="sm"
onClick={() => setCurrentView("openclawAgents")}
className="text-muted-foreground hover:text-foreground hover:bg-black/5 dark:hover:bg-white/5"
className="text-muted-foreground hover:text-foreground hover:bg-accent/60"
title={t("openclaw.agents.title")}
>
<Cpu className="w-4 h-4" />
Expand All @@ -1348,7 +1348,7 @@ function App() {
variant="ghost"
size="sm"
onClick={() => setCurrentView("sessions")}
className="text-muted-foreground hover:text-foreground hover:bg-black/5 dark:hover:bg-white/5"
className="text-muted-foreground hover:text-foreground hover:bg-accent/60"
title={t("sessionManager.title")}
>
<History className="w-4 h-4" />
Expand All @@ -1361,7 +1361,7 @@ function App() {
size="sm"
onClick={() => setCurrentView("skills")}
className={cn(
"text-muted-foreground hover:text-foreground hover:bg-black/5 dark:hover:bg-white/5",
"text-muted-foreground hover:text-foreground hover:bg-accent/60",
"transition-all duration-200 ease-in-out overflow-hidden",
hasSkillsSupport
? "opacity-100 w-8 scale-100 px-2"
Expand All @@ -1375,7 +1375,7 @@ function App() {
variant="ghost"
size="sm"
onClick={() => setCurrentView("prompts")}
className="text-muted-foreground hover:text-foreground hover:bg-black/5 dark:hover:bg-white/5"
className="text-muted-foreground hover:text-foreground hover:bg-accent/60"
title={t("prompts.manage")}
>
<Book className="w-4 h-4" />
Expand All @@ -1385,7 +1385,7 @@ function App() {
size="sm"
onClick={() => setCurrentView("sessions")}
className={cn(
"text-muted-foreground hover:text-foreground hover:bg-black/5 dark:hover:bg-white/5",
"text-muted-foreground hover:text-foreground hover:bg-accent/60",
"transition-all duration-200 ease-in-out overflow-hidden",
hasSessionSupport
? "opacity-100 w-8 scale-100 px-2"
Expand All @@ -1399,7 +1399,7 @@ function App() {
variant="ghost"
size="sm"
onClick={() => setCurrentView("mcp")}
className="text-muted-foreground hover:text-foreground hover:bg-black/5 dark:hover:bg-white/5"
className="text-muted-foreground hover:text-foreground hover:bg-accent/60"
title={t("mcp.title")}
>
<McpIcon size={16} />
Expand Down
2 changes: 1 addition & 1 deletion src/components/ConfirmDialog.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@ export function ConfirmDialog({

const IconComponent = variant === "info" ? Info : AlertTriangle;
const iconClass =
variant === "info" ? "h-5 w-5 text-blue-500" : "h-5 w-5 text-destructive";
variant === "info" ? "h-5 w-5 text-primary" : "h-5 w-5 text-destructive";

return (
<Dialog
Expand Down
12 changes: 6 additions & 6 deletions src/components/DeepLinkImportDialog.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -329,7 +329,7 @@ export function DeepLinkImportDialog() {
</DialogHeader>

{/* 主体内容整体右移，略大于标题内边距，让内容看起来不贴边 */}
<div className="space-y-4 px-8 py-4 max-h-[60vh] overflow-y-auto [scrollbar-width:thin] [&::-webkit-scrollbar]:w-1.5 [&::-webkit-scrollbar]:block [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-gray-200 dark:[&::-webkit-scrollbar-thumb]:bg-gray-700">
<div className="max-h-[60vh] space-y-4 overflow-y-auto px-8 py-4 [scrollbar-width:thin] [&::-webkit-scrollbar]:block [&::-webkit-scrollbar]:w-1.5 [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-border/70">
{request.resource === "prompt" && (
<PromptConfirmation request={request} />
)}
Expand Down Expand Up @@ -380,7 +380,7 @@ export function DeepLinkImportDialog() {
<div className="font-medium text-sm text-muted-foreground">
{t("deeplink.homepage")}
</div>
<div className="col-span-2 text-sm break-all text-blue-600 dark:text-blue-400">
<div className="col-span-2 text-sm break-all text-primary">
{request.homepage}
</div>
</div>
Expand Down Expand Up @@ -501,7 +501,7 @@ export function DeepLinkImportDialog() {
{t("deeplink.configSource")}
</div>
<div className="col-span-2 text-sm">
<span className="inline-flex items-center px-2 py-0.5 rounded-md bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300 text-xs font-medium">
<span className="inline-flex items-center px-2 py-0.5 rounded-md bg-primary/10 text-primary text-xs font-medium">
{configSource === "base64"
? t("deeplink.configEmbedded")
: t("deeplink.configRemote")}
Expand Down Expand Up @@ -635,8 +635,8 @@ export function DeepLinkImportDialog() {
<span
className={`inline-flex items-center px-2 py-0.5 rounded-md text-xs font-medium ${
request.usageEnabled !== false
? "bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-300"
: "bg-gray-100 dark:bg-gray-800 text-gray-600 dark:text-gray-400"
? "border border-primary/20 bg-primary/10 text-primary"
: "border border-border/70 bg-muted/60 text-muted-foreground"
}`}
>
{request.usageEnabled !== false
Expand Down Expand Up @@ -703,7 +703,7 @@ export function DeepLinkImportDialog() {
)}

{/* Warning */}
<div className="rounded-lg bg-yellow-50 dark:bg-yellow-900/20 p-3 text-sm text-yellow-800 dark:text-yellow-200">
<div className="rounded-lg border border-accent/40 bg-accent/20 p-3 text-sm text-accent-foreground">
{t("deeplink.warning")}
</div>
</>
Expand Down
Loading
Loading