✨ Add theme switcher and dark mode to all places

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>

app/communication-template/create/page.tsx

@@ -8,7 +8,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 />

app/communication-template/page.tsx

@@ -31,7 +31,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
@@ -49,20 +49,20 @@ 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>
         )}
         {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>
               )}
@@ -76,7 +76,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

app/events/page-content.tsx

@@ -24,7 +24,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

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"

app/reports/page-content.tsx

@@ -248,7 +248,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" />

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}

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}

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

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}
                   >

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>

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}

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'}

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>

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,15 +235,15 @@ 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"
             >
               {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
               />

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

components/common/buttons.tsx

@@ -12,19 +12,19 @@ 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}
     />
   )
 })
 
 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,

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>
   )
 }