
<p>I love colors. I love looking at them, selecting them, creating palettes and discovering new vibes. One of the goals I have for this site is to utilize it as a playground for design ideas that I have. I have bigger plans, but for the initial launch of this site I wanted to have, at bare minimum:</p>



<ul class="wp-block-list">
<li>a basic light/dark theme set</li>



<li>a toggle for users to select their preferred theme</li>



<li>persistence of a user&#8217;s preference in local storage</li>
</ul>



<p>What follows are the steps I took to make this happen.</p>



<h3 class="wp-block-heading">First, we gather our tools.</h3>



<p>Tailwind CSS came pre-installed in the Next.js template I used to spin up this site. This is the first time I have used Tailwind and so far I cannot say that I&#8217;m <em>wild</em> about it. It&#8217;s okay in theory and I will admit that it makes it fast to iterate on page templates&#8230; but I have a difficult time with the jumble of css class names that litter the markup.</p>



<pre class="wp-block-code"><code>// a little example of how quickly things can get gross  
&lt;div
    className={cn('border-b', {
      'bg-accent-7 dark:bg-accent-dark-7 border-accent-2 dark:border-accent-dark-2 text-scale-scale-11 dark:text-scaleDark-scale11': preview,
      'bg-accent-1 dark:bg-accent-dark-1 border-accent-2 dark:border-accent-dark-2': !preview,
    })}
&gt;
// something, something separation of concerns...</code></pre>



<p>So why am I keeping Tailwind? One reason is because refactoring it out of the codebase is a low priority for me at this point. It&#8217;s not <em>harming</em> anything by managing the basic markup styles on this site. Starting out with it, while keeping in mind that I may want to ditch it at a later date, is also a pretty true to life simulation of  jumping into a new project. I can&#8217;t say I&#8217;ve ever been in a position professionally where I have complete control over the tools I am to work with and I feel this is good practice at picking up something new very quickly.</p>



<p>To manage body template styles, I am using Tailwind CSS with Post CSS:</p>



<ul class="wp-block-list">
<li><a href="https://tailwindcss.com/docs/installation/using-postcss">https://tailwindcss.com/docs/installation/using-postcss</a>.</li>
</ul>



<h4 class="wp-block-heading">Mixing CSS into our JS.</h4>



<p>Ah, another pattern I initially hated when I began exploring it years ago, CSS styling generated by Javascript. Once again, memories of my mid-aughts programming professor echo through my mind, lecturing me about the separation of concerns. I was skeptical at first, but after working for 5+ years now with various CSS in JS libraries I&#8217;m now of the opinion that co-locating styles with their respective components is a far more maintainable pattern than miles and miles of unwieldy stylesheets.</p>



<p>To co-locate styles with their components, I am using Emotion&#8217;s styled components for React:</p>



<ul class="wp-block-list">
<li><a href="https://emotion.sh/docs/@emotion/react">https://emotion.sh/docs/@emotion/react</a></li>



<li><a href="https://emotion.sh/docs/@emotion/styled">https://emotion.sh/docs/@emotion/styled</a></li>
</ul>



<h4 class="wp-block-heading">Introducing a Color System.</h4>



<p>In the spirit of iterating quickly, I&#8217;ve selected Radix&#8217;s comprehensive color system and component primitives to bring the interactive portions of this website to life. I&#8217;ve used this library professionally for a few years and I have found it to be a well documented joy to use.</p>



<p>To produce coherent, comprehensive color themes, I am using Radix&#8217;s UI Colors:</p>



<ul class="wp-block-list">
<li><a href="https://www.radix-ui.com/colors">https://www.radix-ui.com/colors</a></li>
</ul>



<h2 class="wp-block-heading">Putting it all together.</h2>



<p></p>



<h3 class="wp-block-heading">Creating Emotion themes with Radix scales.</h3>



