Yaroslav Shmarov

Posted on Nov 23, 2020 • Edited on Dec 8, 2020 • Originally published at blog.corsego.com

Ruby on Rails: Dark Mode: TLDR

#dark #css #ruby #rails

You don't need to migrate columns, have a current user, or add new stylesheets.

Here's how it works on my website:

Live Demo - try to click yourself!

Here's how to do it:

Set a body class and create links to selecting a theme:

# 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>

Persist theme in cookies:

# application_controller.rb

before_action :set_theme

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

Update your css file accordingly:

# application.scss

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

That's it! Now you can customize your css as you like.

Originally posted here

That's it!🤠

Liked this article? Please follow me! It will really motivate me to post more fun stuff!

Hands-on debugging session: instrument, monitor, and fix

Join Lazar for a hands-on session where you’ll build it, break it, debug it, and fix it. You’ll set up Sentry, track errors, use Session Replay and Tracing, and leverage some good ol’ AI to find and fix issues fast.

RSVP here →