diff --git a/app/views/settings/theme/_input.html.haml b/app/views/settings/theme/_input.html.haml
new file mode 100644
index 00000000..81a1c6ee
--- /dev/null
+++ b/app/views/settings/theme/_input.html.haml
@@ -0,0 +1,2 @@
+.col-sm-6
+  = f.text_field field_name, class: "color", data: { default:, theme_target: "color", action: "theme#updatePreview" }, readonly: :readonly
diff --git a/app/views/settings/theme/edit.html.haml b/app/views/settings/theme/edit.html.haml
index c1ab1f9d..1d5c84b0 100644
--- a/app/views/settings/theme/edit.html.haml
+++ b/app/views/settings/theme/edit.html.haml
@@ -17,25 +17,19 @@
       %p= t(".general.body")
 
       .row
-        .col-sm-6
-          = f.text_field :background_color, class: "color", data: { default: 0xF0EDF4, theme_target: "color", action: "theme#updatePreview" }, readonly: :readonly
-        .col-sm-6
-          = f.text_field :body_text, class: "color", data: { default: 0x000000, theme_target: "color", action: "theme#updatePreview" }, readonly: :readonly
+        = render "settings/theme/input", f:, field_name: :background_color, default: 0xF0EDF4
+        = render "settings/theme/input", f:, field_name: :body_text, default: 0x000000
   .card
     .card-body
       %h2= t(".raised.heading")
       %p= t(".raised.body")
 
       .row
-        .col-sm-6
-          = f.text_field :raised_background, class: "color", data: { default: 0xFFFFFF, theme_target: "color", action: "theme#updatePreview" }, readonly: :readonly
-        .col-sm-6
-          = f.text_field :raised_text, class: "color", data: { default: 0x000000, theme_target: "color", action: "theme#updatePreview" }, readonly: :readonly
+        = render "settings/theme/input", f:, field_name: :raised_background, default: 0xFFFFFF
+        = render "settings/theme/input", f:, field_name: :raised_text, default: 0x000000
       .row
-        .col-sm-6
-          = f.text_field :raised_accent, class: "color", data: { default: 0xF7F7F7, theme_target: "color", action: "theme#updatePreview" }, readonly: :readonly
-        .col-sm-6
-          = f.text_field :raised_accent_text, class: "color", data: { default: 0x000000, theme_target: "color", action: "theme#updatePreview" }, readonly: :readonly
+        = render "settings/theme/input", f:, field_name: :raised_accent, default: 0xF7F7F7
+        = render "settings/theme/input", f:, field_name: :raised_accent_text, default: 0x000000
     .card-footer
       %p= t(".raised.accent.example")
   .card
@@ -44,57 +38,42 @@
       %p= t(".colors.body")
 
       .row
-        .col-sm-6
-          = f.text_field :primary_color, class: "color", data: { default: 0x5E35B1, theme_target: "color", action: "theme#updatePreview" }, readonly: :readonly
-        .col-sm-6
-          = f.text_field :primary_text, class: "color", data: { default: 0xFFFFFF, theme_target: "color", action: "theme#updatePreview" }, readonly: :readonly
+        = render "settings/theme/input", f:, field_name: :primary_color, default: 0x5E35B1
+        = render "settings/theme/input", f:, field_name: :primary_text, default: 0xFFFFFF
         .col-sm-12
           .alert.alert-primary= t(".colors.alert.example", type: t(".colors.alert.type.primary"))
       .row
-        .col-sm-6
-          = f.text_field :danger_color, class: "color", data: { default: 0xDC3545, theme_target: "color", action: "theme#updatePreview" }, readonly: :readonly
-        .col-sm-6
-          = f.text_field :danger_text, class: "color", data: { default: 0xFFFFFF, theme_target: "color", action: "theme#updatePreview" }, readonly: :readonly
+        = render "settings/theme/input", f:, field_name: :danger_color, default: 0xDC3545
+        = render "settings/theme/input", f:, field_name: :danger_text, default: 0xFFFFFF
         .col-sm-12
           .alert.alert-danger= t(".colors.alert.example", type: t(".colors.alert.type.danger"))
       .row
-        .col-sm-6
-          = f.text_field :warning_color, class: "color", data: { default: 0xFFC107, theme_target: "color", action: "theme#updatePreview" }, readonly: :readonly
-        .col-sm-6
-          = f.text_field :warning_text, class: "color", data: { default: 0x292929, theme_target: "color", action: "theme#updatePreview" }, readonly: :readonly
+        = render "settings/theme/input", f:, field_name: :warning_color, default: 0xFFC107
+        = render "settings/theme/input", f:, field_name: :warning_text, default: 0x292929
         .col-sm-12
           .alert.alert-warning= t(".colors.alert.example", type: t(".colors.alert.type.warning"))
       .row
