Skip to content

Makr Themes

makr1 min read

Makr app profile

Adding themes to Makr

I've been working on adding a custom themes feature to makr. Currently, you can adjust primary and secondary colors - allowing you to set your main font color and the range of the linear gradient used throughout. Additionally, you can choose between a few fonts and eventually set your background color as well.

I thought I'd quickly walk-through how I did this.

The app is built in Rails with minimal JavaScript (ironic, huh). Users can set their preferred colors (uses a simple type="color" input) and choose from a set list of fonts in their profile settings.

Profie settings

On the profile page (viewable to the logged-in user and externally viewed at the user's slug) I'm setting data attributes for each color and the font.

Data attributes set on profile

Then I have some super basic JS looking for the data attributes and setting the correlating CSS custom properties - to then apply the theme throughout. Pretty simple!

Simple JavaScript

These features are just the start. I'm looking forward to launching before all of these are shipped so I can hear from users. If you haven’t signed up to be on the Beta list, head to makr.tech and get on the list. Beta users will have the opportunity to get in first and will receive a generous discount on Pro when it’s ready.

© 2021 by Jonathan Speek