From 8ec994211475b08a258432284669f026211bb6a6 Mon Sep 17 00:00:00 2001
From: Mathias Jakobsen <mathias.jakobsen@overleaf.com>
Date: Mon, 2 Mar 2026 10:44:21 +0000
Subject: [PATCH] Merge pull request #31873 from overleaf/mj-editor-dark-input

[web] Convert input fields to dark mode in editor

GitOrigin-RevId: 420e280d5e92f70f2d44798983cdb636f3efc659
---
 .../pdf-preview/components/pdf-zoom-dropdown.tsx     |  1 +
 .../web/frontend/stylesheets/components/form.scss    | 12 +++++++++---
 2 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/services/web/frontend/js/features/pdf-preview/components/pdf-zoom-dropdown.tsx b/services/web/frontend/js/features/pdf-preview/components/pdf-zoom-dropdown.tsx
index fb9761ed9f..2baa3b4958 100644
--- a/services/web/frontend/js/features/pdf-preview/components/pdf-zoom-dropdown.tsx
+++ b/services/web/frontend/js/features/pdf-preview/components/pdf-zoom-dropdown.tsx
@@ -90,6 +90,7 @@ function PdfZoomDropdown({
             <FormControl
               onFocus={event => event.target.select()}
               value={customZoomValue}
+              type="text"
               onKeyDown={event => {
                 if (event.key === 'Enter') {
                   const zoom = Number(customZoomValue.replace('%', '')) / 100
diff --git a/services/web/frontend/stylesheets/components/form.scss b/services/web/frontend/stylesheets/components/form.scss
index 754074302b..2132593f86 100644
--- a/services/web/frontend/stylesheets/components/form.scss
+++ b/services/web/frontend/stylesheets/components/form.scss
@@ -121,9 +121,7 @@
   .ide-redesign-main,
   .project-ds-nav-page {
     @include form-check-dark;
-  }
 
-  .project-ds-nav-page {
     .form-control,
     .form-control-wrapper {
       @include dark-input;
@@ -467,7 +465,8 @@ input[type='range'] {
   }
 }
 
-input.form-control[type='text'] {
+input.form-control[type='text'],
+input.form-control[type='search'] {
   color: var(--input-field-color);
   background-color: var(--input-field-bg);
   border-color: var(--input-field-border-color);
@@ -476,6 +475,13 @@ input.form-control[type='text'] {
     color: var(--input-placeholder-content);
   }
 
+  &[disabled],
+  &:disabled {
+    &::placeholder {
+      color: var(--input-field-content-disabled);
+    }
+  }
+
   &:focus,
   &:focus-visible {
     color: var(--input-field-color);