adjust styles for dark mode

Author: Max Shkutnyk

fern/components/cookbooks/Cookbooks.tsx

@@ -5,7 +5,7 @@ import { CookbookCard } from './CookbookCard';
 import { TagCategories } from './types';
 import { cookbooks } from './data/cookbooks';
 
-const CARD_COLORS = ['bg-[#EEF0EF]', 'bg-[#FDF2F0]', 'bg-[#F8F1F9]', 'bg-[#F0F2FB]'];
+const CARD_COLORS = ['bg-[#EEF0EF] dark:bg-[#bcc2bf]', 'bg-[#FDF2F0] dark:bg-[#e9ada2]', 'bg-[#F8F1F9] dark:bg-[#d2b1d7]', 'bg-[#F0F2FB] dark:bg-[#a9b3e0]'];
 
 export const Cookbooks: React.FC = () => {
   const [searchQuery, setSearchQuery] = useState('');

fern/components/cookbooks/SearchBar.tsx

@@ -6,13 +6,13 @@ interface SearchBarProps {
 }
 
 export const SearchBar: React.FC<SearchBarProps> = ({ searchQuery, setSearchQuery }) => (
-  <div className="relative w-full">
+  <div className="relative w-full dark:bg-[var(--header-background)]">
     <input
       type="text"
       placeholder="Search"
       value={searchQuery}
       onChange={(e) => setSearchQuery(e.target.value)}
-      className="w-full px-4 py-2 pl-10 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 text-black"
+      className="w-full px-4 py-2 pl-10 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 text-black dark:bg-transparent dark:text-white"
     />
     <div className="absolute left-3 top-1/2 transform -translate-y-1/2">
       <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" className="text-gray-400" viewBox="0 0 16 16">

fern/components/cookbooks/TagButton.tsx

@@ -8,7 +8,7 @@ interface TagButtonProps {
 
 const tagButtonClass = "px-2 py-1 text-[12px] rounded-full transition-colors cursor-pointer font-normal";
 const selectedTagClass = "bg-[#333293] text-white hover:bg-[#333293]/90";
-const unselectedTagClass = "bg-white text-[#666666] shadow-[0_0_0_1px_#E5E5E5] outline outline-1 outline-[#E5E5E5] hover:bg-[#d4d4f0] hover:text-[#4d4d4d]";
+const unselectedTagClass = "bg-transparent text-[#666666] shadow-[0_0_0_1px_#E5E5E5] outline outline-1 outline-[#E5E5E5] hover:bg-[#d4d4f0] hover:text-[#4d4d4d] dark:dark-theme-text-color";
 
 export const TagButton: React.FC<TagButtonProps> = ({ tag, isSelected, onClick }) => (
   <button