Fix dark-mode styling for skills filter chips

- Add readable dark-surface and active-state colors to filter chips
- Cover the toolbar styling with a jsdom test

src/__tests__/skills-toolbar.test.tsx

@@ -0,0 +1,50 @@
+/* @vitest-environment jsdom */
+import { render, screen } from '@testing-library/react';
+import { createRef, type ComponentProps } from 'react';
+import { describe, expect, it, vi } from 'vitest';
+import { SkillsToolbar } from '../routes/skills/-SkillsToolbar';
+
+function renderToolbar(overrides?: Partial<ComponentProps<typeof SkillsToolbar>>) {
+  return render(
+    <SkillsToolbar
+      searchInputRef={createRef<HTMLInputElement>()}
+      query=""
+      hasQuery={false}
+      sort="downloads"
+      dir="desc"
+      view="list"
+      highlightedOnly={false}
+      nonSuspiciousOnly={false}
+      capabilityTag={undefined}
+      onQueryChange={vi.fn()}
+      onToggleHighlighted={vi.fn()}
+      onToggleNonSuspicious={vi.fn()}
+      onCapabilityTagChange={vi.fn()}
+      onSortChange={vi.fn()}
+      onToggleDir={vi.fn()}
+      onToggleView={vi.fn()}
+      {...overrides}
+    />,
+  );
+}
+
+describe('SkillsToolbar', () => {
+  it('keeps filter chips on a dark-mode surface', () => {
+    renderToolbar();
+
+    const staffPicksButton = screen.getByRole('button', { name: 'Staff Picks' });
+
+    expect(staffPicksButton.className).toContain('dark:bg-[rgba(14,28,37,0.84)]');
+    expect(staffPicksButton.className).toContain('dark:text-[rgba(245,238,232,0.88)]');
+  });
+
+  it('uses a readable active color treatment in dark mode', () => {
+    renderToolbar({ highlightedOnly: true });
+
+    const staffPicksButton = screen.getByRole('button', { name: 'Staff Picks' });
+
+    expect(staffPicksButton.getAttribute('aria-pressed')).toBe('true');
+    expect(staffPicksButton.className).toContain('dark:bg-[rgba(255,131,95,0.14)]');
+    expect(staffPicksButton.className).toContain('dark:text-[#ffd5c9]');
+  });
+});

src/routes/skills/-SkillsToolbar.tsx

@@ -260,10 +260,10 @@ function FilterChip({
       type="button"
       aria-pressed={active}
       onClick={onClick}
-      className={`inline-flex items-center gap-1.5 rounded-[var(--radius-sm)] border border-[rgba(29,59,78,0.22)] bg-[rgba(255,255,255,0.94)] px-3.5 min-h-[36px] text-xs font-semibold transition-all duration-150 ${
+      className={`inline-flex min-h-[36px] items-center gap-1.5 rounded-[var(--radius-sm)] border border-[rgba(29,59,78,0.22)] bg-[rgba(255,255,255,0.94)] px-3.5 text-xs font-semibold transition-all duration-150 dark:border-[rgba(255,255,255,0.12)] dark:bg-[rgba(14,28,37,0.84)] ${
         active
-          ? "border-[color:var(--accent)]/30 bg-[color:var(--accent)]/10 text-[color:var(--accent)]"
-          : "text-[color:var(--ink-soft)] hover:border-[color:var(--border-ui-hover)] hover:text-[color:var(--ink)] dark:text-[rgba(245,238,232,0.88)] dark:hover:text-[rgba(245,238,232,0.96)]"
+          ? "border-[color:var(--accent)]/30 bg-[color:var(--accent)]/10 text-[color:var(--accent)] dark:border-[rgba(255,131,95,0.34)] dark:bg-[rgba(255,131,95,0.14)] dark:text-[#ffd5c9]"
+          : "text-[color:var(--ink-soft)] hover:border-[color:var(--border-ui-hover)] hover:text-[color:var(--ink)] dark:text-[rgba(245,238,232,0.88)] dark:hover:border-[rgba(255,255,255,0.2)] dark:hover:text-[rgba(245,238,232,0.96)]"
       }`}
     >
       {active && !icon && <Check className="h-3 w-3" />}