如何在Rails 7应用的CSS暗色主题中适配输入框？

问题详情 #

我正在运行Rails 7应用，已通过CSS实现基础的暗色模式切换功能，但输入框（文本框、文本域等）未同步切换到暗色样式，字体仍为浅色，导致内容不可读。

现有CSS代码：

body.light {
  color: black;
  background-color: white;
}
body.dark {
  color: white;
  background-color: black;
}

我曾尝试单独设置输入框的暗色样式，但不知道如何与body.dark整合，希望避免手动为每个输入框添加暗色模式类：

input[type=text] {
  background-color: black;
  color: white;
}

补充代码：

application_controller.rb #

def set_theme
  if params[:theme].present?
    theme = params[:theme].to_sym
    # session[:theme] = theme
    cookies[:theme] = theme
    redirect_to(request.referer || root_path)
  end
end

application.html.erb #

<body class="<%= cookies[:theme] %>">

  <% if cookies[:theme] == "light" %>
    <%= link_to "切换暗色模式", root_path(theme: "dark") %>
  <% else %>
    <%= link_to "切换亮色模式", root_path(theme: "light") %>
  <% end %>
  
  <%= yield %>

</body>

解决方案 #

通过后代选择器将表单控件样式与body.dark关联，当body类为dark时自动应用暗色样式，无需手动给每个输入框加类。

修改后的完整CSS：

body.light {
  color: black;
  background-color: white;
}
body.dark {
  color: white;
  background-color: black;
}

/* 暗色模式下的表单控件样式 */
body.dark input[type=text],
body.dark input[type=email],
body.dark input[type=password],
body.dark textarea,
body.dark select {
  background-color: #2d2d2d; /* 深灰替代纯黑，提升阅读舒适度 */
  color: white;
  border-color: #444; /* 同步调整边框颜色 */
}

/* 可选：同步聚焦状态样式 */
body.dark input[type=text]:focus,
body.dark input[type=email]:focus,
body.dark input[type=password]:focus,
body.dark textarea:focus,
body.dark select:focus {
  border-color: #666;
  outline-color: #888;
}

关键说明 #

• 利用body.dark 选择器的层级关系，仅在暗色模式激活时生效
• 覆盖常见表单控件类型，避免遗漏
• 深灰色背景比纯黑更适合界面显示，同时与页面背景形成细微区分
• 同步调整聚焦样式，保持交互体验一致性

内容的提问来源于stack exchange，提问作者LJ-03