<p>Out of the box, all Radix color scales have automatic light and dark themes; see <a href="https://www.radix-ui.com/colors/docs/palette-composition/understanding-the-scale">their documentation</a> for the best explanation of how they work. The very simplest way one can implement an Emotion theme with Radix is as such:</p>



<pre class="wp-block-code"><code>// filename: lib/theme.ts
// in this example, we're simply pulling Radix's slate palettes and assigning them to their respective themes

import {
    slate,
    slateDark,
    slateA,
    slateDarkA,
  } from '@radix-ui/colors';


export const lightTheme = {
    colors: {
        ...slate,
        ...slateA,
    },
};

export const darkTheme = {
    colors: {
        ...slateDark,
        ...slateDarkA,
    },
};</code></pre>



<p>On the site, that looks something like this:</p>



<figure class="wp-block-image size-large is-resized"><img decoding="async" src="https://ravenwilde.net/wp-content/uploads/2024/03/Screenshot-2024-08-28-at-8.52.11 PM-1024x821.png" alt="Screen capture of this site with a light slate color theme." class="wp-image-164" style="width:650px;height:auto"/><figcaption class="wp-element-caption">Light Mode</figcaption></figure>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="817" src="https://ravenwilde.net/wp-content/uploads/2024/03/Screenshot-2024-08-28-at-8.52.29 PM-1024x817.png" alt="Screen capture of this site with a dark slate color theme." class="wp-image-165" srcset="https://ravenwilde.net/wp-content/uploads/2024/03/Screenshot-2024-08-28-at-8.52.29 PM-1024x817.png 1024w, https://ravenwilde.net/wp-content/uploads/2024/03/Screenshot-2024-08-28-at-8.52.29 PM-300x239.png 300w, https://ravenwilde.net/wp-content/uploads/2024/03/Screenshot-2024-08-28-at-8.52.29 PM-768x613.png 768w, https://ravenwilde.net/wp-content/uploads/2024/03/Screenshot-2024-08-28-at-8.52.29 PM-1536x1225.png 1536w, https://ravenwilde.net/wp-content/uploads/2024/03/Screenshot-2024-08-28-at-8.52.29 PM.png 1878w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /><figcaption class="wp-element-caption">Dark Mode</figcaption></figure>



<p>This was great for a first pass at this, and was the theme this site initially went live with. For this iteration, I wanted to spice it up and start cultivating some distinct vibes for each theme. To get a start on this, I created <code>scale</code> and <code>scaleDark</code> objects and transposed different Radix color scales onto each &#8211; <code>crimson</code> for the light theme, <code>skyDark</code> for the dark.</p>



<pre class="wp-block-code"><code>// filename: lib/theme.ts

import {
    skyDark,
    skyDarkA,
    crimson,
    crimsonA,
  } from '@radix-ui/colors';

export const scale = {
    scale1: crimson.crimson1,
    scale2: crimson.crimson2,
    scale3: crimson.crimson3,
    scale4: crimson.crimson4,
    scale5: crimson.crimson5,
    scale6: crimson.crimson6,
    scale7: crimson.crimson7,
    scale8: crimson.crimson8,
    scale9: crimson.crimson9,
    scale10: crimson.crimson10,
    scale11: crimson.crimson11,
    scale12: crimson.crimson12,
    scaleA1: crimsonA.crimsonA1,
    scaleA2: crimsonA.crimsonA2,
    scaleA3: crimsonA.crimsonA3,
    scaleA4: crimsonA.crimsonA4,
    scaleA5: crimsonA.crimsonA5,
    scaleA6: crimsonA.crimsonA6,
    scaleA7: crimsonA.crimsonA7,
    scaleA8: crimsonA.crimsonA8,
    scaleA9: crimsonA.crimsonA9,
    scaleA10: crimsonA.crimsonA10,
    scaleA11: crimsonA.crimsonA11,
    scaleA12: crimsonA.crimsonA12,
}

