Dark mode in Ruby on Rails with Cookies

3 min readMay 11, 2019

As a Rails group project assignment for Flatiron School coding bootcamp, my partner and I created Fierce Stories, a website that brings more diversity to children’s stories. We care deeply about accessibility and so we wanted to include a few accessibility options, such as Dark Mode. There are plenty of code and blog posts about dark mode and themes in JavaScript. However, the assignment required us to use only Ruby on Rails. However, we managed to do without .js. This is how our page looks in both modes:

We managed to do that by setting cookies. Without cookies, the user would have to click on dark/light mode on each page and that gets pretty frustrating. So, this is how to set cookies for Dark Mode in Ruby on Rails.

Step 1: write cookie methods in the application controller

We first set cookies and then redirect the user to a page. In our case, if a user is logged in, they will be redirected to their landing page and otherwise, to the welcome screen:

def moon
  cookies[:moon] = {
    value: 'dark mode on'
  }
  if @logged_in_user
    redirect_to story_books_path
  else
    redirect_to welcome_index_path
  end
end

Although the light mode is the default one, we also set a method for it so that the user can switch the dark mode off:

def sun
  cookies.delete(:moon)
  if @logged_in_user
    redirect_to story_books_path
  else
    redirect_to welcome_index_path
  end
end

Step 2: Create routes

Now, in the config/routes.rb create routes for these two methods. You’ll need the routes later.

get '/moon', to: 'application#moon', as: 'moon'
get '/sun', to: 'application#sun', as: 'sun'

Step 3: Enable page to check cookies

In the app/views/layouts/application.html.erb, in the <head> I introduced the following code (bolded) to first check whether cookies are on, and if so — to load an appropriate stylesheet:

<head>
    <title> ✨ Fierce Stories ✨ Changing the world one story at a time  ✨ </title>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>
    <link rel="icon" href="https://upload.wikimedia.org/wikipedia/en/d/d6/Official_Logo_OneLove.png"><% if cookies[:moon] %>
    <%= stylesheet_link_tag 'application_dark', media: 'all', 'data-turbolinks-track': 'reload' %>
    <% else %>
    <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <% end %>
    <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
  </head>

Step 4: Create buttons to switch Dark Mode on/off

In our header, we have a Dark Mode/Light Mode button. The code for it looks as following:

<% if cookies[:moon] %>
<%= button_to 'Light Mode', sun_path, method: :get%>
<% else %>
<%= button_to 'Dark Mode', moon_path, method: :get%>
<% end %>

Pssst… You need a “get” method because that’s not what the buttons default to :)

Step 5: Create the Dark Style Sheet

This was pretty simple. In app/assets/stylesheets we duplicated our basic stylesheet, changed colors in a few places (e.g. h1) and introduced a dark background across the page with this simple CSS trick:

* {
  background-color: #222324;
}

And now, let’s check whether cookies work: