Recently I wanted to add theming support to one of my side projects and I shared about it on Twitter and had someone ask to make a post sometime. Matt Swanson wrote more about this on BoringRails, and that's originally how I got the idea to do this, so thanks Matt!
Just as a standard disclaimer, there are many ways you can add theming support and this is just one way I’ve done so, I hope it gives you some ideas for your next project.
What are we building?
This is the end result, in this case I’ve chosen to use a preset-list of primary colors from TailwindCSS’s coloring because I think they look nice for my use-case.
To start I chose a color picker for my project, I picked this one even though it’s no longer having new features added because it works well with TailwindCSS, allows me to set Swatches of colors to pick from and allowed me to customize much of it.
You might want to look at another package if that isn’t within your tolerance for your project like some React color picker or similar. Since I’m keeping my frontend light with just Stimulus when needed this works okay for my needs.
yarn add @simonwep/pickr
I’m using this color picker in another place in my app, but have more of the configuration options turned on still, so a user can select their color with a picker instead of just a color swatch selector.
We’ll come back and implement the color picker, but first we need to add a column to our database so we can store the color preferences for our users. As a note, I’ve decided to store my chosen colors as HEX codes, but you can use RGB, RGBA or whatever else you’d like. You’d need to update the tailwind.config.js file to reference them with the format for css however. Matt Swanson wrote more about this on BoringRails. Generating the fields to store the theme options
rails generate migration AddThemeSettingsToUser
Now we can update this file to look like so
class AddThemeSettingsToUser < ActiveRecord::Migration[7.0]
def change
add_column(:users, :theme_settings, :jsonb, default: {})
end
end
I'm using a jsonb column because with Postgres and Rails it's super powerful to add new 'columns' at will. Next I want to add a gem called store_attribute to my application to help set some defaults for new users when they sign up for our app.
bundle add store_attribute
Now in our User model let's reference the new gem's column store.
I’m using two primary settings here, a `primary_color` and `primary_color_hover` setting. You may need more depending on your application, but this works for me.
Then in my layout I render a `shared/colors` partial inside a
Now with that, Tailwind will generate us `bg-primary` `text-primary` `border-primary` etc and primary-hover variants we can use throughout our application.
Setting and saving the columns on the User
Somewhere in your app you'll need a field for the user to select and send the primary_color and primary_color_hover option to the backend. I'll leave that exercise up to the reader, but be sure to permit those params on the backend. For example here's my Settings::ThemesController
module Settings
class ThemesController < ApplicationController
def edit
end
def update
if Current.user.update(user_params)
respond_to do |format|
format.html { redirect_to edit_settings_theme_path, notice: "Theme updated" }
format.turbo_stream { flash.now[:notice] = "Theme updated" }
end
else
render :edit, status: :unprocessable_entity
end
end
private
def user_params
params.require(:user).permit(:primary_color, :primary_color_hover)
end
end
end
Next in settings/themes/edit.html.erb I create two hidden fields, one for my primary color, and the second for the primary color hover, we'll use the div with the data-primary-theme-color-target="picker" to actually show which main color the user selects.
Now you can open primary_color_theme_controller.js and start adding our code. Let's start by importing our package we're using and then making an initialize method that will initialize the color picker.
So we've got a basic picker here that's setting our primary color from a list of Swatches of colors that I picked from Tailwind's colors since they're pretty.
But what about the primary color hover? We created a hidden form for that so we probably want to set it up so that when we pick say the green swatch, we set the value to be green-700 for the hover color.
In my case I wanted to manually set the hover color so users couldn't select a hover color that made things look bad, so I'll make a object I map the primary color to what the hover color should be for it.