export const scaleDark = {
    scale1: skyDark.sky1,
    scale2: skyDark.sky2,
    scale3: skyDark.sky3,
    scale4: skyDark.sky4,
    scale5: skyDark.sky5,
    scale6: skyDark.sky6,
    scale7: skyDark.sky7,
    scale8: skyDark.sky8,
    scale9: skyDark.sky9,
    scale10: skyDark.sky10,
    scale11: skyDark.sky11,
    scale12: skyDark.sky12,
    scaleA1: skyDarkA.skyA1,
    scaleA2: skyDarkA.skyA2,
    scaleA3: skyDarkA.skyA3,
    scaleA4: skyDarkA.skyA4,
    scaleA5: skyDarkA.skyA5,
    scaleA6: skyDarkA.skyA6,
    scaleA7: skyDarkA.skyA7,
    scaleA8: skyDarkA.skyA8,
    scaleA9: skyDarkA.skyA9,
    scaleA10: skyDarkA.skyA10,
    scaleA11: skyDarkA.skyA11,
    scaleA12: skyDarkA.skyA12,
}

export const lightTheme = {
    colors: {
        ...scale,
    },
};
  
export const darkTheme = {
    colors: {
        ...scaleDark,
    },
};</code></pre>



<p>Radix <a href="https://www.radix-ui.com/colors/custom">offers a custom palette tool</a> that could streamline this process, and I&#8217;ll probably explore that in a later post. In the meantime, this extra layer of control allows me to select a pair of themes that really pop:</p>



<figure class="wp-block-image size-large"><img decoding="async" src="https://ravenwilde.net/wp-content/uploads/2024/03/Screenshot-2024-08-28-at-9.10.56 PM-1024x824.png" alt="" class="wp-image-167"/><figcaption class="wp-element-caption">Light Mode</figcaption></figure>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="825" src="https://ravenwilde.net/wp-content/uploads/2024/03/Screenshot-2024-08-28-at-9.11.16 PM-1024x825.png" alt="" class="wp-image-168" srcset="https://ravenwilde.net/wp-content/uploads/2024/03/Screenshot-2024-08-28-at-9.11.16 PM-1024x825.png 1024w, https://ravenwilde.net/wp-content/uploads/2024/03/Screenshot-2024-08-28-at-9.11.16 PM-300x242.png 300w, https://ravenwilde.net/wp-content/uploads/2024/03/Screenshot-2024-08-28-at-9.11.16 PM-768x618.png 768w, https://ravenwilde.net/wp-content/uploads/2024/03/Screenshot-2024-08-28-at-9.11.16 PM-1536x1237.png 1536w, https://ravenwilde.net/wp-content/uploads/2024/03/Screenshot-2024-08-28-at-9.11.16 PM.png 1880w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /><figcaption class="wp-element-caption">Dark Mode</figcaption></figure>



<p>These themes are far from finalized, but they&#8217;re more in line with where I want to take things and I enjoy the distinctive feel each theme now has.</p>



<h4 class="wp-block-heading">As I am using Typescript, I also added our colors to Emotion&#8217;s Theme type:</h4>



<pre class="wp-block-code"><code>// filename: emotion.d.ts

import '@emotion/react'

declare module '@emotion/react' {
  export interface Theme {
    colors: Record&lt;string, Primitive&gt;;
  }
}</code></pre>



<h3 class="wp-block-heading">Create a context hook to manage the theme state.</h3>



<p>Emotion&#8217;s styled components rely on a receiving theme props via a React context. To implement this, I&#8217;ve created a hook to manage the following:</p>



<ul class="wp-block-list">
<li>creates a <code>UIContext</code> and <code>UIContextProvider</code> to manage the selected theme and pass that down to child components</li>



<li>runs a check against <code>localStorage</code> to check if the user has previously selected a theme for this site or if they have `prefers-color-scheme` system level preference setting and sets the theme value to correspond</li>



<li>applies or removes a <code>dark</code> class to the <code>html</code> element as needed in order to trigger theme changes in our Tailwind styles.</li>
</ul>



<pre class="wp-block-code"><code>// filename: hooks/useUIContext.tsx

