Skip to content

Choose Your Accent Color!

  • #Customization
Read time: 2 minutes
Mitchell Christ
Mitchell Christ
three pokéballs inside a suitcase presented by an aged professor, wearing a white lab coat, waering a red hat with the text "SanityPress", outdoor in the middle of the woods with an open canopy with sunlight, Hasselblad photography

One of the simplest ways to start personalizing your SanityPress site is by adjusting its color scheme. In this post, we’ll show you how to easily change the basic accent colors through the Tailwind configuration file, allowing you to start theming your site in no time.

Why Accent Colors Matter🔗

The accent color is one of the primary colors used across your website. It often appears on buttons, links, and other call-to-action elements. By changing the accent color, you can immediately shift the feel of your site to align with your brand or personal style.

Setting Up Accent Colors with Tailwind CSS🔗

SanityPress uses Tailwind CSS, which allows you to extend and customize your theme with ease. To change the accent colors of your SanityPress site, you’ll need to modify the Tailwind config file. Let's walk through it:

Tailwind Config File🔗

Below is a basic configuration for the theme where we define custom colors such as ink, canvas, and accent.

📁 tailwind.config.ts
const config: Config = {
  theme: {
    extend: {
      colors: {
        ink: '#000',
        canvas: '#fff',

        accent: '#000',

        // add more colors here
      },
    },
  },
}

Once you’ve chosen your accent color, save the changes to your Tailwind configuration file to see the new color theme applied across your site.

Sample Accents🔗

Pokémon starter themed accent colors
Dark canvas color, light ink color
Use a darker canvas color and lighter ink color to change things up!

Keep Your Site Fresh with Simple Color Tweaks🔗

Customizing your accent colors is just the beginning when it comes to personalizing your SanityPress site. Small, consistent updates like this can keep your website looking fresh and on-brand without needing a full redesign. Experiment with colors, typography, and layouts to continuously improve your site’s user experience and aesthetic.

Stay tuned for more tips on how to fine-tune your website using the power of Tailwind and SanityPress!

a pokemon trainer pointing at Charizard, with the caption text "Use Tailwind!" in a forest path with blue skies, 90s film screen grab