diff --git a/packages/website/src/components/CodeListing.tsx b/packages/website/src/components/CodeListing.tsx
index 35bd70c99..7fd443f91 100644
--- a/packages/website/src/components/CodeListing.tsx
+++ b/packages/website/src/components/CodeListing.tsx
@@ -30,11 +30,11 @@ export function CodeListing({
 				<div className="w-full flex flex-row">
 					<h4 className="font-mono my-0">{`${name}`}</h4>
 					<h4 className="mx-3 my-0">{separator}</h4>
-					<h4 className="font-mono color-blue-800 my-0">
+					<h4 className="font-mono text-blue-800 dark:text-blue-400 my-0">
 						<HyperlinkedText tokens={typeTokens} />
 					</h4>
 				</div>
-				{summary && <p className="color-slate-500 mt-2">{summary}</p>}
+				{summary && <p className="text-dark-100 mt-2">{summary}</p>}
 				{children}
 			</div>
 		</div>
diff --git a/packages/website/src/components/DocContainer.tsx b/packages/website/src/components/DocContainer.tsx
index 34b9ec940..755f4801c 100644
--- a/packages/website/src/components/DocContainer.tsx
+++ b/packages/website/src/components/DocContainer.tsx
@@ -1,6 +1,6 @@
 import type { ReactNode } from 'react';
 import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
-import { vs } from 'react-syntax-highlighter/dist/cjs/styles/prism';
+import { vscDarkPlus } from 'react-syntax-highlighter/dist/cjs/styles/prism';
 import { HyperlinkedText } from './HyperlinkedText';
 import { Section } from './Section';
 import { TypeParamTable } from './TypeParamTable';
@@ -20,38 +20,38 @@ export interface DocContainerProps {
 export function DocContainer({ name, kind, excerpt, summary, typeParams, children, extendsTokens }: DocContainerProps) {
 	return (
 		<>
-			<div className="bg-white border-b-solid border-gray border-width-0.5 sticky top-0 px-10 py-2">
-				<h2 className="flex items-center font-mono break-all m-0">
+			<div className="bg-white dark:bg-dark border-b-solid border-gray border-width-0.5 sticky top-0 px-10 py-2">
+				<h2 className="flex items-center font-mono break-all m-0 dark:text-white">
 					{generateIcon(kind, 'mr-2')}
 					{name}
 				</h2>
 			</div>
 
-			<div className="p-10">
+			<div className="px-10 pt-5 pb-10">
 				<div>
 					<SyntaxHighlighter
 						wrapLines
 						wrapLongLines
 						language="typescript"
-						style={vs}
+						style={vscDarkPlus}
 						codeTagProps={{ style: { fontFamily: 'JetBrains Mono' } }}
 					>
 						{excerpt}
 					</SyntaxHighlighter>
 				</div>
 				{extendsTokens?.length ? (
-					<div className="flex flex-row items-center">
+					<div className="flex flex-row items-center dark:text-white">
 						<h2 className="mr-5">Extends</h2>
 						<p className="font-mono">
 							<HyperlinkedText tokens={extendsTokens} />
 						</p>
 					</div>
 				) : null}
-				<Section title="Summary">
-					<p className="color-slate-500">{summary ?? 'No summary provided.'}</p>
+				<Section title="Summary" className="dark:text-white">
+					<p className="text-dark-100 dark:text-gray-400">{summary ?? 'No summary provided.'}</p>
 				</Section>
 				{typeParams?.length ? (
-					<Section title="Type Parameters">
+					<Section title="Type Parameters" className="dark:text-white">
 						<TypeParamTable data={typeParams} className="mb-5 p-3" />
 					</Section>
 				) : null}
diff --git a/packages/website/src/components/ItemSidebar.tsx b/packages/website/src/components/ItemSidebar.tsx
index f03a467c9..04dcc6749 100644
--- a/packages/website/src/components/ItemSidebar.tsx
+++ b/packages/website/src/components/ItemSidebar.tsx
@@ -18,8 +18,8 @@ function onMenuClick() {
 export function ItemSidebar({ packageName, data }: ItemListProps) {
 	return (
 		<div className="flex flex-col max-h-full min-w-[270px] lg:border-r-solid border-b-solid border-gray border-width-0.5">
-			<div className="flex justify-between content-center items-center border-b-solid border-gray border-width-0.5 py-2">
-				<h2 className="px-2 font-mono flex items-center content-center m-0">
+			<div className="flex justify-between items-center border-b-solid border-gray border-width-0.5 py-2">
+				<h2 className="px-2 font-mono flex items-center m-0 dark:text-white">
 					<VscPackage className="px-1" />
 					{`${packageName}`}
 				</h2>
@@ -31,7 +31,7 @@ export function ItemSidebar({ packageName, data }: ItemListProps) {
 				{data.members.map((member, i) => (
 					<div key={i} className="mb-1">
 						<a
-							className="flex content-center items-center align-center font-mono no-underline break-all color-blue-500"
+							className="flex items-center align-center font-mono no-underline break-all text-blue-500 dark:text-blue-300"
 							href={member.path}
 						>
 							{generateIcon(member.kind, 'px-1')}
diff --git a/packages/website/src/components/MethodItem.tsx b/packages/website/src/components/MethodItem.tsx
index 751f5ca91..343db3e1d 100644
--- a/packages/website/src/components/MethodItem.tsx
+++ b/packages/website/src/components/MethodItem.tsx
@@ -29,21 +29,21 @@ export function MethodItem({ data }: MethodItemProps) {
 	return (
 		<div className="flex flex-col">
 			<div className="flex content-center">
-				<button className="bg-transparent border-none cursor-pointer" onClick={onAnchorClick}>
+				<button className="bg-transparent border-none cursor-pointer dark:text-white" onClick={onAnchorClick}>
 					<FiLink size={16} />
 				</button>
 				<div className="flex flex-col ml-3">
 					<div className="w-full flex flex-row">
 						<h4 className="font-mono my-0 break-all">{`${getShorthandName(data)}`}</h4>
 						<h4 className="mx-3 my-0">:</h4>
-						<h4 className="font-mono color-blue-800 my-0 break-all ">
+						<h4 className="font-mono text-blue-800 dark:text-blue-400 my-0 break-all ">
 							<HyperlinkedText tokens={data.returnTypeTokens} />
 						</h4>
 					</div>
 				</div>
 			</div>
 			<div className="mx-10">
-				{data.summary && <p className="color-slate-500 mt-2">{data.summary}</p>}
+				{data.summary && <p className="text-dark-100 dark:text-gray-400 mt-2">{data.summary}</p>}
 				{data.parameters.length ? <ParameterTable className="mb-10 mx-5" data={data.parameters} /> : null}
 			</div>
 		</div>
diff --git a/packages/website/src/components/Sections.tsx b/packages/website/src/components/Sections.tsx
index 13c61540b..9041c7a71 100644
--- a/packages/website/src/components/Sections.tsx
+++ b/packages/website/src/components/Sections.tsx
@@ -23,7 +23,7 @@ export interface MethodsSectionProps {
 
 export function MethodsSection({ data }: MethodsSectionProps) {
 	return data.length ? (
-		<Section title="Methods">
+		<Section title="Methods" className="dark:text-white">
 			<MethodList data={data} />
 		</Section>
 	) : null;
diff --git a/packages/website/src/routes/docs/$branchName/packages/$packageName.tsx b/packages/website/src/routes/docs/$branchName/packages/$packageName.tsx
index aec83d8db..478d1acc6 100644
--- a/packages/website/src/routes/docs/$branchName/packages/$packageName.tsx
+++ b/packages/website/src/routes/docs/$branchName/packages/$packageName.tsx
@@ -39,7 +39,7 @@ export default function Package() {
 	const { packageName } = useParams();
 
 	return (
-		<div className="flex flex-col lg:flex-row overflow-hidden max-w-full h-full dark:bg-slate-800">
+		<div className="flex flex-col lg:flex-row overflow-hidden max-w-full h-full bg-white dark:bg-dark">
 			<div className="w-full lg:min-w-1/4 lg:max-w-1/4">
 				<ItemSidebar packageName={packageName!} data={data} />
 			</div>