import { useEffect, useState, useContext, createContext } from "react";

// checks localStorage and system settings for theme preference
const getDefaultTheme = () =&gt; {
  if (typeof window !== 'undefined' &amp;&amp; window.localStorage) {
    if (localStorage.theme === 'dark' || (!('theme' in localStorage) &amp;&amp; window.matchMedia('(prefers-color-scheme: dark)').matches)) {
      return 'dark';
    }
  }
  return 'light';
};

const UIContext = createContext({ theme: getDefaultTheme(), setTheme: null });

export const UIContextProvider = ({ children }) =&gt; {
  const &#91;theme, setTheme] = useState(getDefaultTheme());

// adds/removes dark class to html element for Tailwind CSS dark mode
  useEffect(() =&gt; { 
    if (theme == 'dark') {
      document.documentElement.classList.add('dark');
          
      if (typeof window !== 'undefined' &amp;&amp; window.localStorage) {
        localStorage.setItem('theme', 'dark');
      }
    } else {
      document.documentElement.classList.remove('dark');
          
      if (typeof window !== 'undefined' &amp;&amp; window.localStorage) {
        localStorage.setItem('theme', 'light');
      }
    }
  }, &#91;theme]);

  return (
    &lt;UIContext.Provider value={{ theme, setTheme }}&gt;
      {children}
    &lt;/UIContext.Provider&gt;
  )
}

export const useUIContext = () =&gt; {
  const { theme, setTheme } = useContext(UIContext)
  return { theme, setTheme }
}</code></pre>



<h3 class="wp-block-heading">Add Emotion ThemeProvider and <code>useUIContext</code> hook to the site Layout component.</h3>



<pre class="wp-block-code"><code>// filename: components/layout.tsx

import { ThemeProvider } from '@emotion/react';
import { Analytics } from "@vercel/analytics/react"

import { useUIContext } from '../hooks/useUIContext';
import { lightTheme, darkTheme } from '../lib/theme';
import Alert from './alert'
import Footer from './footer'
import Header from './header';
import Meta from './meta';

export default function Layout({ pageTitle, preview, children }) {
  const { theme } = useUIContext();

  const themes = {
    light: lightTheme,
    dark: darkTheme,
  }

  return (
    &lt;div className="bg-light dark:bg-dark text-light dark:text-dark"&gt;
      &lt;Meta /&gt;
      &lt;ThemeProvider theme={themes&#91;theme]}&gt;
        &lt;Header pageTitle={pageTitle} /&gt;
        &lt;div className="min-h-screen relative"&gt;
          &lt;Alert preview={preview} /&gt;
          &lt;main&gt;{children}&lt;/main&gt;
        &lt;/div&gt;
        &lt;Footer /&gt;
      &lt;/ThemeProvider&gt;
      &lt;Analytics /&gt;
    &lt;/div&gt;
  )
}</code></pre>



<p>And that&#8217;s pretty much it for setting up our themes! In my next post, I will cover the implementation of the theme toggle component and site navigation with Radix primitives.</p>



<hr class="wp-block-separator has-alpha-channel-opacity"/>



<h2 class="wp-block-heading">Further Reading</h2>



<ul class="wp-block-list">
<li><a href="https://react.dev/learn/passing-data-deeply-with-context">Passing Data Deeply with React Context</a></li>



<li><a href="https://www.radix-ui.com/colors/docs/palette-composition/understanding-the-scale">Understanding Radix Color Scales</a></li>



<li><a href="https://emotion.sh/docs/styled">Emotion Styled Components</a></li>



<li><a href="https://emotion.sh/docs/theming">Emotion ThemeProvider</a></li>



<li><a href="https://tailwindcss.com/docs/dark-mode">Tailwind CSS Dark Mode</a></li>
</ul>


jennifer.codes | development blog

Utilizing Emotion, Tailwind, and Radix for Advanced Color Theming

More Stories

WPGraphQL JWT Authentication

New Year, New Website