-        .col-sm-6
-          = f.text_field :info_color, class: "color", data: { default: 0x17A2B8, theme_target: "color", action: "theme#updatePreview" }, readonly: :readonly
-        .col-sm-6
-          = f.text_field :info_text, class: "color", data: { default: 0xFFFFFF, theme_target: "color", action: "theme#updatePreview" }, readonly: :readonly
+        = render "settings/theme/input", f:, field_name: :info_color, default: 0x17A2B8
+        = render "settings/theme/input", f:, field_name: :info_text, default: 0xFFFFFF
         .col-sm-12
           .alert.alert-info= t(".colors.alert.example", type: t(".colors.alert.type.info"))
       .row
-        .col-sm-6
-          = f.text_field :success_color, class: "color", data: { default: 0x28A745, theme_target: "color", action: "theme#updatePreview" }, readonly: :readonly
-        .col-sm-6
-          = f.text_field :success_text, class: "color", data: { default: 0xFFFFFF, theme_target: "color", action: "theme#updatePreview" }, readonly: :readonly
+        = render "settings/theme/input", f:, field_name: :success_color, default: 0x28A745
+        = render "settings/theme/input", f:, field_name: :success_text, default: 0xFFFFFF
         .col-sm-12
           .alert.alert-success= t(".colors.alert.example", type: t(".colors.alert.type.success"))
       .row
-        .col-sm-6
-          = f.text_field :dark_color, class: "color", data: { default: 0x343A40, theme_target: "color", action: "theme#updatePreview" }, readonly: :readonly
-        .col-sm-6
-          = f.text_field :dark_text, class: "color", data: { default: 0xFFFFFF, theme_target: "color", action: "theme#updatePreview" }, readonly: :readonly
+        = render "settings/theme/input", f:, field_name: :dark_color, default: 0x343A40
+        = render "settings/theme/input", f:, field_name: :dark_text, default: 0xFFFFFF
         .col-sm-12
           %a.btn.btn-dark.mb-3{ href: "#" }= t(".colors.button.example", type: t(".colors.button.type.dark"))
       .row
-        .col-sm-6
-          = f.text_field :light_color, class: "color", data: { default: 0xF8F9FA, theme_target: "color", action: "theme#updatePreview" }, readonly: :readonly
-        .col-sm-6
-          = f.text_field :light_text, class: "color", data: { default: 0xFFFFFF, theme_target: "color", action: "theme#updatePreview" }, readonly: :readonly
+        = render "settings/theme/input", f:, field_name: :light_color, default: 0xF8F9FA
+        = render "settings/theme/input", f:, field_name: :light_text, default: 0xFFFFFF
         .col-sm-12
           %a.btn.btn-light.mb-3{ href: "#" }= t(".colors.button.example", type: t(".colors.button.type.light"))
       .row
-        .col-sm-6
-          = f.text_field :muted_text, class: "color", data: { default: 0x6C757D, theme_target: "color", action: "theme#updatePreview" }, readonly: :readonly
+        = render "settings/theme/input", f:, field_name: :muted_text, default: 0x6C757D
         .col-sm-6
           %p.pt-4.text-muted= t(".colors.text.example")
   .card
@@ -103,14 +82,11 @@
       %p= t(".forms.body")
 
       .row
-        .col-sm-6
-          = f.text_field :input_color, class: "color", data: { default: 0xFFFFFF, theme_target: "color", action: "theme#updatePreview" }, readonly: :readonly
-        .col-sm-6
-          = f.text_field :input_text, class: "color", data: { default: 0x000000, theme_target: "color", action: "theme#updatePreview" }, readonly: :readonly
+        = render "settings/theme/input", f:, field_name: :input_color, default: 0xFFFFFF
+        = render "settings/theme/input", f:, field_name: :input_text, default: 0x000000
 
       .row
-        .col-sm-6
-          = f.text_field :input_placeholder, class: "color", data: { default: 0x6C757D, theme_target: "color", action: "theme#updatePreview" }, readonly: :readonly
+        = render "settings/theme/input", f:, field_name: :input_placeholder, default: 0x6C757D
         .col-sm-6
           .form-group
             %label.form-label Example Input