Fix settings colors for themes that use color transparency

Author: cte

webview-ui/src/components/settings/SectionHeader.tsx

@@ -8,7 +8,9 @@ type SectionHeaderProps = HTMLAttributes<HTMLDivElement> & {
 }
 
 export const SectionHeader = ({ description, children, className, ...props }: SectionHeaderProps) => (
-	<div className={cn("sticky top-0 z-10 bg-vscode-panel-border px-5 py-4", className)} {...props}>
+	<div
+		className={cn("sticky top-0 z-10 bg-vscode-sideBar-background dark:brightness-90 px-5 py-4", className)}
+		{...props}>
 		<h4 className="m-0">{children}</h4>
 		{description && <p className="text-vscode-descriptionForeground text-sm mt-2 mb-0">{description}</p>}
 	</div>

webview-ui/src/components/settings/SettingsView.tsx

@@ -242,7 +242,7 @@ const SettingsView = forwardRef<SettingsViewRef, SettingsViewProps>(({ onDone },
 
 	return (
 		<div className="fixed inset-0 flex flex-col overflow-hidden">
-			<div className="px-5 py-2.5 border-b border-vscode-panel-border">
+			<div className="px-5 py-2.5 border-b border-vscode-sideBar-border">
 				<div className="flex flex-col">
 					<div className="flex justify-between items-center">
 						<div className="flex items-center gap-2">
@@ -287,7 +287,7 @@ const SettingsView = forwardRef<SettingsViewRef, SettingsViewProps>(({ onDone },
 			</div>
 
 			<div
-				className="flex flex-col flex-1 overflow-auto divide-y divide-vscode-panel-border"
+				className="flex flex-col flex-1 overflow-auto divide-y divide-vscode-sideBar-border"
 				onScroll={handleScroll}>
 				<div ref={providersRef}>
 					<SectionHeader>

webview-ui/src/index.css

@@ -100,6 +100,14 @@
 	--color-vscode-toolbar-hoverBackground: var(--vscode-toolbar-hoverBackground);
 
 	--color-vscode-panel-border: var(--vscode-panel-border);
+
+	--color-vscode-sideBar-foreground: var(--vscode-sideBar-foreground);
+	--color-vscode-sideBar-background: var(--vscode-sideBar-background);
+	--color-vscode-sideBar-border: var(--vscode-sideBar-border);
+
+	--color-vscode-sideBarSectionHeader-foreground: var(--vscode-sideBarSectionHeader-foreground);
+	--color-vscode-sideBarSectionHeader-background: var(--vscode-sideBarSectionHeader-background);
+	--color-vscode-sideBarSectionHeader-border: var(--vscode-sideBarSectionHeader-border);
 }
 
 @layer base {