diff --git a/site/docs/pages/index.mdx b/site/docs/pages/index.mdx
index d119ce3d5a..06635d8019 100644
--- a/site/docs/pages/index.mdx
+++ b/site/docs/pages/index.mdx
@@ -12,7 +12,7 @@ import { OnchainKitProvider } from '@coinbase/onchainkit';
 import { Address, Avatar, Badge, EthBalance, Name, Identity } from '@coinbase/onchainkit/identity';
 import { Swap, SwapAmountInput, SwapButton, SwapMessage, SwapToggleButton } from '@coinbase/onchainkit/swap';
 import { color } from '@coinbase/onchainkit/theme';
-import { 
+import {
   ConnectWallet,
   Wallet,
   WalletDropdown,
@@ -25,8 +25,8 @@ import SwapWrapper from '../components/SwapWrapper';
 import TokenSelector from '../components/TokenSelector';
 import WalletComponents from '../components/WalletComponents';
 import TransactionWrapper from '../components/TransactionWrapper';
-import { 
-  Transaction, 
+import {
+  Transaction,
   TransactionButton,
   TransactionSponsor,
   TransactionStatus,
@@ -68,8 +68,8 @@ import {
 <div className="max-w-[1225px] mx-auto vp-doc relative px-[24px] mb-[26px] mt-0 md:px-0 md:mb-[64px]">
   <div className="mx-auto max-w-2xl">
     <div className="md:text-center flex flex-col gap-8 pt-[100px] pb-16">
-      <h1 className="text-center text-6xl md:text-9xl font-medium no-underline dark:text-white tracking-[-0.1rem]">OnchainKit</h1>
-      <div className="landing-page-hero text-center text-xl md:text-3xl dark:text-white">
+      <h1 className="text-center text-6xl md:text-9xl font-medium no-underline text-black dark:text-white tracking-[-0.1rem]">OnchainKit</h1>
+      <div className="landing-page-hero text-center text-xl md:text-3xl text-black dark:text-white">
         <p>
           Build your onchain apps with ready-to-use React components and Typescript utilities.
         </p>
@@ -235,7 +235,7 @@ bun add @coinbase/onchainkit
       <h3 className="basis-1/2 py-[15px] text-4xl md:text-4xl">Tokens</h3>
     </a>
   </main>
-  
+
   <aside className="pb-6">
     <p className="text-base md:text-base pb-[24px] md:text-left text-center">
       Search [Tokens](/token/types#token) using [getTokens](/token/get-tokens) and display them with [TokenSearch](/token/token-search), [TokenChip](/token/token-chip), and [TokenRow](/token/token-row).
@@ -505,8 +505,8 @@ setFilteredTokens(filteredTokens);
       <p className="w-[450px] max-w-full text-[#8A919E] text-[28px] font-light leading-9 md:text-[28px] text-center md:text-left">Take ownership over design or collaborate efficiently with designers</p>
     </div>
     <aside className="mx-auto md:mx-0">
-      <a 
-        href="https://www.figma.com/community/file/1370194397345450683/onchainkit" 
+      <a
+        href="https://www.figma.com/community/file/1370194397345450683/onchainkit"
         className="flex justify-center items-center border border-indigo-400 text-indigo-400 font-bold leading-6 px-4 py-3 rounded-xl border-solid w-[180px]"
         target="_blank"
         rel="noopener noreferrer"
@@ -554,7 +554,7 @@ setFilteredTokens(filteredTokens);
     <div className="flex flex-col md:flex-row md:items-end justify-between">
       <div className="flex flex-col justify-between xl:flex-row xl:space-x-[25px]">
         <div className="pt-[20px] xl:pt-[40px]">
-          <h2 className="dark:text-white text-4xl md:text-9xl text-center md:text-left font-medium tracking-[-0.1rem]">OnchainKit</h2>
+          <h2 className="text-black dark:text-white text-4xl md:text-9xl text-center md:text-left font-medium tracking-[-0.1rem]">OnchainKit</h2>
           <p className="leading-7 text-xl text-gray-400 px-0 py-6 max-w-[500px] md:text-left text-center">
             Build your onchain apps with ready-to-use React components and Typescript utilities.
           </p>
@@ -585,7 +585,7 @@ setFilteredTokens(filteredTokens);
             <svg width="20" height="17" viewBox="0 0 20 17" fill="none" xmlns="http://www.w3.org/2000/svg">
               <path d="M17.5224 4.63938C17.534 4.80622 17.534 4.97306 17.534 5.14144C17.534 10.2719 13.6282 16.1889 6.48649 16.1889V16.1858C4.37679 16.1889 2.31092 15.5846 0.534897 14.4452C0.841664 14.4821 1.14997 14.5005 1.45904 14.5013C3.20739 14.5028 4.90575 13.9162 6.28121 12.836C4.61974 12.8045 3.16279 11.7212 2.65382 10.1397C3.23583 10.2519 3.83553 10.2289 4.40678 10.0728C2.59539 9.70681 1.2922 8.11531 1.2922 6.26702V6.21781C1.83193 6.51843 2.43624 6.68527 3.05439 6.70372C1.34833 5.56353 0.822443 3.29391 1.85269 1.51943C3.82399 3.94512 6.73252 5.41976 9.85478 5.57583C9.54186 4.22729 9.96933 2.81416 10.9781 1.86618C12.5419 0.396155 15.0014 0.471501 16.4714 2.03455C17.341 1.8631 18.1744 1.54403 18.9371 1.09196C18.6472 1.99073 18.0406 2.75419 17.2303 3.23933C17.9999 3.1486 18.7518 2.94255 19.4599 2.6281C18.9386 3.40924 18.282 4.08966 17.5224 4.63938Z" fill="#F9FAFB"/>
             </svg>
-          </a>  
+          </a>
           <a href="https://warpcast.com/~/channel/onchainkit" title="View OnchainKit Warpcast page" target="_blank">
             <img src="/assets/warpcast-logo.png" />
           </a>
@@ -596,4 +596,4 @@ setFilteredTokens(filteredTokens);
       This project is licensed under the [MIT License](https://github.com/coinbase/onchainkit/blob/main/LICENSE.md) · [Terms of Service](https://www.coinbase.com/legal/cloud/terms-of-service).
     </p>
   </footer>
-</main>
\ No newline at end of file
+</main>
diff --git a/site/docs/styles.css b/site/docs/styles.css
index 97a76516fb..f9298c2c35 100644
--- a/site/docs/styles.css
+++ b/site/docs/styles.css
@@ -17,20 +17,23 @@
   }
 }
 
-.vocs_CodeGroup,
-.vocs_Tabs_list,
-.vocs_Tabs_content,
-.vocs_CodeBlock,
-.vocs_CodeTitle,
-.vocs_Pre_wrapper,
-.vocs_Heading::before,
-.vocs_Code {
-  background-color: #1F2937 !important;
-  border-color: #1F2937 !important;
-}
+.dark {
+  .vocs_CodeGroup,
+  .vocs_Tabs_list,
+  .vocs_Tabs_content,
+  .vocs_CodeBlock,
+  .vocs_CodeTitle,
+  .vocs_Pre_wrapper,
+  .vocs_Heading::before,
+  .vocs_Code {
+    background-color: #1F2937 !important;
+    border-color: #1F2937 !important;
+  }
 
-.vocs_Tabs_trigger {
-  background-color: #1F2937;
+  .vocs_Tabs_trigger {
+    background-color: #1F2937;
+    color: #F9FAFB;
+  }
 }
 
 .vocs_CodeGroup {
@@ -46,7 +49,6 @@
 }
 
 .vocs_Tabs_trigger {
-  color: #F9FAFB;
   padding: 8px 16px;
   border: none;
   cursor: pointer;
@@ -120,18 +122,21 @@
 
 .vocs_Content:has(#blobs) {
   padding: 60px 0px 0px 0px;
+  background-color: #f9fafb;
 }
 
-.dark .vocs_Content:has(#blobs) {
-  padding: 60px 0px 0px 0px;
-  background-color: #030713;
+.dark {
+  .vocs_Content:has(#blobs) {
+    padding: 60px 0px 0px 0px;
+    background-color: #030713;
+  }
 }
 
 .vocs_Content:has(#blobs) + .vocs_Footer {
   display: none;
 }
 
-.dark .css-main-container {
+.css-main-container {
   background-color: #111827;
 }
 
@@ -158,6 +163,14 @@
   font-weight: 300;
   letter-spacing: -1.6px;
   line-height: 48px;
+  color: red;
+}
+
+.dark {
+  .landing-page .vocs_Header,
+  .landing-page .vocs_H1.vocs_Heading {
+    color: white;
+  }
 }
 
 .landing-page a.vocs_Anchor {
diff --git a/site/package.json b/site/package.json
index 2dde544e87..0bc7bdad77 100644
--- a/site/package.json
+++ b/site/package.json
@@ -8,7 +8,7 @@
     "preview": "vocs preview"
   },
   "dependencies": {
-    "@coinbase/onchainkit": "0.28.0",
+    "@coinbase/onchainkit": "0.28.3",
     "@types/react": "latest",
     "@vercel/edge": "^1.1.1",
     "permissionless": "^0.1.29",
diff --git a/site/vocs.config.tsx b/site/vocs.config.tsx
index 412a3d7ae8..ed66eef8cf 100644
--- a/site/vocs.config.tsx
+++ b/site/vocs.config.tsx
@@ -80,12 +80,20 @@ export default defineConfig({
   ],
   theme: {
     accentColor: '#73F7FF',
-    colorScheme: 'dark',
     variables: {
       color: {
-        background: '#151A26',
-        backgroundDark: '#0F131E',
-        textAccent: 'white',
+        background: {
+          dark: '#151A26',
+          light: 'white',
+        },
+        backgroundDark: {
+          dark:  '#0F131E',
+          light:  '#F3F4F6',
+        },
+        textAccent: {
+          dark: 'white',
+          light: '#030712',
+        },
       },
     },
   },
diff --git a/site/yarn.lock b/site/yarn.lock
index 4c1b24ab19..b62a5b8272 100644
--- a/site/yarn.lock
+++ b/site/yarn.lock
@@ -479,9 +479,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@coinbase/onchainkit@npm:0.28.0":
-  version: 0.28.0
-  resolution: "@coinbase/onchainkit@npm:0.28.0"
+"@coinbase/onchainkit@npm:0.28.3":
+  version: 0.28.3
+  resolution: "@coinbase/onchainkit@npm:0.28.3"
   dependencies:
     "@rainbow-me/rainbowkit": "npm:^2.1.3"
     "@tanstack/react-query": "npm:^5"
@@ -496,7 +496,7 @@ __metadata:
     "@xmtp/frames-validator": ^0.6.0
     react: ^18
     react-dom: ^18
-  checksum: fea3d02c47d3e2ae7b2e743cadac97f3f0caef60cb482e6a6b186edbf5e1f75dfa17650e9628e2f0c383cdc34535db0f97fff32d44f42ba7f27bd68535a13583
+  checksum: 97fba7bb1a282aec36c4fd90ce8de8c47c2bc7c5304353c5a31644903ed71ab49275fc82b65e9f545e927a3837e2e63177f0ac9b8adf4af936bba911e2acb6c7
   languageName: node
   linkType: hard
 
@@ -7836,7 +7836,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "onchainkit@workspace:."
   dependencies:
-    "@coinbase/onchainkit": "npm:0.28.0"
+    "@coinbase/onchainkit": "npm:0.28.3"
     "@types/react": "npm:latest"
     "@vercel/edge": "npm:^1.1.1"
     permissionless: "npm:^0.1.29"