🎨 Improved dark mode across Shade and Ghost admin (DES-1397)

apps/activitypub/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tryghost/activitypub",
   "type": "module",
-  "version": "3.1.52",
+  "version": "3.1.54",
   "license": "MIT",
   "repository": {
     "type": "git",

apps/activitypub/src/components/feed/feed-item-stats.tsx

@@ -84,7 +84,7 @@ const FeedItemStats: React.FC<FeedItemStatsProps> = ({
         }
     };
 
-    const buttonClass = `px-2 gap-1.5 font-normal text-md [&_svg]:size-[18px] transition-color ap-action-button text-gray-900 hover:text-gray-900 hover:bg-black/[3%] dark:bg-black dark:hover:bg-gray-950 dark:text-gray-600 ${buttonClassName}`;
+    const buttonClass = `px-2 gap-1.5 font-normal text-md [&_svg]:size-[18px] transition-color ap-action-button text-gray-900 hover:text-gray-900 hover:bg-black/[3%] dark:hover:bg-gray-950 dark:text-gray-600 ${buttonClassName}`;
 
     return (
         <>

apps/activitypub/src/components/feed/feed-item.tsx

@@ -413,7 +413,7 @@ const FeedItem: React.FC<FeedItemProps> = ({
     };
 
     const UserMenuTrigger = (
-        <Button className={`relative z-10 size-[34px] rounded-md ${layout === 'inbox' || layout === 'modal' ? 'text-gray-900 hover:text-gray-900 dark:text-gray-600 dark:hover:text-gray-600' : 'text-gray-500 hover:text-gray-500'} dark:bg-black dark:hover:bg-gray-950 [&_svg]:size-5`} data-testid="menu-button" variant='ghost'>
+        <Button className={`relative z-10 size-[34px] rounded-md ${layout === 'inbox' || layout === 'modal' ? 'text-gray-900 hover:text-gray-900 dark:text-gray-600 dark:hover:text-gray-600' : 'text-gray-500 hover:text-gray-500'} dark:hover:bg-gray-950 [&_svg]:size-5`} data-testid="menu-button" variant='ghost'>
             <LucideIcon.Ellipsis />
         </Button>
     );

apps/activitypub/src/components/global/ap-reply-box.tsx

@@ -41,7 +41,7 @@ const APReplyBox: React.FC<APTextAreaProps> = ({
             >
                 <APAvatar author={user as ActorProperties} />
                 <div className='flex w-full items-center'>
-                    <div className='w-full text-[1.5rem] text-gray-500 transition-colors dark:text-gray-400'>
+                    <div className='w-full text-[1.5rem] text-gray-500 transition-colors dark:text-gray-700'>
                         {placeholder}
                     </div>
                 </div>

apps/activitypub/src/components/global/back-button.tsx

@@ -15,7 +15,7 @@ const BackButton: React.FC<BackButtonProps> = ({className, onClick}) => {
 
     return (
         <Button
-            className={cn('size-8 rounded-full bg-white/85 px-2 backdrop-blur-md dark:bg-black/85 dark:text-white [&_svg]:size-6 focus-visible:ring-0', className)}
+            className={cn('size-8 rounded-full bg-white/85 px-2 backdrop-blur-md dark:bg-transparent dark:text-white [&_svg]:size-6 focus-visible:ring-0', className)}
             variant='ghost'
             onClick={() => {
                 if (onClick) {

apps/activitypub/src/components/global/profile-preview-hover-card.tsx

@@ -111,7 +111,7 @@ const ProfilePreviewHoverCard: React.FC<ProfilePreviewHoverCardProps> = ({
             </HoverCardTrigger>
             <HoverCardContent
                 align={align}
-                className='w-[320px] cursor-default rounded-2xl border-0 p-5 text-left text-gray-900 shadow-[0_5px_24px_0px_rgba(0,0,0,0.02),0px_2px_5px_0px_rgba(0,0,0,0.07),0px_0px_1px_0px_rgba(0,0,0,0.25)] outline-hidden dark:bg-[#101114] dark:shadow-none'
+                className='w-[320px] cursor-default rounded-2xl border-0 p-5 text-left text-gray-900 shadow-lg outline-hidden dark:bg-surface-elevated-2'
                 side={side}
                 sideOffset={12}
                 onClick={e => e.stopPropagation()}

apps/activitypub/src/components/layout/header/header.tsx

@@ -71,7 +71,7 @@ const Header: React.FC<HeaderProps> = ({onToggleMobileSidebar, showBorder = true
                     {!backActive && <MobileMenuButton onToggleMobileSidebar={onToggleMobileSidebar} />}
                 </div>
                 :
-                <div className='sticky top-0 z-50 bg-white/85 backdrop-blur-md dark:bg-black'>
+                <div className='sticky top-0 z-50 bg-white/85 backdrop-blur-md dark:bg-background'>
                     <div className={`relative flex h-[72px] items-center justify-between gap-5 px-[min(4vw,24px)] max-md:h-[68px] ${showBorder ? 'before:absolute before:inset-x-[min(4vw,24px)] before:bottom-0 before:block before:border-b before:border-gray-200 before:content-[""] dark:before:border-gray-950' : ''}`}>
                         <HeaderTitle
                             backIcon={backActive}

apps/activitypub/src/components/layout/sidebar/feedback-box.tsx

@@ -13,8 +13,8 @@ const FeedbackBox: React.FC = () => {
     }
 
     return (
-        <div className='z-20 w-full bg-white dark:bg-black'>
-            <div className='flex w-full flex-col gap-0.5 border-t border-gray-200 bg-white px-3 pt-6 dark:border-gray-950 dark:bg-black'>
+        <div className='z-20 w-full bg-white dark:bg-background'>
+            <div className='flex w-full flex-col gap-0.5 border-t border-gray-200 bg-white px-3 pt-6 dark:border-gray-950 dark:bg-background'>
                 <div className='flex items-center gap-2'>
                     <LucideIcon.MessageSquare className='text-purple-500' size={20} strokeWidth={1.5} />
                     <H4>Beta feedback</H4>

apps/activitypub/src/components/layout/sidebar/sidebar.tsx

@@ -127,7 +127,7 @@ const Sidebar: React.FC<SidebarProps> = ({isMobileSidebarOpen}) => {
                         return (<></>);
                     })}
                 </div>
-                <div className='sticky bottom-0 flex items-center gap-2 bg-white pb-4 pl-4 dark:bg-black'>
+                <div className='sticky bottom-0 flex items-center gap-2 bg-white pb-4 pl-4 dark:bg-background'>
                     <FeedbackBox />
                 </div>
             </div>

apps/activitypub/src/components/modals/new-note-modal.tsx

@@ -336,7 +336,7 @@ const NewNoteModal: React.FC<NewNoteModalProps> = ({children, replyTo, onReply,
                                     <textarea
                                         ref={textareaRef}
                                         autoFocus={true}
-                                        className='ap-textarea break-anywhere w-full resize-none bg-transparent text-[1.5rem]'
+                                        className='ap-textarea break-anywhere w-full resize-none bg-transparent text-[1.5rem] dark:placeholder:text-gray-700'
                                         data-testid="note-textarea"
                                         placeholder={placeholder}
                                         rows={1}
@@ -384,7 +384,7 @@ const NewNoteModal: React.FC<NewNoteModalProps> = ({children, replyTo, onReply,
                         />
                     </div>
                 }
-                <DialogFooter className={`${isSticky ? 'sticky' : 'static'} bottom-0 flex-row bg-background py-6 dark:bg-(--color-popover)`}>
+                <DialogFooter className={`${isSticky ? 'sticky' : 'static'} bottom-0 flex-row bg-background py-6 dark:bg-surface-elevated-2`}>
                     <Button className='mr-auto w-[34px] min-w-0!' variant='outline' onClick={() => imageInputRef.current?.click()}><LucideIcon.Image /></Button>
                     <div className='flex items-center gap-3'>
                         <div className={`text-sm ${content.length >= MAX_CONTENT_LENGTH ? 'text-red-500' : content.length >= MAX_CONTENT_LENGTH * 0.9 ? 'text-yellow-600' : 'text-gray-500'}`}>

apps/activitypub/src/components/modals/search.tsx

@@ -194,12 +194,12 @@ const Search: React.FC<SearchProps> = ({onOpenChange, query, setQuery}) => {
 
     return (
         <>
-            <div className='sticky -top-6 z-30 -mt-6 flex h-[72px] shrink-0 items-center gap-2 bg-white pt-3 pb-2 before:pointer-events-none before:absolute before:-inset-x-6 before:bottom-0 before:h-0 before:border-b before:border-b-gray-200 before:content-[""] dark:bg-(--color-popover) dark:before:border-b-gray-950'>
+            <div className='sticky -top-6 z-30 -mt-6 flex h-[72px] shrink-0 items-center gap-2 bg-white pt-3 pb-2 before:pointer-events-none before:absolute before:-inset-x-6 before:bottom-0 before:h-0 before:border-b before:border-b-gray-200 before:content-[""] dark:bg-surface-elevated-2 dark:before:border-b-gray-950'>
                 <LucideIcon.Search className='text-gray-600' size={18} strokeWidth={1.5} />
                 <Input
                     ref={queryInputRef}
                     autoComplete='off'
-                    className='flex h-10 w-full items-center rounded-lg border-0 bg-transparent px-0 py-1.5 text-lg !shadow-none !outline-none focus-visible:!border-0 focus-visible:bg-transparent focus-visible:!shadow-none focus-visible:!outline-0 dark:bg-(--color-popover) dark:text-white dark:placeholder:text-gray-800'
+                    className='flex h-10 w-full items-center rounded-lg border-0 bg-transparent px-0 py-1.5 text-lg !shadow-none !outline-none focus-visible:!border-0 focus-visible:bg-transparent focus-visible:!shadow-none focus-visible:!ring-0 focus-visible:!outline-0 dark:bg-surface-elevated-2 dark:text-white dark:placeholder:text-gray-800'
                     placeholder='Search by name, handle, or URL...'
                     title="Search"
                     type='text'

apps/activitypub/src/views/preferences/components/edit-profile.tsx

@@ -256,10 +256,10 @@ const EditProfile: React.FC<EditProfileProps> = ({account, setIsEditingProfile})
                                     form.setValue('coverImage', '');
                                 }}><LucideIcon.Trash2 /></Button>
                             </> :
-                            <Button className='pointer-events-none absolute right-3 bottom-3 bg-gray-200 group-hover:bg-gray-300' variant='secondary'>Upload cover image</Button>
+                            <Button className='pointer-events-none absolute right-3 bottom-3 bg-gray-200 group-hover:bg-gray-300 dark:bg-black/40 dark:text-white dark:group-hover:bg-black/60' variant='secondary'>Upload cover image</Button>
                         }
                     </div>
-                    <div className='group absolute -bottom-10 left-4 flex size-20 cursor-pointer items-center justify-center rounded-full border-2 border-white bg-gray-100 dark:border-[#101114] dark:bg-gray-950' onClick={triggerProfileImageInput}>
+                    <div className='group absolute -bottom-10 left-4 flex size-20 cursor-pointer items-center justify-center rounded-full border-2 border-white bg-gray-100 dark:border-surface-elevated-2 dark:bg-gray-950' onClick={triggerProfileImageInput}>
                         {profileImagePreview ?
                             <>
                                 <img className={`size-full rounded-full object-cover ${isProfileImageUploading && 'opacity-10'}`} src={profileImagePreview} />

apps/activitypub/src/views/profile/components/profile-page.tsx

@@ -193,7 +193,7 @@ const ProfilePage:React.FC<ProfilePageProps> = ({
                         }
                         <div className={`mx-auto max-w-[620px] px-6 ${(!account?.bannerImageUrl && !canGoBack) ? '-mt-8' : '-mt-12'}`}>
                             <div className='flex items-end justify-between'>
-                                <div className='-ml-2 rounded-full bg-white p-1 dark:bg-black'>
+                                <div className='-ml-2 rounded-full bg-white p-1 dark:bg-background'>
                                     {isLoadingAccount ?
                                         <Skeleton className='size-[92px] rounded-full' />
                                         :

apps/admin-x-settings/src/components/settings/growth/explore/testimonials-modal.tsx

@@ -111,7 +111,7 @@ const TestimonialsModal = NiceModal.create(() => {
                 <div className='flex items-stretch'>
                     <div className='hidden w-full flex-col justify-between bg-gradient-to-tl from-grey-100/50 to-grey-100/80 p-8 dark:from-grey-900/40 dark:to-grey-900/60 [@media(min-width:905px)]:visible! [@media(min-width:905px)]:flex!'>
                         <div className='pr-6'>
-                            <div className='relative rounded-xl bg-white px-3 py-2.5 text-md text-grey-700 italic shadow-lg before:absolute before:-bottom-1.5 before:left-5 before:block before:size-3 before:rotate-45 before:bg-white dark:bg-black dark:text-grey-300 before:dark:bg-black'>
+                            <div className='relative rounded-xl bg-white px-3 py-2.5 text-md text-grey-700 italic shadow-lg before:absolute before:-bottom-1.5 before:left-5 before:block before:size-3 before:rotate-45 before:bg-white dark:bg-black dark:text-grey-300 dark:before:bg-black'>
                                 Moving to Ghost has proven to be one of the best business decisions we’ve made as an independent media outlet.
                             </div>
                             <div className='mt-[14px] ml-2 flex items-center gap-2'>
@@ -126,7 +126,7 @@ const TestimonialsModal = NiceModal.create(() => {
                         </div>
 
                         <div className='mt-8 ml-6'>
-                            <div className='relative rounded-xl bg-white px-3 py-2.5 text-md text-grey-700 italic shadow-lg before:absolute before:right-5 before:-bottom-1.5 before:block before:size-3 before:rotate-45 before:bg-white dark:bg-black dark:text-grey-300 before:dark:bg-black'>
+                            <div className='relative rounded-xl bg-white px-3 py-2.5 text-md text-grey-700 italic shadow-lg before:absolute before:right-5 before:-bottom-1.5 before:block before:size-3 before:rotate-45 before:bg-white dark:bg-black dark:text-grey-300 dark:before:bg-black'>
                                 It has now been one year since I quit my full-time job to go all in on Tangle. Today, we have 50,000+ paying subscribers. That’s roughly $5M in gross yearly revenue ... it’s the best paying job I’ve ever had.
                             </div>
                             <div className='mt-[14px] mr-2 flex items-center justify-end gap-2'>
@@ -141,7 +141,7 @@ const TestimonialsModal = NiceModal.create(() => {
                         </div>
 
                         <div className='mt-8 hidden pr-6 [@media(min-width:940px)]:visible! [@media(min-width:940px)]:block!'>
-                            <div className='relative rounded-xl bg-white px-3 py-2.5 text-md text-grey-700 italic shadow-lg before:absolute before:-bottom-1.5 before:left-5 before:block before:size-3 before:rotate-45 before:bg-white dark:bg-black dark:text-grey-300 before:dark:bg-black'>
+                            <div className='relative rounded-xl bg-white px-3 py-2.5 text-md text-grey-700 italic shadow-lg before:absolute before:-bottom-1.5 before:left-5 before:block before:size-3 before:rotate-45 before:bg-white dark:bg-black dark:text-grey-300 dark:before:bg-black'>
                                 You should be using Ghost because it’s absolutely amazing and I love it. It’s what I’ve been using for all my sites since 2016.
                             </div>
                             <div className='mt-[14px] ml-2 flex items-center gap-2'>

apps/admin/src/layout/app-sidebar/app-sidebar-header.tsx

@@ -60,7 +60,7 @@ function AppSidebarHeader({ ...props }: React.ComponentProps<typeof SidebarHeade
                 {showSearch && (
                     <Button
                         variant="outline"
-                        className="flex h-(--control-height) items-center justify-between rounded-full border-transparent pr-2 text-base text-muted-foreground shadow-xs hover:bg-background hover:text-gray-700 hover:shadow-sm dark:bg-gray-950 [&_svg]:stroke-2"
+                        className="flex h-(--control-height) items-center justify-between rounded-full border-transparent bg-white pr-2 text-base text-muted-foreground shadow-xs hover:bg-background hover:text-gray-700 hover:shadow-sm dark:border-gray-900/50 dark:bg-gray-900/30 dark:hover:border-gray-900/80 dark:hover:text-gray-400 [&_svg]:stroke-2"
                         onClick={openSearchModal}
                     >
                         <div className="flex items-center gap-2">

apps/admin/src/layout/app-sidebar/nav-content.tsx

@@ -30,7 +30,7 @@ function PostsNavItemContent({isActive, to}: {isActive: boolean; to: string}) {
             </NavMenuItem.Link>
             <a href="#/editor/post"
                 aria-label="Create new post"
-                className="absolute top-0 right-0 flex size-8 items-center justify-center rounded-full p-0 text-gray-700 ring-sidebar-ring outline-hidden transition-all hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2"
+                className="absolute top-0 right-0 flex size-8 items-center justify-center rounded-full p-0 text-gray-700 ring-sidebar-ring outline-hidden transition-all hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 dark:text-gray-800 dark:hover:text-white"
             >
                 <LucideIcon.Plus
                     size={20}

apps/admin/src/layout/app-sidebar/user-menu.tsx

@@ -131,7 +131,7 @@ function UserMenu(props: UserMenuProps) {
                     </div>
                     <div className="grid flex-1 text-left text-base leading-tight">
                         <span className="truncate font-semibold">{currentUser.data?.name}</span>
-                        <span className="-mt-px truncate text-sm text-muted-foreground">
+                        <span className="-mt-px truncate text-sm text-muted-foreground dark:text-gray-800">
                             {currentUser.data?.email}
                         </span>
                     </div>
@@ -141,7 +141,7 @@ function UserMenu(props: UserMenuProps) {
             <DropdownMenuContent
                 align="start"
                 sideOffset={10}
-                className={`w-[var(--radix-dropdown-menu-trigger-width)] ${showUpgradeBanner ? 'shadow-[0_18px_80px_0_rgba(0,0,0,0.07),0_7.52px_33.422px_0_rgba(0,0,0,0.05),0_4.021px_17.869px_0_rgba(0,0,0,0.04),0_2.254px_10.017px_0_rgba(0,0,0,0.04),0_1.197px_5.32px_0_rgba(0,0,0,0.03),0_0.498px_2.214px_0_rgba(0,0,0,0.02)]' : ''}`}
+                className={`w-[var(--radix-dropdown-menu-trigger-width)] dark:bg-surface-elevated-2 ${showUpgradeBanner ? 'shadow-[0_18px_80px_0_rgba(0,0,0,0.07),0_7.52px_33.422px_0_rgba(0,0,0,0.05),0_4.021px_17.869px_0_rgba(0,0,0,0.04),0_2.254px_10.017px_0_rgba(0,0,0,0.04),0_1.197px_5.32px_0_rgba(0,0,0,0.03),0_0.498px_2.214px_0_rgba(0,0,0,0.02)]' : ''}`}
             >
                 <UserMenuHeader
                     name={currentUser.data?.name}

apps/posts/src/components/label-picker/label-picker.tsx

@@ -291,7 +291,7 @@ const ComboboxPicker: React.FC<ComboboxPickerProps> = ({
     return (
         <div ref={containerRef} className="relative">
             <div
-                className="flex min-h-9 w-full cursor-text flex-wrap items-center gap-1.5 rounded-md border border-transparent bg-gray-100 px-3 py-1 text-sm transition-colors focus-within:border-green focus-within:bg-transparent focus-within:shadow-[0_0_0_2px_rgba(48,207,67,.25)] dark:bg-gray-950"
+                className="flex min-h-9 w-full cursor-text flex-wrap items-center gap-1.5 rounded-md border border-control-border bg-surface-elevated px-3 py-1 text-control transition-colors focus-within:border-focus-ring focus-within:ring-2 focus-within:ring-focus-ring/25 dark:bg-transparent"
                 role="combobox"
                 onClick={() => {
                     inputRef.current?.focus();
@@ -301,7 +301,7 @@ const ComboboxPicker: React.FC<ComboboxPickerProps> = ({
                 <SelectedPills labels={selectedLabels} onToggle={onToggle} />
                 <input
                     ref={inputRef}
-                    className="min-w-[80px] flex-1 bg-transparent text-sm outline-hidden placeholder:text-muted-foreground"
+                    className="min-w-[80px] flex-1 bg-transparent text-control outline-hidden placeholder:text-muted-foreground"
                     placeholder={selectedLabels.length === 0 ? 'Search labels...' : ''}
                     value={search}
                     onChange={(e) => {

apps/posts/src/views/Automations/components/automation-header.tsx

@@ -40,7 +40,7 @@ const AutomationHeader: React.FC<AutomationHeaderProps> = ({
     const status = automation?.status;
 
     return (
-        <header className='relative z-10 flex h-14 shrink-0 items-center justify-between bg-background px-4 shadow-sm dark:border-b dark:border-gray-950'>
+        <header className='relative z-10 flex h-14 shrink-0 items-center justify-between bg-surface-elevated px-4 shadow-sm dark:border-b dark:border-gray-950'>
             <div className='flex min-w-0 items-center gap-3'>
                 <Button variant='ghost' asChild>
                     <Link aria-label='Back to automations' to='/automations'>