I am currently using Rails 7 and have implemented a simple dark mode toggle feature with CSS by following this helpful guide:
However, I am facing an issue where my input fields (such as text fields and text areas) do not change to a dark mode background, making the text unreadable due to the light font color.
This is the CSS code I have:
body.light {
color: black;
background-color: white;
}
body.dark {
color: white;
background-color: black;
}
I have attempted to include dark mode styling for text inputs like this:
input[type=text] {
background-color: black;
color: white;
}
However, I am unsure how to integrate this with the existing body.dark code. Is there a way to combine the input CSS with the body.dark styling without manually editing each text input on the website with dark mode classes?
Edit:
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 "go dark", root_path(theme: "dark") %>
<% else %>
<%= link_to "go light", root_path(theme: "light") %>
<% end %>
<%= yield %>
</body>