如何在带有 CSS 的 Rails 7 应用程序中将输入字段包含到暗模式主题中？

Question

我目前正在运行 Rails 7，并有一个简单的切换开关，通过 css 更改为暗模式，遵循这个漂亮的指南： https://blog.corsego.com/ruby-on-rails-dark-mode

问题是，它不会使我的输入字段（文本字段和文本区域等）变暗，但字体仍然很亮，因此无法阅读。

这是我的 css：

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

我尝试过为文本输入包括暗模式，如下所示：

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

但我不确定如何将其与 body.dark 代码合并。 有没有办法将输入 css 包含在 body.dark 代码中？ 如果可以避免的话，我宁愿不必使用暗模式类手动编辑网站上的每个文本输入。

编辑：

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

应用程序.html.erb

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

  <% if cookies[:theme] == "light" %>
    <%= link_to "go dark", root_path(theme: "dark") %>
  <% else %>
    <%= link_to "go light", root_path(theme: "light") %>
  <% end %>
  
  <%= yield %>

</body>

Answer 1

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

尝试这个

Answer 2

原来我在尝试在application.css 8CBA22E28EB17B5F5C6AE2A266AZ 中指定输入和输入类型时遇到了语法问题。 这是我修复它的方法：

应用程序.css

body.dark input[type="text"] {
  background-color: black;
  color: white;
}

我还发现你可以用任何特定的输入类型替换“文本”，即那些特定字段的“电子邮件”和“密码”。 我还发现可以修改input变量以指定任何类型的 html 元素标记，例如标题为h1 ，文本区域为textarea ，等等。

此外，这种编码方式可确保input元素嵌套在body中，因此您无需手动将其应用于您有输入的每个 class - 它会自动将其应用于body存在的任何地方。

如何在带有 CSS 的 Rails 7 应用程序中将输入字段包含到暗模式主题中？

问题描述

2 个解决方案

解决方案1
0 2022-09-13 06:57:30

解决方案2
0 2022-09-14 06:23:59

如何在带有 CSS 的 Rails 7 应用程序中将输入字段包含到暗模式主题中？

问题描述

2 个解决方案

解决方案1 0 2022-09-13 06:57:30

解决方案2 0 2022-09-14 06:23:59

解决方案1
0 2022-09-13 06:57:30

解决方案2
0 2022-09-14 06:23:59