From b9b4a95d39bdae49e4bc02cf4ddcdb457f22dbd8 Mon Sep 17 00:00:00 2001
From: Sodbileg Gansukh <sodbileg.gansukh@gmail.com>
Date: Fri, 28 Aug 2026 10:06:08 +0800
Subject: [PATCH] Fixed the Unsplash image selector ignoring dark mode (#30329)

ref
https://linear.app/ghost/issue/DES-1419/when-picking-an-image-from-unsplash-the-whole-background-is-white-even

The Unsplash picker stayed white in dark mode. Two separate
implementations sit behind it, and both were broken for different
reasons.

The React selector (settings, tags, the editor's Unsplash card) had no
dark styles at all. Its chrome used `bg-white` and `text-black`, which
are fixed values in both Shade and Koenig. It now uses Shade's semantic
tokens, which read variables that Shade redefines under `.dark`, so they
flip on their own.

The Ember picker (tag image, the editor's feature image) was broken by a
class-name collision. Spirit's `.bg-white` flips to a dark value, but
Shade emits a Tailwind utility of the same name that is hard-coded
white.
Both have the same specificity and Shade's stylesheet loads later, so
Shade won. `gh-unsplash.hbs` was the only template in the Ember admin
still using `bg-white`, which is why this was the only place it showed.
It now uses its own class that reads the Spirit variable directly.

Two supporting changes:

- Koenig now scans kg-unsplash-selector and defines the same tokens. The
  package ships no usable CSS of its own, so whichever host renders it
  compiles its classes. Admin already scanned it. Koenig only worked
  because the classes happened to overlap with its own components.
- The component sets font sizes explicitly instead of using `text-sm`
and
  friends. Koenig and Shade disagree on every step of that scale, so the
  same class rendered a different size in the editor than in settings.

The rest lines the two pickers up visually: search field padding and
font, icon size and colour, author avatar. The buttons on a photo stay
light in both themes on purpose, since they sit on the image rather than
on the modal.
---
 .changeset/tidy-mangos-repeat.md              |  6 +++
 .../app/components/gh-unsplash.hbs            |  4 +-
 .../app/styles/components/unsplash.css        | 41 +++++++++++++------
 .../src/ui/UnsplashButton.tsx                 |  2 +-
 .../src/ui/UnsplashGallery.tsx                |  8 ++--
 .../src/ui/UnsplashImage.tsx                  |  2 +-
 .../src/ui/UnsplashSelector.tsx               | 10 ++---
 koenig/koenig-lexical/tailwind.config.cjs     |  7 +++-
 8 files changed, 54 insertions(+), 26 deletions(-)
 create mode 100644 .changeset/tidy-mangos-repeat.md

diff --git a/.changeset/tidy-mangos-repeat.md b/.changeset/tidy-mangos-repeat.md
new file mode 100644
index 00000000000..2e7223c7ee0
--- /dev/null
+++ b/.changeset/tidy-mangos-repeat.md
@@ -0,0 +1,6 @@
+---
+"@tryghost/kg-unsplash-selector": patch
+"@tryghost/koenig-lexical": patch
+---
+
+Fixed the Unsplash selector not following dark mode
diff --git a/apps/ember-admin/app/components/gh-unsplash.hbs b/apps/ember-admin/app/components/gh-unsplash.hbs
index 36312f9d048..3f353454744 100644
--- a/apps/ember-admin/app/components/gh-unsplash.hbs
+++ b/apps/ember-admin/app/components/gh-unsplash.hbs
@@ -2,7 +2,7 @@
     {{!-- TODO: why does this modal background not cover the PSM without style override? --}}
     <div class="fullscreen-modal-background" role="button" {{on "click" @close}} style="z-index: 999"></div>
     <div
-        class="absolute top-8 right-8 bottom-8 left-8 br4 overflow-hidden bg-white z-9999"
+        class="absolute top-8 right-8 bottom-8 left-8 br4 overflow-hidden gh-unsplash-modal z-9999"
         {{on-resize this.handleResize}}
         {{on-key "Escape" this.handleEscape}}
     >
@@ -82,7 +82,7 @@
 
                 {{!-- zoomed image overlay --}}
                 {{#if this.zoomedPhoto}}
-                    <a href="#" class="absolute flex justify-center top-0 right-0 bottom-0 left-0 pr20 pb10 pl20 bg-white overflow-hidden" {{on "click" this.closeZoom}}>
+                    <a href="#" class="absolute flex justify-center top-0 right-0 bottom-0 left-0 pr20 pb10 pl20 gh-unsplash-modal overflow-hidden" {{on "click" this.closeZoom}}>
                         <GhUnsplashPhoto
                             @photo={{this.zoomedPhoto}}
                             @zoomed={{true}}
diff --git a/apps/ember-admin/app/styles/components/unsplash.css b/apps/ember-admin/app/styles/components/unsplash.css
index d35496ee093..83be9eaee35 100644
--- a/apps/ember-admin/app/styles/components/unsplash.css
+++ b/apps/ember-admin/app/styles/components/unsplash.css
@@ -5,6 +5,10 @@
 /* The parent container + layout
 /* ---------------------------------------------------------- */
 
+.gh-unsplash-modal {
+    background: var(--white);
+}
+
 .gh-unsplash-window {
     padding: 25px;
     background: #fff;
@@ -45,21 +49,34 @@
     margin: 50px auto;
 }
 
-.gh-unsplash-search {
+.gh-unsplash-modal .gh-unsplash-search {
     width: 100%;
     height: 40px;
     margin: 0;
-    padding: 0 30px 1px 50px;
+    padding: 0 32px 1px 40px;
     outline: none;
     border: 1px solid color-mod(var(--lightgrey) l(-2%));
     color: var(--darkgrey);
+    font-family: var(--font-family);
     font-size: 14px;
-    background-color: #fff;
+    background-color: var(--white);
     border-radius: 20px;
     appearance: none;
 }
 
-.gh-unsplash-search:focus {
+.gh-unsplash-modal .gh-input-icon svg {
+    left: 16px;
+    width: 16px;
+    height: 16px;
+    fill: var(--midgrey);
+    transform: translateY(-8px);
+}
+
+.dark .gh-unsplash-modal .gh-input-icon svg {
+    fill: #9DA0A3;
+}
+
+.gh-unsplash-modal .gh-unsplash-search:focus {
     border-color: color-mod(var(--lightgrey) l(-10%) s(+6%));
 }
 
@@ -170,14 +187,14 @@
     flex-shrink: 0;
     display: flex;
     align-items: center;
-    margin-left: 10px;
+    margin-left: 12px;
     padding: 8px 12px;
-    color: #777;
-    font-size: 1.4rem;
+    color: #7C8B9A;
+    font-size: 1.2rem;
     line-height: 1.1em;
     font-weight: 500;
     background: #fff;
-    border-radius: 5px;
+    border-radius: 6px;
     opacity: 0.9;
     transition: all 0.15s ease-in-out;
 }
@@ -201,7 +218,7 @@
     display: flex;
     align-items: center;
     min-width: 0;
-    font-size: 1.5rem;
+    font-size: 1.2rem;
     letter-spacing: 0;
     line-height: 1.15em;
 }
@@ -209,10 +226,10 @@
 .gh-unsplash-photo-author-img {
     flex-shrink: 0;
     display: block;
-    width: 30px;
-    height: 30px;
+    width: 32px;
+    height: 32px;
     overflow: hidden;
-    margin-right: 10px;
+    margin-right: 8px;
     border-radius: 100%;
 }
 
diff --git a/koenig/kg-unsplash-selector/src/ui/UnsplashButton.tsx b/koenig/kg-unsplash-selector/src/ui/UnsplashButton.tsx
index e6099e21c13..9586a8d077a 100644
--- a/koenig/kg-unsplash-selector/src/ui/UnsplashButton.tsx
+++ b/koenig/kg-unsplash-selector/src/ui/UnsplashButton.tsx
@@ -27,7 +27,7 @@ const UnsplashButton: React.FC<UnsplashButtonProps> = ({ icon, label, ...props }
 
   return (
     <a
-      className="text-grey-700 flex h-8 shrink-0 cursor-pointer items-center rounded-md bg-white px-3 py-2 font-sans text-sm font-medium leading-6 opacity-90 transition-all ease-in-out hover:opacity-100"
+      className="text-grey-700 flex h-8 shrink-0 cursor-pointer items-center rounded-md bg-white px-3 py-2 font-sans text-[1.2rem] font-medium leading-[2.4rem] opacity-90 transition-all ease-in-out hover:opacity-100"
       onClick={(e) => e.stopPropagation()}
       {...props}
     >
diff --git a/koenig/kg-unsplash-selector/src/ui/UnsplashGallery.tsx b/koenig/kg-unsplash-selector/src/ui/UnsplashGallery.tsx
index eeaa0cd582c..e60c51c2da9 100644
--- a/koenig/kg-unsplash-selector/src/ui/UnsplashGallery.tsx
+++ b/koenig/kg-unsplash-selector/src/ui/UnsplashGallery.tsx
@@ -34,7 +34,7 @@ const UnsplashGalleryLoading: React.FC = () => {
       className="absolute inset-y-0 left-0 flex w-full items-center justify-center overflow-hidden pb-[8vh]"
       data-kg-loader
     >
-      <div className="animate-spin before:bg-grey-800 relative inline-block size-[50px] rounded-full border border-black/10 before:z-10 before:mt-[7px] before:block before:size-[7px] before:rounded-full"></div>
+      <div className="animate-spin before:bg-grey-800 dark:before:bg-grey-400 relative inline-block size-[50px] rounded-full border border-black/10 before:z-10 before:mt-[7px] before:block before:size-[7px] before:rounded-full dark:border-white/10"></div>
     </div>
   );
 };
@@ -123,9 +123,9 @@ const UnsplashGallery: React.FC<UnsplashGalleryProps> = ({
   if (error) {
     return (
       <GalleryLayout galleryRef={galleryRef} zoomed={zoomed}>
-        <div className="flex h-full flex-col items-center justify-center">
-          <h1 className="mb-4 text-2xl font-bold">Error</h1>
-          <p className="text-lg font-medium">{error}</p>
+        <div className="text-foreground flex h-full flex-col items-center justify-center">
+          <h1 className="mb-4 text-[2.2rem] font-bold">Error</h1>
+          <p className="text-[1.5rem] font-medium">{error}</p>
         </div>
       </GalleryLayout>
     );
diff --git a/koenig/kg-unsplash-selector/src/ui/UnsplashImage.tsx b/koenig/kg-unsplash-selector/src/ui/UnsplashImage.tsx
index eff3bf56d3d..1e8c2bef187 100644
--- a/koenig/kg-unsplash-selector/src/ui/UnsplashImage.tsx
+++ b/koenig/kg-unsplash-selector/src/ui/UnsplashImage.tsx
@@ -75,7 +75,7 @@ const UnsplashImage: FC<UnsplashImageProps> = ({
               className="mr-2 size-8 rounded-full"
               src={user.profile_image.medium}
             />
-            <div className="mr-2 truncate font-sans text-sm font-medium text-white">
+            <div className="mr-2 truncate font-sans text-[1.2rem] font-medium text-white">
               {user.name}
             </div>
           </div>
diff --git a/koenig/kg-unsplash-selector/src/ui/UnsplashSelector.tsx b/koenig/kg-unsplash-selector/src/ui/UnsplashSelector.tsx
index 8260e8831b7..275d74a8037 100644
--- a/koenig/kg-unsplash-selector/src/ui/UnsplashSelector.tsx
+++ b/koenig/kg-unsplash-selector/src/ui/UnsplashSelector.tsx
@@ -18,26 +18,26 @@ const UnsplashSelector: FunctionComponent<UnsplashSelectorProps> = ({
     <>
       <div className="fixed inset-0 z-40 h-[100vh] bg-black opacity-60"></div>
       <div
-        className="not-kg-prose fixed inset-8 z-50 overflow-hidden rounded bg-white shadow-xl"
+        className="not-kg-prose bg-surface-panel fixed inset-8 z-50 overflow-hidden rounded shadow-xl"
         data-kg-modal="unsplash"
       >
         <button className="absolute right-6 top-6 cursor-pointer" type="button">
           <CloseIcon
-            className="text-grey-400 size-4 stroke-2"
+            className="text-muted-foreground size-4 stroke-2"
             data-kg-modal-close-button
             onClick={() => closeModal()}
           />
         </button>
         <div className="flex h-full flex-col">
           <header className="flex shrink-0 items-center justify-between px-20 py-10">
-            <h1 className="flex items-center gap-2 font-sans text-3xl font-bold text-black">
+            <h1 className="text-foreground flex items-center gap-2 font-sans text-[2.8rem] font-bold">
               <UnsplashIcon className="mb-1" />
               Unsplash
             </h1>
             <div className="relative w-full max-w-sm">
-              <SearchIcon className="text-grey-700 absolute left-4 top-1/2 size-4 -translate-y-2" />
+              <SearchIcon className="text-muted-foreground absolute left-4 top-1/2 size-4 -translate-y-2" />
               <input
-                className="border-grey-300 focus:border-grey-400 h-10 w-full rounded-full border border-solid pl-10 pr-8 font-sans text-md font-normal text-black focus-visible:outline-none"
+                className="border-border focus:border-muted-foreground placeholder:text-muted-foreground text-foreground h-10 w-full rounded-full border border-solid bg-transparent pl-10 pr-8 font-sans text-[1.4rem] font-normal focus-visible:outline-none"
                 placeholder="Search free high-resolution photos"
                 autoFocus
                 data-kg-unsplash-search
diff --git a/koenig/koenig-lexical/tailwind.config.cjs b/koenig/koenig-lexical/tailwind.config.cjs
index 925d003c2e6..f00be673835 100644
--- a/koenig/koenig-lexical/tailwind.config.cjs
+++ b/koenig/koenig-lexical/tailwind.config.cjs
@@ -5,12 +5,17 @@ module.exports = {
     important: '.koenig-lexical',
     content: [
         './src/**/*.{js,jsx,ts,tsx}',
-        './demo/**/*.{js,jsx,ts,tsx}'
+        './demo/**/*.{js,jsx,ts,tsx}',
+        '../kg-unsplash-selector/src/**/*.{js,jsx,ts,tsx}'
     ],
     darkMode: 'class',
     theme: {
         colors: {
             accent: 'var(--kg-accent-color, #ff0095)',
+            'surface-panel': 'var(--surface-panel, #FFF)',
+            foreground: 'var(--foreground, #15171A)',
+            'muted-foreground': 'var(--muted-foreground, #7C8B9A)',
+            border: 'var(--border, #DDE1E5)',
             transparent: 'transparent',
             current: 'currentColor',
             white: '#FFF',