From 5f806ecdc13cf71749b712335aa4059985d27cef Mon Sep 17 00:00:00 2001
From: Foysal Ahamed <cfaion341@gmail.com>
Date: Mon, 5 Feb 2024 17:30:49 +0100
Subject: [PATCH] :sparkles: Add theme switcher and dark mode to all places

---
 app/actions/ModActionPanel/QuickAction.tsx    |  7 +-
 app/communication-template/create/page.tsx    |  2 +-
 app/communication-template/page.tsx           | 12 ++--
 app/events/page-content.tsx                   |  2 +-
 app/layout.tsx                                |  8 ++-
 app/reports/page-content.tsx                  |  2 +-
 components/SectionHeader.tsx                  |  6 +-
 components/common/ActionPanel.tsx             |  2 +-
 components/common/DataField.tsx               |  4 +-
 components/common/Dropdown.tsx                |  6 +-
 components/common/FullScreenActionPanel.tsx   | 10 +--
 components/common/Json.tsx                    |  4 +-
 components/common/LoadMoreButton.tsx          |  2 +-
 components/common/PreviewCard.tsx             |  2 +-
 components/common/RecordCard.tsx              | 10 +--
 components/common/RichText.tsx                |  2 +-
 components/common/buttons.tsx                 | 14 ++--
 components/common/feeds/EmptyFeed.tsx         | 18 ++++-
 components/common/forms/index.tsx             | 14 ++--
 components/common/posts/Posts.tsx             |  4 +-
 components/common/posts/PostsFeed.tsx         | 34 +++++-----
 components/common/posts/PostsTable.tsx        | 26 +++----
 components/common/useColorScheme.tsx          | 35 ++++++++++
 components/invites/InviteCodesTable.tsx       | 38 +++++------
 components/mod-event/EventItem.tsx            | 12 ++--
 components/mod-event/EventList.tsx            | 36 ++++++----
 components/mod-event/ItemTitle.tsx            |  2 +-
 components/mod-event/SelectorButton.tsx       |  2 +-
 components/mod-event/View.tsx                 | 18 ++---
 components/reports/SubjectOverview.tsx        |  4 +-
 components/repositories/AccountView.tsx       | 67 +++++++++++--------
 components/repositories/BlobsTable.tsx        | 16 ++---
 .../InviteCodeGenerationStatus.tsx            | 12 ++--
 components/repositories/RecordView.tsx        | 14 ++--
 components/repositories/RepositoriesTable.tsx | 20 +++---
 components/shell/CommandPalette/Root.tsx      |  4 +-
 components/shell/LoginModal.tsx               | 22 +++---
 components/shell/ProfileMenu.tsx              | 10 +--
 components/shell/Shell.tsx                    | 12 ++--
 components/shell/SidebarNav.tsx               | 33 ++++-----
 components/shell/common.ts                    | 12 +++-
 components/subject/ReviewStateMarker.tsx      | 16 ++---
 components/subject/table.tsx                  | 34 +++++-----
 tailwind.config.js                            |  1 +
 44 files changed, 349 insertions(+), 262 deletions(-)
 create mode 100644 components/common/useColorScheme.tsx

