packages/frontend/src/components/SearchBar.tsx

@@ -10,7 +10,7 @@ const SearchBar: React.ForwardRefRenderFunction<
   return (
     <div className="relative flex w-full">
       <Input
-        leftIcon={<SearchIcon />}
+        leftIcon={<SearchIcon className="text-foreground-secondary" />}
         onChange={onChange}
         value={value}
         type="search"

packages/frontend/src/components/projects/ProjectSearchBar/ProjectSearchBar.tsx

@@ -59,12 +59,12 @@ export const ProjectSearchBar = ({ onChange }: ProjectSearchBarProps) => {
   }, [fetchProjects, debouncedInputValue]);
 
   return (
-    <div className="relative w-full lg:w-fit">
+    <div className="relative w-full lg:w-fit dark:bg-overlay">
       <SearchBar {...getInputProps()} />
       <div
         {...getMenuProps({}, { suppressRefError: true })}
         className={cn(
-          'flex flex-col shadow-dropdown rounded-xl bg-surface-card absolute w-[459px] max-h-52 overflow-y-auto px-2 py-2 gap-1 z-50',
+          'flex flex-col shadow-dropdown rounded-xl dark:bg-overlay2 bg-surface-card absolute w-[459px] max-h-52 overflow-y-auto px-2 py-2 gap-1 z-50',
           { hidden: !inputValue || !isOpen },
         )}
       >

packages/frontend/src/components/projects/ProjectSearchBar/ProjectSearchBarEmpty.tsx

@@ -13,10 +13,10 @@ export const ProjectSearchBarEmpty = ({
       {...props}
       className={cn('flex items-center px-2 py-2 gap-3', className)}
     >
-      <div className="w-8 h-8 rounded-lg flex items-center justify-center bg-orange-50 text-elements-warning">
+      <div className="w-8 h-8 rounded-lg flex items-center justify-center bg-orange-50 text-elements-warning dark:bg-red-50 text-error">
         <InfoRoundFilledIcon size={16} />
       </div>
-      <p className="text-elements-low-em text-sm tracking-[-0.006em]">
+      <p className="text-elements-low-em text-sm dark:text-foreground-secondary tracking-[-0.006em]">
         No projects matching this name
       </p>
     </div>

packages/frontend/src/components/shared/Button/Button.theme.ts

@@ -49,11 +49,11 @@ export const buttonTheme = tv(
           'disabled:shadow-none',
         ],
         secondary: [
-          'text-elements-on-secondary',
+          'text-primary',
           'border',
           'border-transparent',
           'bg-secondary',
-          'hover:bg-controls-secondary-hovered',
+          'hover:bg-overlay2',
           'focus-visible:bg-controls-secondary-hovered',
           'disabled:text-elements-on-disabled',
           'disabled:bg-controls-disabled',
@@ -77,10 +77,12 @@ export const buttonTheme = tv(
         ],
         ghost: [
           'text-elements-on-tertiary',
+          'dark:text-foreground-secondary',
           'border',
           'border-transparent',
           'bg-transparent',
           'hover:bg-controls-tertiary-hovered',
+          'dark:hover:bg-overlay2',
           'hover:border-border-interactive-hovered',
           'focus-visible:bg-controls-tertiary-hovered',
           'focus-visible:border-border-interactive-hovered',

packages/frontend/src/components/shared/Input/Input.theme.ts

@@ -24,12 +24,14 @@ export const inputTheme = tv(
         'shadow-sm',
         'border',
         'rounded-lg',
+        'dark:bg-overlay2',
+        'dark:text-foreground',
         'text-elements-mid-em',
         'border-border-interactive',
         'disabled:shadow-none',
         'disabled:border-none',
       ],
-      icon: ['text-elements-low-em'],
+      icon: ['text-elements-low-em dark:text-foreground-secondary'],
       iconContainer: [
         'absolute',
         'inset-y-0',
@@ -39,7 +41,13 @@ export const inputTheme = tv(
         'cursor-pointer',
       ],
       helperIcon: [],
-      helperText: ['flex', 'gap-2', 'items-center', 'text-elements-danger'],
+      helperText: [
+        'flex',
+        'gap-2',
+        'items-center',
+        'text-elements-danger',
+        'dark:text-primary',
+      ],
     },
     variants: {
       state: {
@@ -54,7 +62,7 @@ export const inputTheme = tv(
             'shadow-none',
             'focus:outline-border-danger',
           ],
-          helperText: 'text-elements-danger',
+          helperText: 'text-error',
         },
       },
       size: {

packages/frontend/src/components/shared/Tabs/Tabs.theme.ts

@@ -15,6 +15,7 @@ export const tabsTheme = tv({
       'border-transparent',
       'hover:border-border-interactive/10',
       'hover:text-elements-mid-em',
+      'dark:hover:text-foreground-secondary',
       'focus-within:border-border-interactive/10',
       'data-[state=active]:font-medium',
       'data-[state=active]:text-elements-high-em',
@@ -27,6 +28,7 @@ export const tabsTheme = tv({
       'data-[orientation=vertical]:rounded-xl',
       'data-[orientation=vertical]:border-transparent',
       'data-[orientation=vertical]:hover:bg-base-bg-emphasized',
+      'data-[orientation=vertical]:dark:hover:bg-overlay2',
       'data-[orientation=vertical]:hover:text-elements-mid-em',
       'data-[orientation=vertical]:hover:border-transparent',
       'data-[orientation=vertical]:focus-visible:border-transparent',
@@ -34,13 +36,17 @@ export const tabsTheme = tv({
       'data-[orientation=vertical]:focus-visible:text-elements-mid-em',
       'data-[orientation=vertical]:data-[state=active]:font-normal',
       'data-[orientation=vertical]:data-[state=active]:bg-base-bg-emphasized',
+      'data-[orientation=vertical]:data-[state=active]:dark:bg-overlay',
       'data-[orientation=vertical]:data-[state=active]:border-transparent',
       'data-[orientation=vertical]:data-[state=active]:hover:text-elements-high-em',
       'data-[orientation=vertical]:data-[state=active]:focus-visible:text-elements-high-em',
       // TODO: demo additions
       'data-[orientation=vertical]:data-[state=active]:bg-snowball-200',
+      'data-[orientation=vertical]:data-[state=active]:dark:bg-overlay',
       'data-[orientation=vertical]:data-[state=active]:hover:bg-snowball-200',
+      'data-[orientation=vertical]:data-[state=active]:dark:hover:bg-overlay2',
       'data-[orientation=vertical]:data-[state=active]:text-snowball-800',
+      'data-[orientation=vertical]:data-[state=active]:dark:text-foreground',
       'data-[orientation=vertical]:data-[state=active]:hover:text-snowball-800',
       'data-[orientation=vertical]:data-[state=active]:shadow-[0px_1px_0px_0px_rgba(8,47,86,0.06)_inset]',
     ],

packages/frontend/src/layouts/ProjectSearch.tsx

@@ -32,7 +32,7 @@ const ProjectSearch = () => {
   return (
     <section className="h-full flex flex-col">
       {/* Header */}
-      <div className="sticky hidden lg:block top-0 border-b bg-base-bg border-border-separator/[0.06] hover:z-30">
+      <div className="sticky hidden lg:block top-0 border-b dark:bg-overlay bg-base-bg border-border-separator/[0.06] hover:z-30">
         <div className="flex pr-6 pl-2 py-2 items-center">
           <div className="flex-1">
             <ProjectSearchBar

packages/frontend/tailwind.config.js

@@ -17,6 +17,7 @@ export default withMT({
       'primary-hovered': '#0000F4AA',
       foreground: '#FBFBFB',
       'foreground-secondary': '#8E8E8E',
+      error: '#B20710',
     },
     extend: {
       screens: {