What is the best way to add input fields to a dark-themed Rails 7 application using CSS?

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>

Answer №1

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

Give it a shot!

Answer №2

After some troubleshooting, I discovered a syntax error in my attempt to define input and input types within the application.css file. Here is how I resolved the issue:

application.css

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

I also learned that you can substitute "text" with other specific input types like "email" and "password" for those particular fields. Additionally, I realized that the input variable can be adjusted to target various html element tags, such as h1 for headings, textarea for text areas, and more.

Furthermore, this coding structure ensures that the styling applied to the input element is inherited by all instances within the body, eliminating the need to manually assign it to each individual class containing an input - making the process more efficient and streamlined.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Ensure that every closing curly brace is followed by a new line character

I'm utilizing a piece of code I stumbled upon online to condense my css files and it's working well, but there's a slight regex problem that's causing me some difficulty. $css = preg_replace('/([\\w#\\.\&b ...

Web applications that utilize subtle data formats

Is it possible to format input data in HTML5, JavaScript, PHP and MySQL without changing the actual value? For instance, if we have <input value='10000.5'> The actual value is visible when looking at the html code, but on the website int ...

Step by step guide on transferring driver control from the top window to the iframe with the id of mainFrame

Currently, I am utilizing firebug to analyze the xpath. One section of firebug indicates whether the element you are trying to locate is in the window or an iframe, among other options. I have encountered a similar issue where I see 2 available choices: 1: ...

An effective method to arrange divs in a line adjacent to each other

Apologies for the repetitive question, but I am in need of some answers. In my opinion: Having 1 div with a width of 100% and 2 divs inside each with a width of 50%. Why does it not fit properly? HTML: <div id="top-menu"> <div id="logo">& ...

Distinguishing between a null image and a valid image: what to look out for?

When testing code, one of the outputs is an image. It's crucial to ensure that the image has a valid output; however, identifying a NULL image from a valid one in the inspection section seems challenging. The key difference lies in a field known as s ...

Tips on connecting a file upload button to a flip card

In my current project located in index.html, I have integrated a flip card as a profile photo feature. Additionally, I have included a file uploader button on the page. However, I am struggling to connect the functionality of the file uploader button to au ...

The UnboundLocalError occurred when trying to access the local variable 'playlist' before it was assigned

Below is the content of my views.py: def create_playlist(request): form = PlaylistForm(request.POST or None) if form.is_valid(): playlist = form.save(commit=False) playlist.name = request.name context={ 'pl ...

What is the best way to gather the contents of several textboxes and save them in a single variable?

I've been working on a page that should calculate total hours worked, but unfortunately, I'm facing issues with the output. I've tried using both querySelectorAll and getElementsByTagName by switching the class tag to the name in the textbox ...

Bootstrap icon issue: square displaying instead of the intended icon

I am currently in the process of creating a responsive website using Bootstrap 3. I have successfully downloaded and imported Bootstrap 3 into the root directory of my website. However, I have encountered an issue where the icon does not display correctly ...

Easy steps to launch Excel application with an HTML button using a web browser

How can I create a button on an HTML page that will launch an Excel application when clicked by the user? <button class="btn btn-primary" onclick="window.open('excelApplication.url','_blank')">Launch Excel</button> ...

"Step-by-step guide to layering an HTML element on top of another with CSS

I am facing an issue with positioning a small icon over a slider using HTML and CSS. The problem arises because both the slider and the icon have a position absolute, causing the slider to hide the icon. Here is the CSS code for the icon: #nav { po ...

What could be causing the discrepancy in results between the first and second methods?

Implementing Weather Icons: const getWeatherIcon = (iconParameter) => { const icon = `https://openweathermap.org/img/wn/${iconParameter}@2x.png` return <img src={icon} alt={iconParameter} /> } <div className="weathericon"> ...

The Splitter remains inactive until a peculiar series of actions is taken

Trying to troubleshoot this issue with a library called Split.js, which can be found here: https://github.com/nathancahill/Split.js I've encountered an interesting problem where I have to disable the height CSS property of my container, move the spli ...

Choosing siblings of a particular element that meet certain criteria

I am faced with the following situation: <table> <tr class="header"> <tr class="data1"> <tr class="data2"> <tr class="data3"> <tr class="header"> <tr class="data1"> <tr class="data2"> </tabl ...

Do individual JavaScript script tags operate independently of one another in terms of error handling?

My main goal is to establish a connection to my server using websockets and send messages to the browser for remote page reloads. I want to ensure that this code runs independently of any other errors on the page, allowing me to remotely refresh the page i ...

The issue with Angular's state.go function is that it is not properly refreshing the page, resulting in

Creating a mobile exam app that features multiple choice questions with previous and next question buttons. The transition between questions is handled using $state.go to load the same HTML page but with new questions and answer choices. // Within a servi ...

CSS Troubleshooting: Error in Outlining When Using Block Display

I am attempting to create a combobox using HTML and CSS where each item is displayed on a separate line and lights up blue when hovered over, similar to Google's design. The basic setup is simple. I have a div with links (a) inside, and each link is s ...

Stylish UTF-8 text in Internet Explorer

I've been encountering a persistent issue that I can't seem to resolve - in Internet Explorer, UTF-8 characters appear bold. Take a look at this code snippet: .section.about-houses .tabs-block .tab-content p { margin: 0 0 30px 0; line-hei ...

The top header must remain fixed at the top, while the bottom footer should stay fixed at the bottom of the page. The main div will then adjust to fill

My HTML code is structured using Bootstrap to create a grid layout. The goal is to have the NAV BAR and FOOTER contained within the left container, allowing the SIDEBAR on the right to display without overlapping. Here's an example image of what I&apo ...

Issues arise in mobile Safari when attempting to load JavaScript files, resulting in

Encountering an issue with my Angular app on mobile Safari during the initial load, where it hangs on a blank page for nearly 2 minutes. Interestingly, the app functions perfectly on other browsers, including Mac Safari and iPad Safari. Initially, I suspe ...