diff --git a/app/actions/ModActionPanel/QuickAction.tsx b/app/actions/ModActionPanel/QuickAction.tsx
index 053bec2e..23eb5f77 100644
--- a/app/actions/ModActionPanel/QuickAction.tsx
+++ b/app/actions/ModActionPanel/QuickAction.tsx
@@ -1,7 +1,6 @@
 // TODO: This is badly named so that we can rebuild this component without breaking the old one
 import { useQuery } from '@tanstack/react-query'
 import {
-  AtUri,
   ComAtprotoAdminDefs,
   ComAtprotoAdminEmitModerationEvent,
   ComAtprotoModerationDefs,
@@ -84,7 +83,7 @@ export function ModActionPanelQuick(
   return (
     <FullScreenActionPanel
       title={
-        <Dialog.Title className="text-lg leading-6 font-medium text-gray-900 flex flex-row justify-between pr-8">
+        <Dialog.Title className="text-lg leading-6 font-medium text-gray-900 dark:text-gray-200 flex flex-row justify-between pr-8">
           Take moderation action
           {isMobileView && (
             <button
@@ -108,7 +107,7 @@ export function ModActionPanelQuick(
           {isInitialLoading ? (
             <>
               <Loading />{' '}
-              <p className="pb-4 text-center text-gray-400">
+              <p className="pb-4 text-center text-gray-400 dark:text-gray-50">
                 Loading reports...
               </p>
             </>
@@ -118,7 +117,7 @@ export function ModActionPanelQuick(
                 title="No reports"
                 className="h-10 w-10 text-green-300 align-text-bottom mx-auto mb-4"
               />
-              <p className="pb-4 text-center text-gray-400">No reports found</p>
+              <p className="pb-4 text-center text-gray-400 dark:text-gray-50">No reports found</p>
             </>
           )}
         </div>
diff --git a/app/communication-template/create/page.tsx b/app/communication-template/create/page.tsx
index 9408404a..48d5c1e4 100644
--- a/app/communication-template/create/page.tsx
+++ b/app/communication-template/create/page.tsx
@@ -11,7 +11,7 @@ export default function CommunicationTemplateCreatePage() {
 
   return (
     <div className="w-5/6 md:w-2/3 lg:w-1/2 mx-auto">
-      <h2 className="text-gray-600 font-semibold mb-3 pb-2 mt-4 border-b border-gray-300">
+      <h2 className="text-gray-600 dark:text-gray-100 font-semibold mb-3 pb-2 mt-4 border-b border-gray-300">
         Create New Template
       </h2>
       <CommunicationTemplateForm />
diff --git a/app/communication-template/page.tsx b/app/communication-template/page.tsx
index 4c999351..c5ef6d51 100644
--- a/app/communication-template/page.tsx
+++ b/app/communication-template/page.tsx
@@ -33,7 +33,7 @@ export default function CommunicationTemplatePage() {
   return (
     <div className="w-5/6 md:w-2/3 lg:w-1/2 mx-auto">
       <div className="flex flex-row justify-between items-center">
-        <h2 className="font-semibold text-gray-600 mb-3 mt-4">
+        <h2 className="font-semibold text-gray-600 dark:text-gray-100 mb-3 mt-4">
           Communication Templates
         </h2>
         <LinkButton
@@ -51,9 +51,9 @@ export default function CommunicationTemplatePage() {
       />
       <ul>
         {!data?.length && (
-          <div className="shadow bg-white rounded-sm p-5 text-gray-700 mb-3 text-center">
+          <div className="shadow bg-white dark:bg-slate-800 rounded-sm p-5 text-gray-700 dark:text-gray-100 mb-3 text-center">
             <p>No templates found</p>
-            <p className="text-sm text-gray-900">
+            <p className="text-sm text-gray-900 dark:text-gray-200">
               Create a new template to send emails to users.
             </p>
           </div>
@@ -61,10 +61,10 @@ export default function CommunicationTemplatePage() {
         {data?.map((template) => (
           <li
             key={template.id}
-            className="shadow bg-white rounded-sm p-3 text-gray-700 mb-3"
+            className="shadow dark:shadow-slate-700 bg-white dark:bg-slate-800 rounded-sm p-3 text-gray-700 dark:text-gray-100 mb-3"
           >
             <p className="flex flex-row justify-between">
-              <span className="text-sm text-gray-900">{template.name}</span>
+              <span className="text-sm text-gray-900 dark:text-gray-200">{template.name}</span>
               {template.disabled && (
                 <LabelChip className="bg-red-200">Disabled</LabelChip>
               )}
@@ -78,7 +78,7 @@ export default function CommunicationTemplatePage() {
               <div className="flex flex-row">
                 <Link
                   href={`/communication-template/${template.id}/edit`}
-                  className="flex flex-row items-center border border-gray-400 rounded-sm px-2 hover:bg-gray-100 mx-1"
+                  className="flex flex-row items-center border border-gray-400 rounded-sm px-2 hover:bg-gray-100 dark:hover:bg-slate-700 mx-1"
                 >
                   <PencilIcon className="h-3 w-3 mr-1" />
                   Edit
diff --git a/app/events/page-content.tsx b/app/events/page-content.tsx
index 7a2b5841..6c38a4dc 100644
--- a/app/events/page-content.tsx
+++ b/app/events/page-content.tsx
@@ -26,7 +26,7 @@ export default function EventListPageContent() {
 
   return (
     <div>
-      <div className="w-5/6 sm:w-3/4 md:w-2/3 lg:w-1/2 mx-auto my-4">
+      <div className="w-5/6 sm:w-3/4 md:w-2/3 lg:w-1/2 mx-auto my-4 dark:text-gray-100">
         <ModEventList queryOptions={{ refetchInterval: 10 * 1000 }} />
       </div>
       <ModActionPanelQuick
diff --git a/app/layout.tsx b/app/layout.tsx
index 36b11dc1..682c98bf 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -7,6 +7,7 @@ import { Shell } from '@/shell/Shell'
 import { CommandPaletteRoot } from '@/shell/CommandPalette/Root'
 import { AuthProvider } from '@/shell/AuthContext'
 import { queryClient } from 'components/QueryClient'
+import { isDarkModeEnabled } from '@/common/useColorScheme'
 
 export default function RootLayout({
   children,
@@ -21,7 +22,12 @@ export default function RootLayout({
       : false
 
   return (
-    <html lang="en" className="h-full bg-gray-50">
+    <html
+      lang="en"
+      className={`h-full bg-gray-50 dark:bg-slate-900 ${
+        isDarkModeEnabled() ? 'dark' : ''
+      }`}
+    >
       <title>Ozone</title>
       <link
         rel="icon"
diff --git a/app/reports/page-content.tsx b/app/reports/page-content.tsx
index b19425ed..eed71d5b 100644
--- a/app/reports/page-content.tsx
+++ b/app/reports/page-content.tsx
@@ -229,7 +229,7 @@ export const ReportsPageContent = () => {
         <div className="flex-1 lg:text-right lg:pr-2 pb-4 px-1 pt-5 lg:pt-0">
           <button
             role="button"
-            className="flex-1 text-gray-500 hover:text-amber-600 whitespace-nowrap font-medium text-sm align-text-bottom"
+            className="flex-1 text-gray-500 dark:text-gray-50 hover:text-amber-600 dark:hover:text-amber-100 whitespace-nowrap font-medium text-sm align-text-bottom"
             onClick={() => setQuickActionPanelSubject(subjectOptions[0] ?? '')}
           >
             Take Action <ModActionIcon className="h-4 w-4 align-text-bottom" />
diff --git a/components/SectionHeader.tsx b/components/SectionHeader.tsx
index 563a6eab..dfcf5d9f 100644
--- a/components/SectionHeader.tsx
+++ b/components/SectionHeader.tsx
@@ -27,7 +27,7 @@ export function SectionHeader({
       className={`px-6 pt-4 ${!!tabs.length ? 'border-b border-gray-200' : ''}`}
     >
       <div className="sm:flex sm:items-baseline">
-        <h3 className="text-lg font-medium leading-6 text-gray-900 ">
+        <h3 className="text-lg font-medium leading-6 text-gray-900 dark:text-gray-200">
           {title}
         </h3>
         <div className="mt-4 sm:mt-0 sm:ml-10 flex-1">
@@ -53,8 +53,8 @@ export function SectionHeader({
                     href={href}
                     className={classNames(
                       current === tab.key
-                        ? 'border-rose-500 text-rose-600'
-                        : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300',
+                        ? 'border-rose-500 text-rose-600 dark:border-teal-400 dark:text-teal-500'
+                        : 'border-transparent text-gray-500 hover:text-gray-700 dark:text-gray-100 dark:hover:text-teal-200 hover:border-gray-300 dark:hover:border-teal-300',
                       'whitespace-nowrap pb-4 px-1 border-b-2 font-medium text-sm',
                     )}
                     aria-current={current ? 'page' : undefined}
diff --git a/components/common/ActionPanel.tsx b/components/common/ActionPanel.tsx
index 0ba214f8..d2f534e4 100644
--- a/components/common/ActionPanel.tsx
+++ b/components/common/ActionPanel.tsx
@@ -56,7 +56,7 @@ export function ActionPanel(props: {
                       </button>
                     </div>
                   </Transition.Child>
-                  <div className="flex h-full flex-col overflow-y-scroll bg-white py-6 shadow-xl">
+                  <div className="flex h-full flex-col overflow-y-scroll bg-white dark:bg-slate-900 py-6 shadow-xl">
                     {title && (
                       <div className="px-4 sm:px-6">
                         {typeof title !== 'string' && title}
diff --git a/components/common/DataField.tsx b/components/common/DataField.tsx
index ba4d2846..d441c038 100644
--- a/components/common/DataField.tsx
+++ b/components/common/DataField.tsx
@@ -18,12 +18,12 @@ export const DataField = ({
   shouldTruncateValue,
 }: DataFieldProps) => {
   const dataClasses = classNames(
-    'mt-1 text-sm text-gray-900',
+    'mt-1 text-sm text-gray-900 dark:text-gray-200',
     shouldTruncateValue ? 'truncate' : 'break-words',
   )
   return (
     <div className="sm:col-span-1">
-      <dt className="text-sm font-medium text-gray-500 flex items-center">
+      <dt className="text-sm font-medium text-gray-500 dark:text-gray-50 flex items-center">
         {label}
         {showCopyButton && value && (
           <CopyButton
diff --git a/components/common/Dropdown.tsx b/components/common/Dropdown.tsx
index 1257ccfa..6952e68c 100644
--- a/components/common/Dropdown.tsx
+++ b/components/common/Dropdown.tsx
@@ -42,7 +42,7 @@ export const Dropdown = ({
           <Menu.Items
             className={classNames(
               rightAligned ? 'right-0' : '',
-              'absolute z-10 mt-2 w-48 origin-top-right rounded-md bg-white py-1 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none',
+              'absolute z-10 mt-2 w-48 origin-top-right rounded-md bg-white dark:bg-slate-800 py-1 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none',
             )}
           >
             {items.map((item) => (
@@ -51,8 +51,8 @@ export const Dropdown = ({
                   <a
                     href="#"
                     className={classNames(
-                      active ? 'bg-gray-100' : '',
-                      'block px-4 py-2 text-sm text-gray-700',
+                      active ? 'bg-gray-100 dark:bg-slate-700' : '',
+                      'block px-4 py-2 text-sm text-gray-700 dark:text-gray-100',
                     )}
                     onClick={item.onClick}
                   >
diff --git a/components/common/FullScreenActionPanel.tsx b/components/common/FullScreenActionPanel.tsx
index 9f744b27..e7051fb1 100644
--- a/components/common/FullScreenActionPanel.tsx
+++ b/components/common/FullScreenActionPanel.tsx
@@ -37,29 +37,29 @@ export function FullScreenActionPanel(props: {
             leaveFrom="opacity-100 scale-100"
             leaveTo="opacity-0 scale-95"
           >
-            <Dialog.Panel className="max-w-screen-xl w-full sm:w-5/6 h-full md:max-h-3/4 md:my-12 align-bottom bg-white rounded-lg text-left sm:overflow-hidden shadow-xl transform transition-all sm:align-middle flex">
+            <Dialog.Panel className="max-w-screen-xl w-full sm:w-5/6 h-full md:max-h-3/4 md:my-12 align-bottom bg-white dark:bg-slate-900 rounded-lg text-left sm:overflow-hidden shadow-xl transform transition-all sm:align-middle flex">
               <div className="absolute top-0 right-0 pt-4 pr-4">
                 <button
                   type="button"
-                  className="rounded-md text-gray-300 hover:text-white focus:outline-none focus:ring-2 focus:ring-white"
+                  className="rounded-md text-gray-300 dark:text-gray-50 hover:text-white focus:outline-none focus:ring-2 focus:ring-white"
                   onClick={onClose}
                 >
                   <span className="sr-only">Close panel</span>
                   <XMarkIcon className="h-6 w-6" aria-hidden="true" />
                 </button>
               </div>
-              <div className="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4 flex flex-col flex-1">
+              <div className="bg-white dark:bg-slate-900 px-4 pt-5 pb-4 sm:p-6 sm:pb-4 flex flex-col flex-1">
                 {title && (
                   <div className="sm:flex sm:items-start">
                     {typeof title !== 'string' && title}
                     {typeof title === 'string' && (
-                      <Dialog.Title className="text-lg leading-6 font-medium text-gray-900">
+                      <Dialog.Title className="text-lg leading-6 font-medium text-gray-900 dark:text-gray-200">
                         {title}
                       </Dialog.Title>
                     )}
                   </div>
                 )}
-                <div className="mt-2 text-sm text-gray-500 flex flex-1 flex-col align-center">
+                <div className="mt-2 text-sm text-gray-500 dark:text-gray-50 flex flex-1 flex-col align-center">
                   {children}
                 </div>
               </div>
diff --git a/components/common/Json.tsx b/components/common/Json.tsx
index 259625d6..4525ae6b 100644
--- a/components/common/Json.tsx
+++ b/components/common/Json.tsx
@@ -18,7 +18,7 @@ export function Json({
     <div className={className}>
       <div
         className={classNames(
-          'flex items-center rounded-t-lg bg-white border border-gray-200 px-2 py-2 sm:px-4 sm:py-3 text-sm cursor-pointer',
+          'flex items-center rounded-t-lg bg-white dark:bg-slate-800 border border-gray-200 dark:border-slate-700 px-2 py-2 sm:px-4 sm:py-3 text-sm cursor-pointer dark:text-gray-200',
           open ? 'rounded-t-lg' : 'rounded-lg',
         )}
         onClick={onToggle}
@@ -31,7 +31,7 @@ export function Json({
         {label}
       </div>
       {open ? (
-        <div className="rounded-b-lg bg-gray-50 border border-t-0 border-gray-200 px-4 py-5 sm:p-6 font-mono whitespace-pre overflow-x-scroll text-xs">
+        <div className="rounded-b-lg bg-gray-50 dark:bg-slate-700 border border-t-0 border-gray-200 dark:border-slate-600 dark:bg-slate-700 px-4 py-5 sm:p-6 font-mono whitespace-pre overflow-x-scroll text-xs dark:text-gray-300">
           {JSON.stringify(value, null, 2)}
         </div>
       ) : undefined}
diff --git a/components/common/LoadMoreButton.tsx b/components/common/LoadMoreButton.tsx
index d15b18ce..46ae4f04 100644
--- a/components/common/LoadMoreButton.tsx
+++ b/components/common/LoadMoreButton.tsx
@@ -5,7 +5,7 @@ export function LoadMoreButton(props: ButtonHTMLAttributes<HTMLButtonElement>) {
   return (
     <button
       type="button"
-      className={`inline-flex items-center rounded border border-gray-300 bg-white px-2.5 py-1.5 text-xs font-medium text-gray-700 shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 ${className}`}
+      className={`inline-flex items-center rounded border border-gray-300 dark:border-slate-400 bg-white dark:bg-slate-900 px-2.5 py-1.5 text-xs font-medium text-gray-700 dark:text-gray-100 shadow-sm hover:bg-gray-50 dark:hover:bg-slate-600 focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:focus:ring-teal-500 focus:ring-offset-2 ${className}`}
       {...others}
     >
       {children ?? 'Load more'}
diff --git a/components/common/PreviewCard.tsx b/components/common/PreviewCard.tsx
index 87c2fc6d..771f2d80 100644
--- a/components/common/PreviewCard.tsx
+++ b/components/common/PreviewCard.tsx
@@ -37,7 +37,7 @@ export function PreviewCard({
     const displayTitle = title || getPreviewTitleForAtUri(did)
     return (
       <div className="rounded border-2 border-dashed border-gray-300 p-2 pb-0 mb-3">
-        <p className="text-sm font-medium text-gray-500 mb-3">{displayTitle}</p>
+        <p className="text-sm font-medium text-gray-500 dark:text-gray-50 mb-3">{displayTitle}</p>
         <RecordCard uri={did} />
         {children}
       </div>
diff --git a/components/common/RecordCard.tsx b/components/common/RecordCard.tsx
index 31e43e40..fd4d56d9 100644
--- a/components/common/RecordCard.tsx
+++ b/components/common/RecordCard.tsx
@@ -225,7 +225,7 @@ export function RepoCard(props: { did: string }) {
   }
   const takendown = !!repo.moderation.subjectStatus?.takendown
   return (
-    <div className="bg-white">
+    <div className="bg-white dark:bg-slate-800">
       <div className="flex w-full space-x-4">
         <div className="flex-shrink-0">
           <ProfileAvatar
@@ -235,7 +235,7 @@ export function RepoCard(props: { did: string }) {
           />
         </div>
         <div className="min-w-0 flex-1">
-          <p className="text-sm font-medium text-gray-900">
+          <p className="text-sm font-medium text-gray-900 dark:text-gray-200">
             <Link
               href={`/repositories/${repo.handle}`}
               className="hover:underline"
@@ -243,7 +243,7 @@ export function RepoCard(props: { did: string }) {
               {profile?.displayName ? (
                 <>
                   <span className="font-bold">{profile.displayName}</span>
-                  <span className="ml-1 text-gray-500">@{repo.handle}</span>
+                  <span className="ml-1 text-gray-500 dark:text-gray-50">@{repo.handle}</span>
                 </>
               ) : (
                 <span className="font-bold">@{repo.handle}</span>
@@ -259,12 +259,12 @@ export function RepoCard(props: { did: string }) {
             </a>
           </p>
           {profile?.description && (
-            <p className="text-gray-500">{profile.description}</p>
+            <p className="text-gray-500 dark:text-gray-50">{profile.description}</p>
           )}
           {takendown && (
             <p className="pt-1 pb-1">
               <LoadingFailedDense
-                className="inline-block font-normal text-gray-600"
+                className="inline-block font-normal text-gray-600 dark:text-gray-100"
                 error="Account taken down"
                 noPadding
               />
diff --git a/components/common/RichText.tsx b/components/common/RichText.tsx
index 5ba02a1c..2e7a8b64 100644
--- a/components/common/RichText.tsx
+++ b/components/common/RichText.tsx
@@ -30,7 +30,7 @@ export function RichText({ post }: { post: Post.Record }) {
       els.push(segment.text)
     }
   }
-  return <div className='break-words'>{els}</div>
+  return <div className='break-words dark:text-gray-300'>{els}</div>
 }
 
 // This function was copy-pasted from social-app's RichText component
diff --git a/components/common/buttons.tsx b/components/common/buttons.tsx
index e8cb29b7..7d990cf4 100644
--- a/components/common/buttons.tsx
+++ b/components/common/buttons.tsx
@@ -12,7 +12,7 @@ export const ButtonPrimary = forwardRef(function ButtonPrimary(
     <button
       ref={ref}
       type="button"
-      className={`inline-flex items-center rounded border border-transparent bg-indigo-600 disabled:bg-gray-400 px-4 py-2 text-base font-medium text-white shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 ${className}`}
+      className={`inline-flex items-center rounded border border-transparent bg-indigo-600 dark:bg-teal-600 disabled:bg-gray-400 px-4 py-2 text-base font-medium text-white shadow-sm hover:bg-indigo-700 hover:bg-teal-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:focus:ring-teal-500 focus:ring-offset-2 ${className}`}
       {...others}
     />
   )
@@ -20,11 +20,11 @@ export const ButtonPrimary = forwardRef(function ButtonPrimary(
 
 export function ButtonSecondary(props: ComponentProps<'button'>) {
   const { className = '', color, ...others } = props
-  const textColor = color || 'text-indigo-700'
+  const textColor = color || 'text-indigo-700 dark:text-sky-100'
   return (
     <button
       type="button"
-      className={`inline-flex items-center rounded-md border border-transparent bg-indigo-100 disabled:bg-gray-100 px-4 py-2 text-base font-medium disabled:text-gray-700 hover:bg-indigo-200 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 ${textColor} ${className}`}
+      className={`inline-flex items-center rounded-md border border-transparent bg-indigo-100 dark:bg-sky-700 disabled:bg-gray-100 px-4 py-2 text-base font-medium disabled:text-gray-700 hover:bg-indigo-200 dark:hover:bg-sky-800 focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:focus:ring-sky-900 focus:ring-offset-2 ${textColor} ${className}`}
       {...others}
     />
   )
@@ -39,9 +39,9 @@ type ActionButtonProps = {
 
 const appearanceClassNames = {
   outlined:
-    'bg-transparent disabled:bg-gray-300 text-black hover:bg-gray-500 focus:ring-gray-500 border-gray-700',
+    'bg-transparent dark:bg-slate-800 disabled:bg-gray-300 text-black dark:text-gray-50 hover:bg-gray-500 dark:hover:bg-slate-700 focus:ring-gray-500 dark:focus:ring-slate-600 border-gray-700 dark:border-slate-600',
   primary:
-    'bg-indigo-600 disabled:bg-gray-400 text-white hover:bg-indigo-700 focus:ring-indigo-500 border-transparent',
+    'bg-indigo-600 dark:bg-teal-600 disabled:bg-gray-400 text-white hover:bg-indigo-700 dark:hover:bg-teal-700 focus:ring-indigo-500 dark:focus:ring-teal-500 border-transparent',
 }
 const sizeClassNames = {
   xs: 'px-1 py-1 text-xs font-light',
@@ -112,8 +112,8 @@ export const ButtonGroup = ({
             i === 0 ? 'rounded-l-md' : '',
             i === items.length - 1 ? '-ml-px rounded-r-md' : '',
             isActive
-              ? 'bg-rose-600 text-white border-rose-800'
-              : 'bg-white text-gray-700 border-gray-300',
+              ? 'bg-rose-600 dark:bg-teal-600 text-white border-rose-800 dark:border-teal-800'
+              : 'bg-white dark:bg-slate-800 text-gray-700 dark:text-gray-100 border-gray-300 dark:border-slate-700',
             buttonTextSizeMap[size],
             buttonSpaceMap[size],
             className,
diff --git a/components/common/feeds/EmptyFeed.tsx b/components/common/feeds/EmptyFeed.tsx
index be6498b2..a811f468 100644
--- a/components/common/feeds/EmptyFeed.tsx
+++ b/components/common/feeds/EmptyFeed.tsx
@@ -2,9 +2,23 @@ import { ChatBubbleLeftIcon } from '@heroicons/react/24/outline'
 
 export const EmptyFeed = () => {
   return (
-    <div className="flex flex-col items-center py-10">
+    <EmptyDataset message="No posts yet!">
       <ChatBubbleLeftIcon className="h-10 w-10" />
-      <p className="text-gray-500 text-base">No posts yet!</p>
+    </EmptyDataset>
+  )
+}
+
+export const EmptyDataset = ({
+  message,
+  children,
+}: {
+  message: string
+  children?: JSX.Element
+}) => {
+  return (
+    <div className="flex flex-col items-center py-10">
+      {children}
+      <p className="text-gray-500 dark:text-gray-50 text-base">{message}</p>
     </div>
   )
 }
diff --git a/components/common/forms/index.tsx b/components/common/forms/index.tsx
index 2746f9e1..8ccc93a5 100644
--- a/components/common/forms/index.tsx
+++ b/components/common/forms/index.tsx
@@ -7,7 +7,7 @@ export const Input = forwardRef<HTMLInputElement, ComponentProps<'input'>>(
     return (
       <input
         ref={ref}
-        className={`rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm ${className}`}
+        className={`rounded-md border-gray-300 dark:border-teal-500 dark:bg-slate-700 shadow-sm dark:shadow-slate-700 focus:border-indigo-500 focus:ring-indigo-500 dark:focus:ring-teal-500  sm:text-sm dark:text-gray-100 ${className}`}
         {...others}
       />
     )
@@ -18,7 +18,7 @@ export function Select(props: ComponentProps<'select'>) {
   const { className = '', ...others } = props
   return (
     <select
-      className={`rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm ${className}`}
+      className={`rounded-md dark:bg-slate-800 dark:text-gray-100 border-gray-300 dark:border-teal-500 shadow-sm focus:border-indigo-500 dark:focus:border-teal-500 focus:ring-indigo-500 sm:text-sm ${className}`}
       {...others}
     />
   )
@@ -32,7 +32,7 @@ export const Textarea = forwardRef<
   return (
     <textarea
       ref={ref}
-      className={`rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm ${className}`}
+      className={`rounded-md border-gray-300 dark:border-teal-500 dark:bg-slate-700 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 dark:focus:ring-teal-500 sm:text-sm dark:text-gray-100 ${className}`}
       {...others}
     />
   )
@@ -81,7 +81,7 @@ export function RadioGroupOption(
           name={name}
           required={required}
           disabled={disabled}
-          className="w-4 h-4 text-indigo-600 bg-gray-100 border-gray-300 focus:ring-indigo-500 focus:ring-2"
+          className="w-4 h-4 text-indigo-600 dark:text-teal-600 bg-gray-100 dark:bg-slate-500 border-gray-300 focus:ring-indigo-500 dark:focus:ring-teal-500 focus:ring-2"
           {...others}
         />
         <label
@@ -118,7 +118,7 @@ export function FormLabel(
     <div className={className}>
       <label
         {...others}
-        className="block text-sm font-medium text-gray-700 flex flex-row justify-between"
+        className="block text-sm font-medium text-gray-700 dark:text-gray-100 flex flex-row justify-between"
       >
         <div>
           {label}
@@ -155,12 +155,12 @@ export const Checkbox = forwardRef<
       <input
         ref={ref}
         type="checkbox"
-        className="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-600 mr-1"
+        className="h-4 w-4 rounded border-gray-300 text-indigo-600 dark:text-teal-500 focus:ring-indigo-600 dark:focus:ring-teal-500 mr-1"
         {...rest}
       />
       <label
         htmlFor={rest.name}
-        className="ml-1 text-sm leading-6 font-medium text-gray-900"
+        className="ml-1 text-sm leading-6 font-medium text-gray-900 dark:text-gray-200"
       >
         {label}
         {required && <sup className="text-red-500">*</sup>}
diff --git a/components/common/posts/Posts.tsx b/components/common/posts/Posts.tsx
index 3b5e85d8..b9b9782a 100644
--- a/components/common/posts/Posts.tsx
+++ b/components/common/posts/Posts.tsx
@@ -28,8 +28,8 @@ export function Posts({
 
   return (
     <div>
-      <div className="bg-white border-b border-gray-200 py-2 px-4 sm:flex sm:items-center sm:justify-between sticky top-0">
-        <h3 className="text-lg font-medium leading-6 text-gray-900">{title}</h3>
+      <div className="bg-white dark:bg-slate-800 border-b border-gray-200 dark:border-slate-700 py-2 px-4 sm:flex sm:items-center sm:justify-between sticky top-0">
+        <h3 className="text-lg font-medium leading-6 text-gray-900 dark:text-gray-200">{title}</h3>
         <div className="sm:flex mt-3 sm:mt-0 sm:ml-4">
           <ButtonGroup
             appearance="primary"
diff --git a/components/common/posts/PostsFeed.tsx b/components/common/posts/PostsFeed.tsx
index 78ea44bf..b87157ac 100644
--- a/components/common/posts/PostsFeed.tsx
+++ b/components/common/posts/PostsFeed.tsx
@@ -42,11 +42,11 @@ export function PostsFeed({
   onLoadMore?: () => void
 }) {
   return (
-    <div className="border border-gray-200 border-b-0">
+    <div className="border border-gray-200 dark:border-slate-700 border-b-0">
       {items.map((item, i) => (
         <div
           key={`post-${i}`}
-          className="bg-white border-b border-gray-200 pt-6 pb-4 px-4"
+          className="bg-white dark:bg-slate-800 border-b border-gray-200 dark:border-slate-700 pt-6 pb-4 px-4"
         >
           <PostAsCard item={item} onReport={onReport} dense />
         </div>
@@ -72,7 +72,7 @@ export function PostAsCard({
   showLabels?: boolean
 }) {
   return (
-    <div className={`bg-white ${className}`}>
+    <div className={`bg-white dark:bg-slate-800 ${className}`}>
       <PostHeader item={item} dense={dense} />
       <PostContent item={item} dense={dense} />
       <PostEmbeds item={item} />
@@ -100,11 +100,11 @@ function PostHeader({
         </div>
         <div className="min-w-0 flex-1">
           {isRepost(item.reason) ? (
-            <p className="block text-gray-500 text-sm">
+            <p className="block text-gray-500 dark:text-gray-50 text-sm">
               Reposted by @{item.reason.by.handle}
             </p>
           ) : undefined}
-          <p className="text-sm font-medium text-gray-900">
+          <p className="text-sm font-medium text-gray-900 dark:text-gray-200">
             <Link
               href={`/repositories/${item.post.author.handle}`}
               className="hover:underline"
@@ -114,7 +114,7 @@ function PostHeader({
                   <span className="font-bold">
                     {item.post.author.displayName}
                   </span>
-                  <span className="ml-1 text-gray-500">
+                  <span className="ml-1 text-gray-500 dark:text-gray-50">
                     @{item.post.author.handle}
                   </span>
                 </>
@@ -125,7 +125,7 @@ function PostHeader({
             &nbsp;&middot;&nbsp;
             <Link
               href={`/repositories/${item.post.uri.replace('at://', '')}`}
-              className="text-gray-500 hover:underline"
+              className="text-gray-500 dark:text-gray-50 hover:underline"
             >
               {new Date(item.post.indexedAt).toLocaleString()}
             </Link>
@@ -141,7 +141,7 @@ function PostHeader({
             </a>
           </p>
           {item.reply ? (
-            <p className="text-gray-500 text-sm">
+            <p className="text-gray-500 dark:text-gray-50 text-sm">
               Reply to{' '}
               <Link
                 href={`/repositories/${
@@ -282,7 +282,7 @@ function PostEmbeds({ item }: { item: AppBskyFeedDefs.FeedViewPost }) {
           <div>
             {/* We don't want links to get out the container since the container usually is dashed bordered */}
             <a
-              className="text-gray-500 break-all"
+              className="text-gray-500 dark:text-gray-50 break-all"
               href={embed.external.uri}
               target="_blank"
               rel="noreferrer"
@@ -308,7 +308,7 @@ function PostEmbeds({ item }: { item: AppBskyFeedDefs.FeedViewPost }) {
               profile={embed.record.author}
               className="w-6 h-6 rounded-full"
             />
-            <p className="text-sm font-medium text-gray-900">
+            <p className="text-sm font-medium text-gray-900 dark:text-gray-200">
               <Link
                 href={`/repositories/${embed.record.author.handle}`}
                 className="hover:underline"
@@ -318,7 +318,7 @@ function PostEmbeds({ item }: { item: AppBskyFeedDefs.FeedViewPost }) {
                     <span className="font-bold">
                       {embed.record.author.displayName}
                     </span>
-                    <span className="ml-1 text-gray-500">
+                    <span className="ml-1 text-gray-500 dark:text-gray-50">
                       @{embed.record.author.handle}
                     </span>
                   </>
@@ -331,7 +331,7 @@ function PostEmbeds({ item }: { item: AppBskyFeedDefs.FeedViewPost }) {
               &nbsp;&middot;&nbsp;
               <Link
                 href={`/repositories/${embed.record.uri.replace('at://', '')}`}
-                className="text-gray-500 hover:underline"
+                className="text-gray-500 dark:text-gray-50 hover:underline"
               >
                 {new Date(embed.record.indexedAt).toLocaleString()}
               </Link>
@@ -352,15 +352,15 @@ function PostEmbeds({ item }: { item: AppBskyFeedDefs.FeedViewPost }) {
       const repoLink = `/repositories/${did}/${collection}/${rkey}`
       return (
         <div className="flex gap-2 pb-2 pl-14 flex-col border-2 border-gray-400 border-dashed my-2 rounded pt-2">
-          <p className="text-sm font-medium text-gray-600">
+          <p className="text-sm font-medium text-gray-600 dark:text-gray-100">
             The author of the original post blocked the author.{' '}
-            <Link className=" text-gray-900 underline" href={repoLink}>
+            <Link className=" text-gray-900 dark:text-gray-200 underline" href={repoLink}>
               See quoted post
             </Link>
             {' · '}
             <a
               target="_blank"
-              className=" text-gray-900 underline"
+              className=" text-gray-900 dark:text-gray-200 underline"
               href={peekLink}
             >
               Peek
@@ -384,14 +384,14 @@ function PostControls({
     <div className="flex gap-1 pl-10">
       <Link
         href={`/repositories/${item.post.uri.replace('at://', '')}`}
-        className="flex flex-col items-center rounded-md px-4 pt-2 pb-1 text-gray-500 hover:bg-blue-100 hover:text-blue-700 cursor-pointer"
+        className="flex flex-col items-center rounded-md px-4 pt-2 pb-1 text-gray-500 dark:text-gray-50 hover:bg-blue-100 hover:text-blue-700 cursor-pointer"
       >
         <DocumentMagnifyingGlassIcon className="w-6 h-6" />
         <span className="text-sm">View</span>
       </Link>
       <button
         type="button"
-        className="flex flex-col items-center rounded-md px-4 pt-2 pb-1 text-gray-500 hover:bg-rose-100 hover:text-rose-700 cursor-pointer"
+        className="flex flex-col items-center rounded-md px-4 pt-2 pb-1 text-gray-500 dark:text-gray-50 hover:bg-rose-100 hover:text-rose-700 cursor-pointer"
         onClick={() => onReport?.(item.post.uri)}
       >
         <ExclamationCircleIcon className="w-6 h-6" />
diff --git a/components/common/posts/PostsTable.tsx b/components/common/posts/PostsTable.tsx
index 080bcb6d..3746c7ae 100644
--- a/components/common/posts/PostsTable.tsx
+++ b/components/common/posts/PostsTable.tsx
@@ -24,23 +24,23 @@ export function PostsTable({
   return (
     <>
       <table className="min-w-full divide-y divide-gray-300">
-        <thead className="bg-gray-50">
+        <thead className="bg-gray-50 dark:bg-slate-800">
           <tr>
             <th
               scope="col"
-              className="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 sm:pl-6"
+              className="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 dark:text-gray-200 sm:pl-6"
             >
               Author
             </th>
             <th
               scope="col"
-              className="hidden px-3 py-3.5 text-left text-sm font-semibold text-gray-900 lg:table-cell"
+              className="hidden px-3 py-3.5 text-left text-sm font-semibold text-gray-900 dark:text-gray-200 lg:table-cell"
             >
               Content
             </th>
             <th
               scope="col"
-              className="hidden px-3 py-3.5 text-left text-sm font-semibold text-gray-900 sm:table-cell"
+              className="hidden px-3 py-3.5 text-left text-sm font-semibold text-gray-900 dark:text-gray-200 sm:table-cell"
             >
               Date
             </th>
@@ -49,7 +49,7 @@ export function PostsTable({
             </th>
           </tr>
         </thead>
-        <tbody className="divide-y divide-gray-200 bg-white">
+        <tbody className="divide-y divide-gray-200 bg-white dark:bg-slate-800">
           {items.map((item, i) => (
             <PostAsRow key={`post-${i}`} item={item} onReport={onReport} />
           ))}
@@ -69,9 +69,9 @@ export function PostAsRow({
 }) {
   return (
     <tr className="align-top">
-      <td className="w-full max-w-0 py-4 pl-4 pr-3 text-sm font-medium text-gray-900 sm:w-auto sm:max-w-none sm:pl-6">
+      <td className="w-full max-w-0 py-4 pl-4 pr-3 text-sm font-medium text-gray-900 dark:text-gray-200 sm:w-auto sm:max-w-none sm:pl-6">
         {isRepost(item.reason) ? (
-          <span className="block text-gray-500">
+          <span className="block text-gray-500 dark:text-gray-50">
             Reposted by{' '}
             <Link href={`/repositories/${item.reason.by.handle}`}>
               @{item.reason.by.handle}
@@ -90,7 +90,7 @@ export function PostAsRow({
             <PostContent item={item} />
           </dd>
           <dt className="sr-only sm:hidden">Date</dt>
-          <dd className="mt-1 truncate text-gray-500 sm:hidden">
+          <dd className="mt-1 truncate text-gray-500 dark:text-gray-50 sm:hidden">
             {new Date(item.post.indexedAt).toLocaleString()}
           </dd>
         </dl>
@@ -99,20 +99,20 @@ export function PostAsRow({
         <PostContent item={item} />
         {/* TODO entities */}
       </td>
-      <td className="hidden px-3 py-4 text-sm text-gray-500 sm:table-cell whitespace-nowrap">
+      <td className="hidden px-3 py-4 text-sm text-gray-500 dark:text-gray-50 sm:table-cell whitespace-nowrap">
         {new Date(item.post.indexedAt).toLocaleString()}
       </td>
       <td className="py-4 pl-3 pr-4 text-right text-sm font-medium sm:pr-6">
         <Link
           href={`/repositories/${item.post.uri.replace('at://', '')}`}
-          className="text-gray-600 hover:text-blue-600 mr-4"
+          className="text-gray-600 dark:text-gray-50 hover:text-blue-600 mr-4"
         >
           View
         </Link>
         <button
           type="button"
           onClick={() => onReport?.(item.post.uri)}
-          className="text-gray-600 hover:text-rose-600"
+          className="text-gray-600 dark:text-gray-50 hover:text-rose-600"
         >
           Report
         </button>
@@ -126,7 +126,7 @@ function PostContent({ item }: { item: AppBskyFeedDefs.FeedViewPost }) {
   return (
     <>
       {item.reply ? (
-        <span className="block text-gray-500 text-sm">
+        <span className="block text-gray-500 dark:text-gray-50 text-sm">
           Reply to{' '}
           <Link
             href={`/repositories/${
@@ -143,7 +143,7 @@ function PostContent({ item }: { item: AppBskyFeedDefs.FeedViewPost }) {
           </Link>
         </span>
       ) : undefined}
-      <span className="block">{(item.post.record as any)?.text}</span>
+      <span className="block dark:text-gray-300">{(item.post.record as any)?.text}</span>
       <PostEmbeds item={item} />
     </>
   )
diff --git a/components/common/useColorScheme.tsx b/components/common/useColorScheme.tsx
new file mode 100644
index 00000000..d203abc6
--- /dev/null
+++ b/components/common/useColorScheme.tsx
@@ -0,0 +1,35 @@
+import { useEffect, useState } from 'react'
+
+export const isDarkModeEnabled = () => {
+  if (typeof window === 'undefined') return false
+  return (
+    localStorage.theme === 'dark' ||
+    (!('theme' in localStorage) &&
+      window.matchMedia('(prefers-color-scheme: dark)').matches)
+  )
+}
+
+export const useColorScheme = () => {
+  const [theme, setTheme] = useState<'light' | 'dark'>('light')
+
+  const addClassName = () => {
+    if (isDarkModeEnabled()) {
+      document.documentElement.classList.add('dark')
+      setTheme('dark')
+    } else {
+      document.documentElement.classList.remove('dark')
+      setTheme('light')
+    }
+  }
+  useEffect(() => {
+    addClassName()
+  }, [])
+
+  return {
+    theme,
+    toggleTheme: () => {
+      localStorage.theme = localStorage.theme === 'dark' ? 'light' : 'dark'
+      addClassName()
+    },
+  }
+}
diff --git a/components/invites/InviteCodesTable.tsx b/components/invites/InviteCodesTable.tsx
index 62cbb1e4..44278d22 100644
--- a/components/invites/InviteCodesTable.tsx
+++ b/components/invites/InviteCodesTable.tsx
@@ -10,12 +10,12 @@ export function InviteCodesTable(props: { codes: InviteCode[] }) {
     <div className="px-4 sm:px-6 lg:px-8">
       <div className="-mx-4 mt-8 overflow-hidden border border-gray-300 sm:-mx-6 md:mx-0 md:rounded-lg">
         <table className="min-w-full divide-y divide-gray-300">
-          <thead className="bg-white">
+          <thead className="bg-white dark:bg-slate-800">
             <ReportRowHead />
           </thead>
-          <tbody className="divide-y divide-gray-200 bg-white">
+          <tbody className="divide-y divide-gray-200 bg-white dark:bg-slate-800">
             {codes.map((code) => (
-              <InviteCodetRow key={code.code} code={code} />
+              <InviteCodeRow key={code.code} code={code} />
             ))}
           </tbody>
         </table>
@@ -24,12 +24,12 @@ export function InviteCodesTable(props: { codes: InviteCode[] }) {
   )
 }
 
-function InviteCodetRow(props: { code: InviteCode }) {
+function InviteCodeRow(props: { code: InviteCode }) {
   const { code, ...others } = props
   const createdAt = new Date(code.createdAt)
   return (
     <tr {...others}>
-      <td className="w-full max-w-0 py-4 pl-4 pr-3 text-sm font-medium text-gray-900 sm:w-auto sm:max-w-none sm:pl-6 sm:hidden">
+      <td className="w-full max-w-0 py-4 pl-4 pr-3 text-sm font-medium text-gray-900 dark:text-gray-200 sm:w-auto sm:max-w-none sm:pl-6 sm:hidden">
         {!code.disabled ? (
           <CheckCircleIcon
             title="Resolved"
@@ -44,14 +44,14 @@ function InviteCodetRow(props: { code: InviteCode }) {
         {code.code}
         <dl className="font-normal">
           <dt className="sr-only">Used by</dt>
-          <dd className="mt-1 truncate text-gray-700">
+          <dd className="mt-1 truncate text-gray-700 dark:text-gray-100">
             {code.uses.length > 0
               ? code.uses.map((use) => truncate(use.usedBy, 10)).join(', ')
               : 'Not used yet'}
           </dd>
         </dl>
       </td>
-      <td className="hidden text-center px-3 py-4 text-sm text-gray-500 sm:table-cell">
+      <td className="hidden text-center px-3 py-4 text-sm text-gray-500 dark:text-gray-50 sm:table-cell">
         {!code.disabled ? (
           <CheckCircleIcon
             title="Resolved"
@@ -64,13 +64,13 @@ function InviteCodetRow(props: { code: InviteCode }) {
           />
         )}
       </td>
-      <td className="hidden px-3 py-4 text-sm text-gray-500 sm:table-cell">
+      <td className="hidden px-3 py-4 text-sm text-gray-500 dark:text-gray-50 sm:table-cell">
         {code.code}
       </td>
-      <td className="hidden px-3 py-4 text-sm text-gray-500 sm:table-cell">
+      <td className="hidden px-3 py-4 text-sm text-gray-500 dark:text-gray-50 sm:table-cell">
         {code.available}
       </td>
-      <td className="hidden px-3 py-4 text-sm text-gray-500 sm:table-cell">
+      <td className="hidden px-3 py-4 text-sm text-gray-500 dark:text-gray-50 sm:table-cell">
         {code.uses.length > 0 ? (
           <ul>
             {code.uses.map((use) => (
@@ -89,12 +89,12 @@ function InviteCodetRow(props: { code: InviteCode }) {
           'Not used yet'
         )}
       </td>
-      <td className="hidden px-3 py-4 text-sm text-gray-500 sm:table-cell">
+      <td className="hidden px-3 py-4 text-sm text-gray-500 dark:text-gray-50 sm:table-cell">
         <span title={createdAt.toLocaleString()}>
           {formatDistanceToNow(createdAt, { addSuffix: true })}
         </span>
       </td>
-      <td className="hidden px-3 py-4 text-sm text-gray-500 sm:table-cell">
+      <td className="hidden px-3 py-4 text-sm text-gray-500 dark:text-gray-50 sm:table-cell">
         {code.createdBy}
       </td>
     </tr>
@@ -106,43 +106,43 @@ function ReportRowHead() {
     <tr>
       <th
         scope="col"
-        className="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 sm:pl-6 sm:hidden"
+        className="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 dark:text-gray-200 sm:pl-6 sm:hidden"
       >
         <span className="sr-only">Id</span>
       </th>
       <th
         scope="col"
-        className="hidden px-3 py-3.5 text-center text-sm font-semibold text-gray-900 sm:table-cell"
+        className="hidden px-3 py-3.5 text-center text-sm font-semibold text-gray-900 dark:text-gray-200 sm:table-cell"
       >
         Enabled
       </th>
       <th
         scope="col"
-        className="hidden px-3 py-3.5 text-left text-sm font-semibold text-gray-900 sm:table-cell"
+        className="hidden px-3 py-3.5 text-left text-sm font-semibold text-gray-900 dark:text-gray-200 sm:table-cell"
       >
         Code
       </th>
       <th
         scope="col"
-        className="hidden px-3 py-3.5 text-left text-sm font-semibold text-gray-900 sm:table-cell"
+        className="hidden px-3 py-3.5 text-left text-sm font-semibold text-gray-900 dark:text-gray-200 sm:table-cell"
       >
         Uses
       </th>
       <th
         scope="col"
-        className="hidden px-3 py-3.5 text-left text-sm font-semibold text-gray-900 sm:table-cell"
+        className="hidden px-3 py-3.5 text-left text-sm font-semibold text-gray-900 dark:text-gray-200 sm:table-cell"
       >
         Used by
       </th>
       <th
         scope="col"
-        className="hidden px-3 py-3.5 text-left text-sm font-semibold text-gray-900 sm:table-cell"
+        className="hidden px-3 py-3.5 text-left text-sm font-semibold text-gray-900 dark:text-gray-200 sm:table-cell"
       >
         Created
       </th>
       <th
         scope="col"
-        className="hidden px-3 py-3.5 text-left text-sm font-semibold text-gray-900 sm:table-cell"
+        className="hidden px-3 py-3.5 text-left text-sm font-semibold text-gray-900 dark:text-gray-200 sm:table-cell"
       >
         Created by
       </th>
diff --git a/components/mod-event/EventItem.tsx b/components/mod-event/EventItem.tsx
index 19b73210..c1cf7e98 100644
--- a/components/mod-event/EventItem.tsx
+++ b/components/mod-event/EventItem.tsx
@@ -21,7 +21,7 @@ const Comment = ({
   }
 }) => {
   return (
-    <div className="shadow bg-white rounded-sm p-2">
+    <div className="shadow dark:shadow-slate-700 bg-white dark:bg-slate-800 rounded-sm p-2">
       <p className="flex justify-between text-gray-500">
         <span>
           By{' '}
@@ -57,7 +57,7 @@ const Email = ({
   }
 }) => {
   return (
-    <div className="shadow bg-white rounded-sm p-2">
+    <div className="shadow dark:shadow-slate-700 bg-white dark:bg-slate-800 rounded-sm p-2">
       <p className="text-gray-500">
         By{' '}
         {modEvent.creatorHandle
@@ -82,7 +82,7 @@ const Report = ({
   const isAppeal =
     modEvent.event.reportType === ComAtprotoModerationDefs.REASONAPPEAL
   return (
-    <div className="shadow bg-white rounded-sm p-2">
+    <div className="shadow dark:shadow-slate-700 bg-white dark:bg-slate-800 rounded-sm p-2">
       <p className="flex justify-between">
         <span>
           By{' '}
@@ -112,7 +112,7 @@ const TakedownOrMute = ({
 }) => {
   const expiresAt = getExpiresAtFromEvent(modEvent)
   return (
-    <div className="shadow bg-white rounded-sm p-2">
+    <div className="shadow dark:shadow-slate-700 bg-white dark:bg-slate-800 rounded-sm p-2">
       <p className="flex justify-between">
         <span>
           By{' '}
@@ -155,7 +155,7 @@ const EventLabels = ({
   if (!labels?.length) return null
   return (
     <LabelList>
-      <span className="text-gray-500">{header}</span>
+      <span className="text-gray-500 dark:text-gray-50">{header}</span>
       {labels.map((label) => {
         const labelGroup = getLabelGroupInfo(unFlagSelfLabel(label))
         return (
@@ -176,7 +176,7 @@ const Label = ({
   } & ComAtprotoAdminDefs.ModEventView
 }) => {
   return (
-    <div className="shadow-sm bg-white rounded-sm p-2">
+    <div className="shadow dark:shadow-slate-700 bg-white dark:bg-slate-800 rounded-sm p-2">
       <p>
         <span>
           By{' '}
diff --git a/components/mod-event/EventList.tsx b/components/mod-event/EventList.tsx
index 8790e765..e388087d 100644
--- a/components/mod-event/EventList.tsx
+++ b/components/mod-event/EventList.tsx
@@ -50,14 +50,16 @@ const Header = ({
         >
           {includeAllUserRecords ? 'Entire account' : subjectTitle}
           <ChevronDownIcon
-            className="text-gray-900 h-4 w-4"
+            className="text-gray-900 dark:text-gray-200 h-4 w-4"
             aria-hidden="true"
           />
         </Dropdown>
       </div>
     )
   }
-  return <h4 className="font-medium text-gray-700">{content}</h4>
+  return (
+    <h4 className="font-medium text-gray-700 dark:text-gray-100">{content}</h4>
+  )
 }
 
 export const ModEventList = (
@@ -105,7 +107,9 @@ export const ModEventList = (
             }}
           />
         ) : (
-          <h4 className="font-medium text-gray-700">Moderation event stream</h4>
+          <h4 className="font-medium text-gray-700 dark:text-gray-100">
+            Moderation event stream
+          </h4>
         )}
         <ActionButton
           size="xs"
@@ -217,11 +221,13 @@ const EventFilterPanel = ({
   }
 
   return (
-    <div className="shadow rounded py-3 px-5 bg-white mt-2">
+    <div className="shadow dark:shadow-slate-700 rounded py-3 px-5 bg-white dark:bg-slate-800 mt-2">
       <div className="flex flex-row">
         <div className="mr-4">
           <div>
-            <h5 className="text-gray-700 font-medium">Event Type</h5>
+            <h5 className="text-gray-700 dark:text-gray-100 font-medium">
+              Event Type
+            </h5>
             <div className="flex flex-row items-center mr-2 mt-2">
               <input
                 id={`type-all`}
@@ -230,7 +236,7 @@ const EventFilterPanel = ({
                 value={'all'}
                 checked={types.length === allTypes.length}
                 onChange={() => toggleType('all')}
-                className="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-600"
+                className="h-4 w-4 rounded border-gray-300 dark:border-teal-300 text-indigo-600 dark:text-teal-600 focus:ring-indigo-600 dark:focus:ring-teal-600"
                 onKeyDown={(e) => {
                   if (e.key === 'Enter') {
                     e.preventDefault() // make sure we don't submit the form
@@ -240,7 +246,7 @@ const EventFilterPanel = ({
               />
               <label
                 htmlFor={`type-all`}
-                className="ml-1 text-sm leading-6 text-gray-700"
+                className="ml-1 text-sm leading-6 text-gray-700 dark:text-gray-100"
               >
                 All
               </label>
@@ -254,7 +260,7 @@ const EventFilterPanel = ({
                   value={type}
                   checked={types.includes(type)}
                   onChange={() => toggleType(type)}
-                  className="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-600"
+                  className="h-4 w-4 rounded border-gray-300 dark:border-teal-300 text-indigo-600 dark:text-teal-600 focus:ring-indigo-600 dark:focus:ring-teal-600"
                   onKeyDown={(e) => {
                     if (e.key === 'Enter') {
                       e.preventDefault() // make sure we don't submit the form
@@ -264,7 +270,7 @@ const EventFilterPanel = ({
                 />
                 <label
                   htmlFor={`type-${type}`}
-                  className="ml-1 text-sm leading-6 text-gray-700"
+                  className="ml-1 text-sm leading-6 text-gray-700 dark:text-gray-100"
                 >
                   {title}
                 </label>
@@ -273,7 +279,9 @@ const EventFilterPanel = ({
           </div>
         </div>
         <div>
-          <h5 className="text-gray-700 font-medium">Comment/Note</h5>
+          <h5 className="text-gray-700 dark:text-gray-100 font-medium">
+            Comment/Note
+          </h5>
 
           <div className="flex flex-row items-center mr-2 mt-2">
             <input
@@ -283,7 +291,7 @@ const EventFilterPanel = ({
               value={`true`}
               checked={commentFilter.enabled}
               onChange={() => toggleCommentFilter()}
-              className="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-600"
+              className="h-4 w-4 rounded border-gray-300 dark:border-teal-300 text-indigo-600 dark:text-teal-600 focus:ring-indigo-600 dark:focus:ring-teal-600"
               onKeyDown={(e) => {
                 if (e.key === 'Enter') {
                   e.preventDefault() // make sure we don't submit the form
@@ -293,7 +301,7 @@ const EventFilterPanel = ({
             />
             <label
               htmlFor={`comment-filter`}
-              className="ml-1 text-sm leading-6 text-gray-700"
+              className="ml-1 text-sm leading-6 text-gray-700 dark:text-gray-100"
             >
               Events with comments
             </label>
@@ -406,7 +414,9 @@ const EventFilterPanel = ({
         </div>
       </div>
       <div>
-        <h5 className="text-gray-700 font-medium my-2">Sort Direction</h5>
+        <h5 className="text-gray-700 dark:text-gray-100 font-medium my-2">
+          Sort Direction
+        </h5>
 
         <Checkbox
           id="sortDirection"
diff --git a/components/mod-event/ItemTitle.tsx b/components/mod-event/ItemTitle.tsx
index 7d4a65d4..fad22845 100644
--- a/components/mod-event/ItemTitle.tsx
+++ b/components/mod-event/ItemTitle.tsx
@@ -68,7 +68,7 @@ export const ItemTitle = ({
   }
 
   return (
-    <div className="text-gray-500 flex flex-row justify-between">
+    <div className="text-gray-500 dark:text-gray-50 flex flex-row justify-between">
       <p>
         <span className={eventColor}>{eventTitle}</span>
         <i>
diff --git a/components/mod-event/SelectorButton.tsx b/components/mod-event/SelectorButton.tsx
index 14748751..aae6df95 100644
--- a/components/mod-event/SelectorButton.tsx
+++ b/components/mod-event/SelectorButton.tsx
@@ -90,7 +90,7 @@ export const ModEventSelectorButton = ({
   ])
   return (
     <Dropdown
-      className="inline-flex justify-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 shadow-sm hover:bg-gray-50"
+      className="inline-flex justify-center rounded-md border border-gray-300 dark:border-teal-500 bg-white dark:bg-slate-800 dark:text-gray-100 dark:focus:border-teal-500  dark px-4 py-2 text-sm font-medium text-gray-700 shadow-sm hover:bg-gray-50 dark:hover:bg-slate-700"
       items={availableActions.map(({ key, text }) => ({
         text,
         onClick: () => setSelectedAction(key),
diff --git a/components/mod-event/View.tsx b/components/mod-event/View.tsx
index e03e711f..4e692154 100644
--- a/components/mod-event/View.tsx
+++ b/components/mod-event/View.tsx
@@ -48,7 +48,7 @@ export function EventView({ event }: { event: GetEvent.OutputSchema }) {
     ) : null
 
   return (
-    <div className="flex h-full bg-white">
+    <div className="flex h-full bg-white dark:bg-slate-900">
       <div className="flex min-w-0 flex-1 flex-col overflow-hidden">
         <div className="relative z-0 flex flex-1 overflow-hidden">
           <main className="relative z-0 flex-1 overflow-y-auto focus:outline-none xl:order-last">
@@ -58,10 +58,10 @@ export function EventView({ event }: { event: GetEvent.OutputSchema }) {
             >
               <Link
                 href={'/'}
-                className="inline-flex items-center space-x-3 text-sm font-medium text-gray-900"
+                className="inline-flex items-center space-x-3 text-sm font-medium text-gray-900 dark:text-gray-200"
               >
                 <ChevronLeftIcon
-                  className="-ml-2 h-5 w-5 text-gray-400"
+                  className="-ml-2 h-5 w-5 text-gray-400 dark:text-gray-50"
                   aria-hidden="true"
                 />
                 <span>{'Moderation Queue'}</span>
@@ -117,8 +117,8 @@ function Tabs({
     <span
       className={classNames(
         view === currentView
-          ? 'border-pink-500 text-gray-900'
-          : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300',
+        ? 'border-pink-500 dark:border-teal-400 text-gray-900 dark:text-teal-500'
+        : 'border-transparent text-gray-500 dark:text-gray-50 hover:text-gray-700 dark:hover:text-teal-200 hover:border-gray-300 dark:hover:border-teal-300',
         'whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm cursor-pointer',
       )}
       aria-current={view === currentView ? 'page' : undefined}
@@ -180,14 +180,14 @@ function Details({ event }: { event: GetEvent.OutputSchema }) {
         )}
       </dl>
 
-      <dt className="text-sm font-medium text-gray-500 mb-3">Created By:</dt>
+      <dt className="text-sm font-medium text-gray-500 dark:text-gray-50 mb-3">Created By:</dt>
       {createdBy && (
         <div className="rounded border-2 border-dashed border-gray-300 p-2 pb-1 mb-3">
           <RepoCard did={createdBy} />
         </div>
       )}
 
-      <dt className="text-sm font-medium text-gray-500 mb-3">Subject:</dt>
+      <dt className="text-sm font-medium text-gray-500 dark:text-gray-50 mb-3">Subject:</dt>
       {(ComAtprotoAdminDefs.isRecordView(subject) ||
         ComAtprotoAdminDefs.isRecordViewNotFound(subject)) && (
         <div className="rounded border-2 border-dashed border-gray-300 p-2 pb-0 mb-3">
@@ -217,11 +217,11 @@ const Header = ({
   return (
     <div className="flex flex-col sm:flex-row mx-auto space-y-6 sm:space-x-4 sm:space-y-0 max-w-5xl px-4 sm:px-6 lg:px-8 justify-between">
       <div>
-        <h1 className="flex text-2xl font-bold text-gray-900 align-middle">
+        <h1 className="flex text-2xl font-bold text-gray-900 dark:text-gray-200 align-middle">
           {icon}
           <span className="ml-1">{title}</span>
         </h1>
-        <h2 className="flex-1 text-l text-gray-700">{subTitle}</h2>
+        <h2 className="flex-1 text-l text-gray-700 dark:text-gray-100">{subTitle}</h2>
       </div>
     </div>
   )
diff --git a/components/reports/SubjectOverview.tsx b/components/reports/SubjectOverview.tsx
index bad98678..de32fb7d 100644
--- a/components/reports/SubjectOverview.tsx
+++ b/components/reports/SubjectOverview.tsx
@@ -23,7 +23,7 @@ const OtherReportsForAuthorLink = ({
       prefetch={false}
       href={{ pathname, search: newUrl.toString() }}
       className={classNames(
-        'text-gray-600 hover:text-gray-900 font-medium',
+        'text-gray-600 hover:text-gray-900 dark:text-gray-100 dark:hover:text-gray-200 font-medium',
         className,
       )}
     >
@@ -55,7 +55,7 @@ const CollectionLink = ({
       <Link
         prefetch={false}
         href={{ pathname, search: newUrl.toString() }}
-        className="text-gray-600 hover:text-gray-900 font-medium mr-1"
+        className="text-gray-600 hover:text-gray-900 dark:text-gray-100 dark:hover:text-gray-300 font-medium mr-1"
       >
         {collectionName}
       </Link>
diff --git a/components/repositories/AccountView.tsx b/components/repositories/AccountView.tsx
index 013b3a92..b7d8bff5 100644
--- a/components/repositories/AccountView.tsx
+++ b/components/repositories/AccountView.tsx
@@ -39,9 +39,10 @@ import { DataField } from '@/common/DataField'
 import { ProfileAvatar } from './ProfileAvatar'
 import { DidHistory } from './DidHistory'
 import { ModEventList } from '@/mod-event/EventList'
-import { ButtonGroup, LinkButton } from '@/common/buttons'
+import { ActionButton, ButtonGroup, LinkButton } from '@/common/buttons'
 import { SubjectReviewStateBadge } from '@/subject/ReviewStateMarker'
 import { usePathname, useRouter, useSearchParams } from 'next/navigation'
+import { EmptyDataset } from '@/common/feeds/EmptyFeed'
 
 enum Views {
   Details,
@@ -107,7 +108,7 @@ export function AccountView({
   }, [repo, reportUri])
 
   return (
-    <div className="flex h-full bg-white">
+    <div className="flex h-full bg-white dark:bg-slate-900">
       <ReportPanel
         open={!!reportUri}
         onClose={() => setReportUri(undefined)}
@@ -123,7 +124,7 @@ export function AccountView({
             >
               <Link
                 href="/repositories"
-                className="inline-flex items-center space-x-3 text-sm font-medium text-gray-900"
+                className="inline-flex items-center space-x-3 text-sm font-medium text-gray-900 dark:text-gray-200"
               >
                 <ChevronLeftIcon
                   className="-ml-2 h-5 w-5 text-gray-400"
@@ -242,7 +243,7 @@ function Header({
           </div>
           <div className="mt-6 sm:flex sm:min-w-0 sm:flex-1 sm:items-center sm:justify-end sm:space-x-6 sm:pb-1">
             <div className="mt-6 min-w-0 flex-1 sm:hidden 2xl:block">
-              <h1 className="truncate text-2xl font-bold text-gray-900">
+              <h1 className="truncate text-2xl font-bold text-gray-900 dark:text-gray-200">
                 <a
                   href={buildBlueSkyAppUrl({
                     did: repo?.did || profile?.did || '',
@@ -272,7 +273,7 @@ function Header({
                     repo.emailConfirmedAt
                       ? 'border-green-600'
                       : 'border-gray-300'
-                  } bg-white px-4 py-2 text-sm font-medium text-gray-700 shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-pink-500 focus:ring-offset-2`}
+                  } bg-white dark:bg-slate-800 px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-100 shadow-sm hover:bg-gray-50 dark:hover:bg-slate-700 focus:outline-none focus:ring-2 focus:ring-pink-500 focus:ring-offset-2`}
                 >
                   <EnvelopeIcon
                     className={`-ml-1 mr-2 h-5 w-5  ${
@@ -285,7 +286,7 @@ function Header({
               )}
               {!!reportOptions.length && (
                 <Dropdown
-                  className="inline-flex justify-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-pink-500 focus:ring-offset-2"
+                  className="inline-flex justify-center rounded-md border border-gray-300 bg-white dark:bg-slate-800 px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-100 shadow-sm hover:bg-gray-50 dark:hover:bg-slate-700 focus:outline-none focus:ring-2 focus:ring-pink-500 focus:ring-offset-2"
                   items={reportOptions}
                 >
                   <ExclamationCircleIcon
@@ -299,7 +300,7 @@ function Header({
           </div>
         </div>
         <div className="mt-6 hidden min-w-0 flex-1 sm:block 2xl:hidden">
-          <h1 className="truncate text-2xl font-bold text-gray-900">
+          <h1 className="truncate text-2xl font-bold text-gray-900 dark:text-gray-200">
             <a
               href={buildBlueSkyAppUrl({
                 did: repo?.did || profile?.did || '',
@@ -341,8 +342,8 @@ function Tabs({
     <span
       className={classNames(
         view === currentView
-          ? 'border-pink-500 text-gray-900'
-          : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300',
+          ? 'border-pink-500 dark:border-teal-400 text-gray-900 dark:text-teal-500'
+          : 'border-transparent text-gray-500 dark:text-gray-50 hover:text-gray-700 dark:hover:text-teal-200 hover:border-gray-300 dark:hover:border-teal-300',
         'whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm cursor-pointer',
       )}
       aria-current={view === currentView ? 'page' : undefined}
@@ -436,8 +437,10 @@ function Details({
         />
         {profile?.description && (
           <div className="sm:col-span-2">
-            <dt className="text-sm font-medium text-gray-500">Description</dt>
-            <dd className="mt-1 max-w-prose space-y-5 text-sm text-gray-900">
+            <dt className="text-sm font-medium text-gray-500 dark:text-gray-50">
+              Description
+            </dt>
+            <dd className="mt-1 max-w-prose space-y-5 text-sm text-gray-900 dark:text-gray-200">
               {profile.description}
             </dd>
           </div>
@@ -581,30 +584,36 @@ function Invites({ repo }: { repo: GetRepo.OutputSchema }) {
     <div>
       <div className="mx-auto mt-8 max-w-5xl px-4 sm:px-6 lg:px-8">
         <div className="mb-10">
-          <button
-            type="button"
-            className="sm:flex-1 inline-flex justify-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-pink-500 focus:ring-offset-2"
-            onClick={onClickRevoke}
-          >
+          <ActionButton appearance="primary" onClick={onClickRevoke}>
             <XCircleIcon
               className="-ml-1 mr-2 h-5 w-5 text-gray-400"
               aria-hidden="true"
             />
             <span>Revoke unused invite codes</span>
-          </button>
+          </ActionButton>
         </div>
-        <h3 className="text-xl font-medium text-black">Invited users</h3>
+        <h3 className="text-xl font-medium text-black dark:text-gray-200">
+          Invited users
+        </h3>
       </div>
-      <AccountsGrid
-        error={String(error ?? '')}
-        accounts={invitedUsers?.profiles}
-      />
+      {!invitedUsers?.length ? (
+        <EmptyDataset message="No invited users found" />
+      ) : (
+        <AccountsGrid
+          error={String(error ?? '')}
+          accounts={invitedUsers?.profiles}
+        />
+      )}
       <div className="mx-auto mt-8 max-w-5xl px-4 sm:px-6 lg:px-8">
-        <h3 className="text-xl font-medium text-black">Invite codes</h3>
+        <h3 className="text-xl font-medium text-black dark:text-gray-200">
+          Invite codes
+        </h3>
       </div>
       <div className="mb-20">
-        {Array.isArray(repo.invites) && (
+        {!!repo.invites?.length ? (
           <InviteCodesTable codes={repo.invites} />
+        ) : (
+          <EmptyDataset message="No invite codes found" />
         )}
       </div>
     </div>
@@ -632,7 +641,7 @@ export function AccountsGrid({
         {accounts.map((account) => (
           <div
             key={account.handle}
-            className="relative flex items-center space-x-3 rounded-lg border border-gray-300 bg-white px-6 py-5 shadow-sm focus-within:ring-2 focus-within:ring-pink-500 focus-within:ring-offset-2 hover:border-gray-400"
+            className="relative flex items-center space-x-3 rounded-lg border border-gray-300 dark:border-slate-700 bg-white dark:bg-slate-800 px-6 py-5 shadow-sm dark:shadow-slate-800 focus-within:ring-2 focus-within:ring-pink-500 focus-within:ring-teal-500 focus-within:ring-offset-2 hover:border-gray-400 dark:hover:border-slate-700"
           >
             <div className="flex-shrink-0">
               <ProfileAvatar
@@ -646,10 +655,10 @@ export function AccountsGrid({
                 className="focus:outline-none"
               >
                 <span className="absolute inset-0" aria-hidden="true" />
-                <p className="text-sm font-medium text-gray-900">
+                <p className="text-sm font-medium text-gray-900 dark:text-gray-200">
                   {account.displayName || `@${account.handle}`}
                 </p>
-                <p className="truncate text-sm text-gray-500">
+                <p className="truncate text-sm text-gray-500 dark:text-gray-50">
                   @{account.handle}
                 </p>
               </Link>
@@ -671,7 +680,7 @@ export const EventsView = ({ did }: { did: string }) => {
 
   return (
     <div>
-      <div className="bg-white border-b border-gray-200 py-2 px-4 sm:flex sm:items-center sm:justify-between sticky top-0">
+      <div className="bg-white dark:bg-slate-900 border-b border-gray-200 dark:border-gray-500 py-2 px-4 sm:flex sm:items-center sm:justify-between sticky top-0 dark">
         <div />
 
         <div className="sm:flex mt-3 sm:mt-0 sm:ml-4">
@@ -697,7 +706,7 @@ export const EventsView = ({ did }: { did: string }) => {
           />
         </div>
       </div>
-      <div className="pt-4 max-w-3xl w-full mx-auto">
+      <div className="pt-4 max-w-3xl w-full mx-auto dark:text-gray-100">
         <ModEventList
           {...(currentView === EventViews.ByUser
             ? { createdBy: did }
diff --git a/components/repositories/BlobsTable.tsx b/components/repositories/BlobsTable.tsx
index c8bfba24..15b47e35 100644
--- a/components/repositories/BlobsTable.tsx
+++ b/components/repositories/BlobsTable.tsx
@@ -10,10 +10,10 @@ export function BlobsTable(props: { blobs: ComAtprotoAdminDefs.BlobView[] }) {
     <div className="px-4 sm:px-6 lg:px-8">
       <div className="-mx-4 mt-8 overflow-hidden border border-gray-300 sm:-mx-6 md:mx-0 md:rounded-lg">
         <table className="min-w-full divide-y divide-gray-300">
-          <thead className="bg-white">
+          <thead className="bg-white dark:bg-slate-800">
             <BlobRowHead />
           </thead>
-          <tbody className="divide-y divide-gray-200 bg-white">
+          <tbody className="divide-y divide-gray-200 bg-white dark:bg-slate-800">
             {blobs.map((blob) => (
               <BlobRow key={blob.cid} blob={blob} />
             ))}
@@ -31,10 +31,10 @@ function BlobRow(props: { blob: ComAtprotoAdminDefs.BlobView }) {
 
   return (
     <tr {...others}>
-      <td className="py-4 pl-4 pr-3 text-sm font-medium text-gray-900 text-ellipsis overflow-hidden max-w-xs">
+      <td className="py-4 pl-4 pr-3 text-sm font-medium text-gray-900 dark:text-gray-200 text-ellipsis overflow-hidden max-w-xs">
         {blob.cid}
       </td>
-      <td className="px-3 py-4 text-sm text-gray-500">
+      <td className="px-3 py-4 text-sm text-gray-500 dark:text-gray-50">
         <Chip>{blob.mimeType}</Chip>
         <Chip>{formatBytes(blob.size)}</Chip>
         {(ComAtprotoAdminDefs.isImageDetails(blob.details) ||
@@ -44,7 +44,7 @@ function BlobRow(props: { blob: ComAtprotoAdminDefs.BlobView }) {
           </Chip>
         )}
       </td>
-      <td className="px-3 py-4 text-sm text-gray-500">
+      <td className="px-3 py-4 text-sm text-gray-500 dark:text-gray-50">
         <span title={createdAt.toLocaleString()}>
           {formatDistanceToNow(createdAt, { addSuffix: true })}
         </span>
@@ -66,19 +66,19 @@ function BlobRowHead() {
     <tr>
       <th
         scope="col"
-        className="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 sm:pl-6"
+        className="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 dark:text-gray-200 sm:pl-6"
       >
         CID
       </th>
       <th
         scope="col"
-        className="hidden px-3 py-3.5 text-left text-sm font-semibold text-gray-900 lg:table-cell"
+        className="hidden px-3 py-3.5 text-left text-sm font-semibold text-gray-900 dark:text-gray-200 lg:table-cell"
       >
         Details
       </th>
       <th
         scope="col"
-        className="hidden px-3 py-3.5 text-left text-sm font-semibold text-gray-900 lg:table-cell"
+        className="hidden px-3 py-3.5 text-left text-sm font-semibold text-gray-900 dark:text-gray-200 lg:table-cell"
       >
         Created
       </th>
diff --git a/components/repositories/InviteCodeGenerationStatus.tsx b/components/repositories/InviteCodeGenerationStatus.tsx
index 541b9f6b..3a71a7eb 100644
--- a/components/repositories/InviteCodeGenerationStatus.tsx
+++ b/components/repositories/InviteCodeGenerationStatus.tsx
@@ -111,16 +111,16 @@ export const InviteCodeGenerationStatus = ({
                 leaveFrom="opacity-100 scale-100"
                 leaveTo="opacity-0 scale-95"
               >
-                <Dialog.Panel className="w-full max-w-md transform overflow-hidden rounded-2xl bg-white p-6 text-left align-middle shadow-xl transition-all">
+                <Dialog.Panel className="w-full max-w-md transform overflow-hidden rounded-2xl bg-white dark:bg-slate-800 p-6 text-left align-middle shadow-xl dark:shadow-xs dark:shadow-slate-900 transition-all">
                   <Dialog.Title
                     as="h3"
-                    className="text-lg font-medium leading-6 text-gray-900"
+                    className="text-lg font-medium leading-6 text-gray-900 dark:text-gray-50"
                   >
                     {invitesDisabled ? 'Enable' : 'Disable'} invite code
                     generation?
                   </Dialog.Title>
 
-                  <Dialog.Description className="text-gray-600 mt-4">
+                  <Dialog.Description className="text-gray-600 dark:text-gray-200 mt-4">
                     This will {invitesDisabled ? 'enable' : 'stop'} invite code
                     generation for this user.
                     <br />
@@ -207,14 +207,14 @@ export const InviteCodeGenerationStatus = ({
         </Dialog>
       </Transition>
       <div className="sm:col-span-1">
-        <dt className="text-sm font-medium text-gray-500">
+        <dt className="text-sm font-medium text-gray-500 dark:text-gray-50">
           Invite Code Generation
         </dt>
-        <dd className="mt-1 text-sm text-gray-900" title={currentStatus}>
+        <dd className="mt-1 text-sm text-gray-900 dark:text-gray-200" title={currentStatus}>
           <button onClick={() => setIsDialogOpen(true)}>
             <LabelChip
               className={`ml-0 text-white ${
-                invitesDisabled ? 'bg-rose-600' : 'bg-green-400'
+                invitesDisabled ? 'bg-rose-600' : 'bg-green-400 dark:bg-lime-400'
               }`}
             >
               {currentStatus}
diff --git a/components/repositories/RecordView.tsx b/components/repositories/RecordView.tsx
index 7824bef0..51a41589 100644
--- a/components/repositories/RecordView.tsx
+++ b/components/repositories/RecordView.tsx
@@ -54,7 +54,7 @@ export function RecordView({
 }) {
   const [currentView, setCurrentView] = useState(Views.Details)
   return (
-    <div className="flex h-full bg-white">
+    <div className="flex h-full bg-white dark:bg-slate-900">
       <div className="flex min-w-0 flex-1 flex-col overflow-hidden">
         <div className="relative z-0 flex flex-1 overflow-hidden">
           <main className="relative z-0 flex-1 overflow-y-auto focus:outline-none xl:order-last">
@@ -64,7 +64,7 @@ export function RecordView({
             >
               <Link
                 href={`/repositories/${record.repo.handle}`}
-                className="inline-flex items-center space-x-3 text-sm font-medium text-gray-900"
+                className="inline-flex items-center space-x-3 text-sm font-medium text-gray-900 dark:text-gray-200"
               >
                 <ChevronLeftIcon
                   className="-ml-2 h-5 w-5 text-gray-400"
@@ -100,7 +100,7 @@ export function RecordView({
                     <Blobs blobs={record.blobs} />
                   )}
                   {currentView === Views.ModEvents && (
-                    <div className="flex flex-col mx-auto mt-6 max-w-5xl px-4 sm:px-6 lg:px-8 text-gray-500 text-sm">
+                    <div className="flex flex-col mx-auto mt-6 max-w-5xl px-4 sm:px-6 lg:px-8 text-gray-500 dark:text-gray-50 text-sm">
                       <ModEventList subject={record.uri} />
                     </div>
                   )}
@@ -135,7 +135,7 @@ function Header({
   const { subjectStatus } = record.moderation
   return (
     <div className="flex flex-col sm:flex-row mx-auto space-y-6 sm:space-x-4 sm:space-y-0 max-w-5xl px-4 sm:px-6 lg:px-8">
-      <h1 className="flex-1 text-2xl font-bold text-gray-900">
+      <h1 className="flex-1 text-2xl font-bold text-gray-900 dark:text-gray-200">
         {`${shortCollection} record by @${record.repo.handle}`}{' '}
         {!!subjectStatus && (
           <ReviewStateIconLink
@@ -146,7 +146,7 @@ function Header({
       </h1>
       <div>
         <Dropdown
-          className="inline-flex justify-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-pink-500 focus:ring-offset-2"
+          className="inline-flex justify-center rounded-md border border-gray-300 bg-white dark:bg-slate-900 px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-100 shadow-sm hover:bg-gray-50 dark:hover:bg-slate-700 focus:outline-none focus:ring-2 focus:ring-pink-500 dark:focus:ring-teal-500 focus:ring-offset-2"
           items={[
             {
               text: `Report ${shortCollection || 'post'}`,
@@ -199,8 +199,8 @@ function Tabs({
     <span
       className={classNames(
         view === currentView
-          ? 'border-pink-500 text-gray-900'
-          : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300',
+          ? 'border-pink-500 dark:border-teal-400 text-gray-900 dark:text-teal-500'
+          : 'border-transparent text-gray-500 dark:text-gray-50 hover:text-gray-700 dark:hover:text-teal-200 hover:border-gray-300dark:hover:border-teal-300',
         'whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm cursor-pointer',
       )}
       aria-current={view === currentView ? 'page' : undefined}
diff --git a/components/repositories/RepositoriesTable.tsx b/components/repositories/RepositoriesTable.tsx
index f29aeb2d..4dfab299 100644
--- a/components/repositories/RepositoriesTable.tsx
+++ b/components/repositories/RepositoriesTable.tsx
@@ -17,10 +17,10 @@ export function RepositoriesTable(props: {
     <div className="px-4 sm:px-6 lg:px-8">
       <div className="-mx-4 mt-8 overflow-hidden border border-gray-300 sm:-mx-6 md:mx-0 md:rounded-lg">
         <table className="min-w-full divide-y divide-gray-300">
-          <thead className="bg-white">
+          <thead className="bg-white dark:bg-slate-800">
             <RepoRowHead />
           </thead>
-          <tbody className="divide-y divide-gray-200 bg-white">
+          <tbody className="divide-y divide-gray-200 bg-white dark:bg-slate-800">
             {!!repos?.length ? (
               repos.map((repo) => <RepoRow key={repo.did} repo={repo} />)
             ) : (
@@ -28,7 +28,7 @@ export function RepositoriesTable(props: {
                 <td colSpan={4}>
                   <div className="flex flex-col items-center py-10">
                     <UserGroupIcon className="h-10 w-10" />
-                    <p className="text-gray-500 text-base">
+                    <p className="text-gray-500 dark:text-gray-50 text-base">
                       {showEmptySearch
                         ? `Please insert a full or partial handle in the search box above to see matching repositories`
                         : `No repositories found!`}
@@ -60,20 +60,20 @@ function RepoRow(props: { repo: Repo }) {
       <td className="w-full max-w-0 py-4 pl-4 pr-3 text-sm font-medium text-gray-900 sm:w-auto sm:max-w-none sm:pl-6">
         <Link
           href={`/repositories/${repo.handle}`}
-          className="text-indigo-600 hover:text-indigo-900"
+          className="text-indigo-600 hover:text-indigo-900 dark:text-teal-400 dark:hover:text-teal-600"
         >
           {repo.handle}
         </Link>
         <dl className="font-normal lg:hidden">
           <dt className="sr-only">Name</dt>
-          <dd className="mt-1 truncate text-gray-700">{displayName}</dd>
+          <dd className="mt-1 truncate text-gray-700 dark:text-gray-100">{displayName}</dd>
           <dt className="sr-only sm:hidden">Type</dt>
         </dl>
       </td>
-      <td className="hidden px-3 py-4 text-sm text-gray-500 lg:table-cell">
+      <td className="hidden px-3 py-4 text-sm text-gray-500 dark:text-gray-50 lg:table-cell">
         {displayName}
       </td>
-      <td className="hidden px-3 py-4 text-sm text-gray-500 lg:table-cell">
+      <td className="hidden px-3 py-4 text-sm text-gray-500 dark:text-gray-50 lg:table-cell">
         <span title={indexedAt.toLocaleString()}>
           {formatDistanceToNow(indexedAt, { addSuffix: true })}
         </span>
@@ -95,19 +95,19 @@ function RepoRowHead() {
     <tr>
       <th
         scope="col"
-        className="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 sm:pl-6"
+        className="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 dark:text-gray-200 sm:pl-6"
       >
         Handle
       </th>
       <th
         scope="col"
-        className="hidden px-3 py-3.5 text-left text-sm font-semibold text-gray-900 lg:table-cell"
+        className="hidden px-3 py-3.5 text-left text-sm font-semibold text-gray-900 dark:text-gray-200 lg:table-cell"
       >
         Name
       </th>
       <th
         scope="col"
-        className="hidden px-3 py-3.5 text-left text-sm font-semibold text-gray-900 lg:table-cell"
+        className="hidden px-3 py-3.5 text-left text-sm font-semibold text-gray-900 dark:text-gray-200 lg:table-cell"
       >
         Indexed
       </th>
diff --git a/components/shell/CommandPalette/Root.tsx b/components/shell/CommandPalette/Root.tsx
index 8f22a237..41e39031 100644
--- a/components/shell/CommandPalette/Root.tsx
+++ b/components/shell/CommandPalette/Root.tsx
@@ -51,10 +51,10 @@ export const CommandPaletteRoot = ({
     <KBarProvider actions={staticActions}>
       <KBarPortal>
         <KBarPositioner className="p-2 bg-gray-900/80 flex items-center pb-4 z-20">
-          <KBarAnimator className="w-full md:w-2/3 lg:w-1/2 w-max-[600px] overflow-hidden p-2 bg-white rounded-xl">
+          <KBarAnimator className="w-full md:w-2/3 lg:w-1/2 w-max-[600px] overflow-hidden p-2 bg-white dark:bg-slate-800 rounded-xl">
             <KBarSearch
               defaultPlaceholder="Search by DID, bsky url or handle"
-              className="flex px-4 w-full h-16 outline-none"
+              className="flex px-4 w-full h-16 outline-none dark:bg-slate-800 dark:text-gray-100"
             />
             <SearchResults />
             <div className="pb-3" />
diff --git a/components/shell/LoginModal.tsx b/components/shell/LoginModal.tsx
index d165b05e..b7a85d5f 100644
--- a/components/shell/LoginModal.tsx
+++ b/components/shell/LoginModal.tsx
@@ -20,15 +20,15 @@ export function LoginModal() {
   const [password, setPassword] = useState('')
   const [adminToken, setAdminToken] = useState('')
 
-  const submitButtonClassNames = `group relative flex w-full justify-center rounded-md border border-transparent py-2 px-4 text-sm font-medium text-white focus:outline-none focus:ring-2 focus:ring-rose-500 focus:ring-offset-2 ${
+  const submitButtonClassNames = `group relative flex w-full justify-center rounded-md border border-transparent py-2 px-4 text-sm font-medium text-white focus:outline-none focus:ring-2 focus:ring-rose-500 dark:focus:ring-slate-500 focus:ring-offset-2 ${
     isValidatingAuth
       ? 'bg-gray-500 hover:bg-gray-600'
-      : 'bg-rose-600 hover:bg-rose-700'
+      : 'bg-rose-600 bg-teal-600 hover:bg-rose-700 dark:hover:bg-teal-700'
   }`
   const submitButtonIconClassNames = `h-5 w-5 ${
     isValidatingAuth
       ? 'text-gray-800 group-hover:text-gray-700'
-      : 'text-rose-500 group-hover:text-rose-400'
+      : 'text-rose-500 dark:text-gray-50 group-hover:text-rose-400 dark:group-hover:text-gray-100'
   }`
 
   useEffect(() => {
@@ -70,8 +70,8 @@ export function LoginModal() {
   }
   return (
     <div className="fixed inset-0 z-20 overflow-y-auto">
-      <div className="flex min-h-full items-center justify-center bg-gradient-to-b from-rose-600 to-rose-800">
-        <div className="relative transform overflow-hidden rounded-lg bg-white px-4 pt-5 pb-4 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-sm sm:p-6">
+      <div className="flex min-h-full items-center justify-center bg-gradient-to-b from-rose-600 to-rose-800 dark:from-slate-700 dark:to-slate-900">
+        <div className="relative transform overflow-hidden rounded-lg bg-white dark:bg-slate-700 px-4 pt-5 pb-4 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-sm sm:p-6">
           <div>
             <Image
               className="mx-auto h-20 w-auto"
@@ -81,10 +81,10 @@ export function LoginModal() {
               width={200}
               height={200}
             />
-            <h2 className="mt-6 text-center text-3xl font-bold tracking-tight text-gray-900">
+            <h2 className="mt-6 text-center text-3xl font-bold tracking-tight text-gray-900 dark:text-gray-200">
               Bluesky Admin Tools
             </h2>
-            <p className="mt-2 text-center text-sm text-gray-600">
+            <p className="mt-2 text-center text-sm text-gray-600 dark:text-gray-100">
               Sign into your account
             </p>
           </div>
@@ -101,7 +101,7 @@ export function LoginModal() {
                   type="text"
                   required
                   disabled={isValidatingAuth}
-                  className="relative block w-full appearance-none rounded-none rounded-t-md border border-gray-300 px-3 py-2 text-gray-900 placeholder-gray-500 focus:z-10 focus:border-rose-500 focus:outline-none focus:ring-rose-500 sm:text-sm"
+                  className="relative block w-full appearance-none rounded-none rounded-t-md border border-gray-300 dark:border-slate-600 px-3 py-2 dark:bg-slate-800 text-gray-900 dark:text-gray-200 placeholder-gray-500 focus:z-10 focus:border-rose-500 focus:outline-none focus:ring-rose-500 dark:focus:ring-slate-500 sm:text-sm"
                   placeholder="Service URL"
                   list="service-url-suggestions"
                   value={service}
@@ -122,7 +122,7 @@ export function LoginModal() {
                   type="text"
                   required
                   disabled={isValidatingAuth}
-                  className="relative block w-full appearance-none rounded-none border border-gray-300 px-3 py-2 text-gray-900 placeholder-gray-500 focus:z-10 focus:border-rose-500 focus:outline-none focus:ring-rose-500 sm:text-sm"
+                  className="relative block w-full appearance-none rounded-none border border-gray-300 dark:border-slate-600 px-3 py-2 dark:bg-slate-800 text-gray-900 dark:text-gray-200 placeholder-gray-500 focus:z-10 focus:border-rose-500 focus:outline-none focus:ring-rose-500 dark:focus:ring-slate-500 sm:text-sm"
                   placeholder="Account handle"
                   value={handle}
                   onChange={(e) => setHandle(e.target.value)}
@@ -139,7 +139,7 @@ export function LoginModal() {
                   autoComplete="current-password"
                   required
                   disabled={isValidatingAuth}
-                  className="relative block w-full appearance-none rounded-none border border-gray-300 px-3 py-2 text-gray-900 placeholder-gray-500 focus:z-10 focus:border-rose-500 focus:outline-none focus:ring-rose-500 sm:text-sm"
+                  className="relative block w-full appearance-none rounded-none border border-gray-300 dark:border-slate-600 px-3 py-2 dark:bg-slate-800 text-gray-900 dark:text-gray-200 placeholder-gray-500 focus:z-10 focus:border-rose-500 focus:outline-none focus:ring-rose-500 dark:focus:ring-slate-500 sm:text-sm"
                   placeholder="Password"
                   value={password}
                   onChange={(e) => setPassword(e.target.value)}
@@ -155,7 +155,7 @@ export function LoginModal() {
                   type="password"
                   required
                   disabled={isValidatingAuth}
-                  className="relative block w-full appearance-none rounded-none rounded-b-md border border-gray-300 px-3 py-2 text-gray-900 placeholder-gray-500 focus:z-10 focus:border-rose-500 focus:outline-none focus:ring-rose-500 sm:text-sm"
+                  className="relative block w-full appearance-none rounded-none rounded-b-md border border-gray-300 dark:border-slate-600 px-3 py-2 dark:bg-slate-800 text-gray-900 dark:text-gray-200 placeholder-gray-500 focus:z-10 focus:border-rose-500 focus:outline-none focus:ring-rose-500 dark:focus:ring-slate-500 sm:text-sm"
                   placeholder="Admin Token"
                   value={adminToken}
                   onChange={(e) => setAdminToken(e.target.value)}
diff --git a/components/shell/ProfileMenu.tsx b/components/shell/ProfileMenu.tsx
index 14729b0e..522c7677 100644
--- a/components/shell/ProfileMenu.tsx
+++ b/components/shell/ProfileMenu.tsx
@@ -70,9 +70,9 @@ export function ProfileMenu() {
       {/* Profile dropdown */}
       <Menu as="div" className="relative flex-shrink-0">
         <div>
-          <Menu.Button className="flex rounded-full bg-white text-sm items-center focus:outline-none focus:ring-2 focus:ring-rose-500 focus:ring-offset-2">
+          <Menu.Button className="flex rounded-full bg-white dark:bg-slate-900 text-sm items-center focus:outline-none focus:ring-2 focus:ring-rose-500 focus:ring-offset-2">
             <span className="sr-only">Open user menu</span>
-            <span className="hidden md:inline mr-2 font-semibold text-base text-gray-600">
+            <span className="hidden md:inline mr-2 font-semibold text-base text-gray-600 dark:text-gray-100">
               {handle || ''}
             </span>
             <img
@@ -91,14 +91,14 @@ export function ProfileMenu() {
           leaveFrom="transform opacity-100 scale-100"
           leaveTo="transform opacity-0 scale-95"
         >
-          <Menu.Items className="absolute right-0 z-10 mt-2 w-48 origin-top-right rounded-md bg-white py-1 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
+          <Menu.Items className="absolute right-0 z-10 mt-2 w-48 origin-top-right rounded-md bg-white dark:bg-slate-900 py-1 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
             <Menu.Item>
               {({ active }) => (
                 <a
                   href="#"
                   className={classNames(
-                    active ? 'bg-gray-100' : '',
-                    'block px-4 py-2 text-sm text-gray-700',
+                    active ? 'bg-gray-100 dark:bg-slate-500' : '',
+                    'block px-4 py-2 text-sm text-gray-700 dark:text-gray-100',
                   )}
                   onClick={onClickSignout}
                 >
diff --git a/components/shell/Shell.tsx b/components/shell/Shell.tsx
index 3fb349a9..a054d988 100644
--- a/components/shell/Shell.tsx
+++ b/components/shell/Shell.tsx
@@ -11,16 +11,18 @@ import { useFluentReportSearch } from '@/reports/useFluentReportSearch'
 import { useSyncedState } from '@/lib/useSyncedState'
 import Image from 'next/image'
 import { Suspense } from 'react'
+import { useColorScheme } from '@/common/useColorScheme'
 
 export function Shell({ children }: React.PropsWithChildren) {
   useCommandPaletteAsyncSearch()
+  const { theme, toggleTheme } = useColorScheme()
 
   return (
     <MobileMenuProvider>
       <LoginModal />
       <div className="flex h-full">
         {/* Narrow sidebar */}
-        <div className="hidden w-28 overflow-y-auto bg-rose-700 md:block">
+        <div className="hidden w-28 overflow-y-auto bg-rose-700 dark:bg-teal-800 md:block">
           <div className="flex w-full flex-col items-center py-6">
             <div className="flex flex-shrink-0 items-center">
               <Image
@@ -32,7 +34,7 @@ export function Shell({ children }: React.PropsWithChildren) {
                 title="Icon from Flaticon: https://www.flaticon.com/free-icons/lifeguard-tower"
               />
             </div>
-            <SidebarNav />
+            <SidebarNav {...{ theme, toggleTheme }} />
           </div>
         </div>
 
@@ -42,7 +44,7 @@ export function Shell({ children }: React.PropsWithChildren) {
         {/* Content area */}
         <div className="flex flex-1 flex-col overflow-hidden">
           <header className="w-full">
-            <div className="relative z-10 flex h-16 flex-shrink-0 border-b border-gray-200 bg-white">
+            <div className="relative z-10 flex h-16 flex-shrink-0 border-b border-gray-200 dark:border-slate-600 bg-white dark:bg-slate-900">
               <MobileMenuBtn />
               <div className="flex flex-1 justify-between px-4 sm:px-6">
                 <div className="flex flex-1">
@@ -74,7 +76,7 @@ export function Shell({ children }: React.PropsWithChildren) {
 
           {/* Main content */}
           <div className="flex flex-1 items-stretch overflow-hidden">
-            <main className="flex-1 overflow-y-auto">
+            <main className="flex-1 overflow-y-auto dark:bg-slate-900">
               {/* Primary column */}
               <section
                 aria-labelledby="primary-heading"
@@ -99,7 +101,7 @@ function SearchInput() {
     <input
       id="term"
       name="term"
-      className="h-full w-full border-transparent py-2 pl-8 pr-3 text-base text-gray-900 placeholder-gray-500 focus:border-transparent focus:placeholder-gray-400 focus:outline-none focus:ring-0"
+      className="h-full w-full border-transparent py-2 pl-8 pr-3 text-base text-gray-900 placeholder-gray-500 focus:border-transparent focus:placeholder-gray-400 focus:outline-none focus:ring-0 dark:bg-slate-900 dark:text-gray-100"
       placeholder="Search"
       type="search"
       value={termInput}
diff --git a/components/shell/SidebarNav.tsx b/components/shell/SidebarNav.tsx
index d2cc5e5d..d5174cb2 100644
--- a/components/shell/SidebarNav.tsx
+++ b/components/shell/SidebarNav.tsx
@@ -6,20 +6,25 @@ import { classNames } from '@/lib/util'
 import { usePathname } from 'next/navigation'
 import { useKBar } from 'kbar'
 
-export function SidebarNav() {
+export function SidebarNav({ theme, toggleTheme }) {
   const kbar = useKBar()
   const pathname = usePathname() || '/'
   return (
     <div className="mt-6 w-full flex-1 space-y-1 px-2">
       {NAV_ITEMS.map((item) => {
-        const Icon = ICONS[item.icon]
+        let iconName = item.icon
+        if (iconName === 'sun' && theme === 'dark') {
+          iconName = 'moon'
+        }
+        const Icon = ICONS[iconName]
+
         const children = (
           <>
             <Icon
               className={classNames(
                 isCurrent(pathname, item)
                   ? 'text-white'
-                  : 'text-rose-300 group-hover:text-white',
+                  : 'text-rose-300 dark:text-gray-100 group-hover:text-white',
                 'h-6 w-6',
               )}
               aria-hidden="true"
@@ -27,17 +32,18 @@ export function SidebarNav() {
             <span className="mt-2">{item.name}</span>
           </>
         )
+        const itemClassNames = classNames(
+          isCurrent(pathname, item)
+            ? 'bg-rose-800 dark:bg-teal-700 text-white'
+            : 'text-rose-100 dark:text-teal-100 hover:bg-rose-800 dark:hover:bg-teal-700 hover:text-white',
+          'group w-full p-3 rounded-md flex flex-col items-center text-xs font-medium',
+        )
         if ('href' in item) {
           return (
             <Link
               key={item.name}
               href={item.href}
-              className={classNames(
-                isCurrent(pathname, item)
-                  ? 'bg-rose-800 text-white'
-                  : 'text-rose-100 hover:bg-rose-800 hover:text-white',
-                'group w-full p-3 rounded-md flex flex-col items-center text-xs font-medium',
-              )}
+              className={itemClassNames}
               aria-current={isCurrent(pathname, item) ? 'page' : undefined}
             >
               {children}
@@ -48,13 +54,8 @@ export function SidebarNav() {
         return (
           <button
             key={item.name}
-            className={classNames(
-              isCurrent(pathname, item)
-                ? 'bg-rose-800 text-white'
-                : 'text-rose-100 hover:bg-rose-800 hover:text-white',
-              'group w-full p-3 rounded-md flex flex-col items-center text-xs font-medium',
-            )}
-            onClick={item.onClick({ kbar })}
+            className={itemClassNames}
+            onClick={item.onClick({ kbar, toggleTheme })}
           >
             {children}
           </button>
diff --git a/components/shell/common.ts b/components/shell/common.ts
index 9de03d0c..fb42f47d 100644
--- a/components/shell/common.ts
+++ b/components/shell/common.ts
@@ -4,6 +4,8 @@ import {
   BoltIcon,
   QueueListIcon,
   CommandLineIcon,
+  SunIcon,
+  MoonIcon,
 } from '@heroicons/react/24/outline'
 import { useKBar } from 'kbar'
 import { MouseEventHandler } from 'react'
@@ -14,6 +16,8 @@ export const ICONS = {
   events: QueueListIcon,
   repositories: UserGroupIcon,
   command: CommandLineIcon,
+  sun: SunIcon,
+  moon: MoonIcon,
 }
 
 export type SidebarNavItem = {
@@ -25,7 +29,8 @@ export type SidebarNavItem = {
     }
   | {
       onClick: (context: {
-        kbar: ReturnType<typeof useKBar>
+        kbar: ReturnType<typeof useKBar>,
+        toggleTheme: () => void
       }) => MouseEventHandler<HTMLButtonElement> | undefined
     }
 )
@@ -42,6 +47,11 @@ export const NAV_ITEMS: SidebarNavItem[] = [
       () =>
         kbar.query.toggle(),
   },
+  {
+    name: 'Theme',
+    icon: 'sun',
+    onClick: ({ toggleTheme }) => toggleTheme,
+  },
 ]
 
 export function isCurrent(
diff --git a/components/subject/ReviewStateMarker.tsx b/components/subject/ReviewStateMarker.tsx
index b29ae9d2..225b9eeb 100644
--- a/components/subject/ReviewStateMarker.tsx
+++ b/components/subject/ReviewStateMarker.tsx
@@ -16,16 +16,16 @@ const reviewStateToText = {
 
 const reviewStateToColor = {
   [ComAtprotoAdminDefs.REVIEWOPEN]: {
-    bg: 'bg-yellow-200',
-    text: 'text-yellow-800',
+    bg: 'bg-yellow-200 dark:bg-yellow-200',
+    text: 'text-yellow-800 dark:text-yellow-500',
   },
   [ComAtprotoAdminDefs.REVIEWESCALATED]: {
-    bg: 'bg-orange-200',
-    text: 'text-orange-800',
+    bg: 'bg-orange-200 dark:bg-orange-200',
+    text: 'text-orange-800 dark:text-orange-500',
   },
   [ComAtprotoAdminDefs.REVIEWCLOSED]: {
-    bg: 'bg-green-200',
-    text: 'text-green-800',
+    bg: 'bg-green-200 dark:bg-green-200',
+    text: 'text-green-800 dark:text-green-500',
   },
 }
 
@@ -92,14 +92,14 @@ export const ReviewStateIcon = ({
 
   if (subjectStatus.takendown) {
     text = 'Taken Down'
-    color = 'text-red-800'
+    color = 'text-red-800 dark:text-red-600'
     Icon = ShieldExclamationIcon
   }
 
   // Appealed status should override takendown status specific icon
   if (subjectStatus.appealed) {
     text = 'Appealed'
-    color = 'text-orange-500'
+    color = 'text-orange-500 dark:text-orange-400'
     Icon = ScaleIcon
   }
 
diff --git a/components/subject/table.tsx b/components/subject/table.tsx
index 4ef5f309..4be4b443 100644
--- a/components/subject/table.tsx
+++ b/components/subject/table.tsx
@@ -53,10 +53,10 @@ export function SubjectTable(
     <div className={classNames('px-4 sm:px-6 lg:px-8', className)} {...rest}>
       <div className="-mx-4 overflow-hidden border border-gray-300 sm:-mx-6 md:mx-0 md:rounded-lg">
         <table className="min-w-full divide-y divide-gray-300">
-          <thead className="bg-white">
+          <thead className="bg-white dark:bg-slate-800">
             <SubjectRowHead />
           </thead>
-          <tbody className="divide-y divide-gray-200 bg-white">
+          <tbody className="divide-y divide-gray-200 bg-white dark:bg-slate-800">
             {!subjectStatuses.length && (
               <EmptyRows isInitialLoading={isInitialLoading} />
             )}
@@ -91,7 +91,7 @@ function SubjectRow({
 
   return (
     <tr {...others}>
-      <td className="w-full max-w-0 py-4 pl-4 pr-3 text-sm font-medium text-gray-900 sm:w-auto sm:max-w-none sm:pl-6 sm:hidden">
+      <td className="w-full max-w-0 py-4 pl-4 pr-3 text-sm font-medium text-gray-900 dark:text-gray-200 sm:w-auto sm:max-w-none sm:pl-6 sm:hidden">
         <div className="flex flex-row items-center pb-1">
           <ReviewStateIcon
             subjectStatus={subjectStatus}
@@ -107,7 +107,7 @@ function SubjectRow({
           {lastReviewedAt && (
             <div className="flex items-center flex-row">
               <dt>Last Reviewed</dt>
-              <dd className="ml-1 truncate text-gray-700">
+              <dd className="ml-1 truncate text-gray-700 dark:text-gray-100">
                 {formatDistanceToNow(lastReviewedAt, { addSuffix: true })}
               </dd>
             </div>
@@ -115,7 +115,7 @@ function SubjectRow({
           {lastReportedAt && (
             <div className="flex items-center flex-row">
               <dt>Last Reported</dt>
-              <dd className="ml-1 truncate text-gray-700">
+              <dd className="ml-1 truncate text-gray-700 dark:text-gray-100">
                 {formatDistanceToNow(lastReportedAt, { addSuffix: true })}
               </dd>
             </div>
@@ -123,23 +123,23 @@ function SubjectRow({
           {!!subjectStatus?.comment && (
             <div className="flex items-center flex-row">
               <dt>Comment</dt>
-              <dd className="ml-1 truncate text-gray-700">
+              <dd className="ml-1 truncate text-gray-700 dark:text-gray-100">
                 {subjectStatus.comment}
               </dd>
             </div>
           )}
         </dl>
       </td>
-      <td className="hidden text-center px-3 py-4 text-sm text-gray-500 sm:table-cell">
+      <td className="hidden text-center px-3 py-4 text-sm text-gray-500 dark:text-gray-100 sm:table-cell">
         <ReviewStateIcon subjectStatus={subjectStatus} className="h-5 w-5" />
       </td>
-      <td className="hidden px-3 py-4 text-sm text-gray-500 sm:table-cell">
+      <td className="hidden px-3 py-4 text-sm text-gray-500 dark:text-gray-100 sm:table-cell">
         <SubjectOverview
           subject={subjectStatus.subject}
           subjectRepoHandle={subjectStatus.subjectRepoHandle}
         />
       </td>
-      <td className="hidden px-3 py-4 text-sm text-gray-500 sm:table-cell">
+      <td className="hidden px-3 py-4 text-sm text-gray-500 dark:text-gray-100 sm:table-cell">
         {lastReviewedAt && (
           <span title={lastReviewedAt.toLocaleString()}>
             {formatDistanceToNow(lastReviewedAt, { addSuffix: true })}
@@ -152,7 +152,7 @@ function SubjectRow({
           </>
         )}
       </td>
-      <td className="hidden px-3 py-4 text-sm text-gray-500 sm:table-cell">
+      <td className="hidden px-3 py-4 text-sm text-gray-500 dark:text-gray-100 sm:table-cell">
         {lastReportedAt && (
           <span title={lastReportedAt.toLocaleString()}>
             {formatDistanceToNow(lastReportedAt, { addSuffix: true })}
@@ -170,25 +170,25 @@ function SubjectRowHead() {
     <tr>
       <th
         scope="col"
-        className="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 sm:pl-6 sm:hidden"
+        className="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 dark:text-gray-200 sm:pl-6 sm:hidden"
       >
         <span className="sr-only">Id</span>
       </th>
       <th
         scope="col"
-        className="hidden px-3 py-3.5 text-center text-sm font-semibold text-gray-900 sm:table-cell"
+        className="hidden px-3 py-3.5 text-center text-sm font-semibold text-gray-900 dark:text-gray-200 sm:table-cell"
       >
         Status
       </th>
       <th
         scope="col"
-        className="hidden px-3 py-3.5 text-left text-sm font-semibold text-gray-900 sm:table-cell"
+        className="hidden px-3 py-3.5 text-left text-sm font-semibold text-gray-900 dark:text-gray-200 sm:table-cell"
       >
         Subject
       </th>
       <th
         scope="col"
-        className="hidden px-3 py-3.5 text-left text-sm font-semibold text-gray-900 sm:table-cell"
+        className="hidden px-3 py-3.5 text-left text-sm font-semibold text-gray-900 dark:text-gray-200 sm:table-cell"
       >
         <Link
           prefetch={false}
@@ -205,7 +205,7 @@ function SubjectRowHead() {
       </th>
       <th
         scope="col"
-        className="hidden px-3 py-3.5 text-left text-sm font-semibold text-gray-900 sm:table-cell"
+        className="hidden px-3 py-3.5 text-left text-sm font-semibold text-gray-900 dark:text-gray-200 sm:table-cell"
       >
         <Link
           prefetch={false}
@@ -231,10 +231,10 @@ function EmptyRows({ isInitialLoading }: { isInitialLoading: boolean }) {
         {isInitialLoading ? (
           <>
             <Loading />
-            <p className="pb-4 text-gray-400">Loading moderation queue...</p>
+            <p className="pb-4 text-gray-400 dark:text-gray-100">Loading moderation queue...</p>
           </>
         ) : (
-          <p className="py-4 text-gray-400 text-center">
+          <p className="py-4 text-gray-400 dark:text-gray-100 text-center">
             <CheckCircleIcon
               title="No reports"
               className="h-10 w-10 text-green-300 align-text-bottom mx-auto mb-4"
diff --git a/tailwind.config.js b/tailwind.config.js
index 02c319c5..404d23c1 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -10,4 +10,5 @@ module.exports = {
     extend: {},
   },
   plugins: [require('@tailwindcss/forms'), require('@tailwindcss/typography')],
+  darkMode: 'class',
 }