Theming

Styling & Theming in React: Dress Your App in Style! 👗

Imagine your app is like a person getting ready for a party. Theming is picking out the perfect outfit that matches everywhere—shoes, hat, shirt—all coordinated!

The Big Picture

Think of a theme as a costume box. Inside the box, you have colors, sizes, and styles that everyone in your app can share. When you change the box, everyone gets a new outfit at once!

graph TD
    A["Theme Box"] --> B["Colors"]
    A --> C["Fonts"]
    A --> D["Spacing"]
    B --> E["All Components Use Same Colors"]
    C --> E
    D --> E

1. Theme Fundamentals

What IS a Theme?

A theme is a set of rules that tells every part of your app:

• What colors to use
• How big things should be
• What fonts to show

Real-life example: When you go to McDonald’s, everything is red and yellow. That’s their “theme”! Every store, every sign, every wrapper—same colors.

Why Use Themes?

The Theme Object

In React, a theme is just a JavaScript object:

const theme = {
  colors: {
    primary: '#FF6B6B',
    secondary: '#4ECDC4',
    background: '#FFFFFF'
  },
  fonts: {
    main: 'Karla, sans-serif'
  }
};

Think of it like a recipe card. You write down all your favorite ingredients (colors, fonts) in one place!

2. CSS Variables: The Magic Labels

What Are CSS Variables?

CSS variables are like sticky notes you put on colors. Instead of remembering “#FF6B6B”, you give it a friendly name like “primary-color”.

Before CSS Variables:

.button {
  background: #FF6B6B;
}
.header {
  color: #FF6B6B;
}
/* Same color written 100 times! */

With CSS Variables:

:root {
  --primary-color: #FF6B6B;
}
.button {
  background: var(--primary-color);
}
.header {
  color: var(--primary-color);
}

How to Create CSS Variables

Step 1: Put them in :root (the very top of your page):

:root {
  --main-bg: white;
  --text-color: #333333;
  --accent: coral;
}

Step 2: Use them anywhere with var():

.card {
  background: var(--main-bg);
  color: var(--text-color);
  border: 2px solid var(--accent);
}

Naming Your Variables

Good names are like good nicknames—easy to remember!

3. Theme Switching: Changing Outfits!

The Magic of Theme Switching

Remember our costume box? Theme switching means swapping the whole box for a different one!

graph LR
    A["User Clicks Button"] --> B["Change CSS Variables"]
    B --> C["Whole App Updates!"]

How It Works in React

Method 1: Using a Class

function App() {
  const [theme, setTheme] =
    useState('light');

  return (
    <div className={theme}>
      <button
        onClick={() =>
          setTheme(theme === 'light'
            ? 'dark'
            : 'light')
        }
      >
        Switch Theme
      </button>
    </div>
  );
}

The CSS:

.light {
  --bg-color: white;
  --text-color: #333;
}
.dark {
  --bg-color: #1a1a2e;
  --text-color: #eee;
}
.app {
  background: var(--bg-color);
  color: var(--text-color);
}

Method 2: Using JavaScript

You can also change variables directly:

document.documentElement
  .style.setProperty(
    '--bg-color',
    '#1a1a2e'
  );

This is like reaching into the costume box and swapping just one item!

4. Dark Mode: Nighttime Outfit

What is Dark Mode?

Dark mode is when your app wears dark clothes instead of light ones. It’s easier on the eyes at night, like turning down the lights in your room!

Light Mode: White background, dark text Dark Mode: Dark background, light text

Building Dark Mode

Step 1: Define both themes:

:root {
  --bg: #ffffff;
  --text: #2c3e50;
  --card: #f5f5f5;
}

[data-theme="dark"] {
  --bg: #1a1a2e;
  --text: #e0e0e0;
  --card: #2d2d44;
}

Step 2: Create a toggle in React:

function ThemeToggle() {
  const [isDark, setIsDark] =
    useState(false);

  useEffect(() => {
    document.documentElement
      .setAttribute(
        'data-theme',
        isDark ? 'dark' : 'light'
      );
  }, [isDark]);

  return (
    <button
      onClick={() => setIsDark(!isDark)}
    >
      {isDark ? '☀️' : '🌙'}
    </button>
  );
}

Respecting User Preferences

Some people already told their phone “I like dark mode!” We can listen to that:

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1a1a2e;
    --text: #e0e0e0;
  }
}

// Check what user prefers
const prefersDark = window
  .matchMedia(
    '(prefers-color-scheme: dark)'
  )
  .matches;

Storing the Choice

Don’t make users pick their theme every time! Save it:

// Save choice
localStorage.setItem(
  'theme',
  'dark'
);

// Load choice
const saved = localStorage
  .getItem('theme');

Putting It All Together

Here’s a complete mini-example:

function App() {
  const [theme, setTheme] =
    useState(() => {
      // Check saved preference
      return localStorage
        .getItem('theme') || 'light';
    });

  useEffect(() => {
    document.documentElement
      .setAttribute('data-theme', theme);
    localStorage.setItem('theme', theme);
  }, [theme]);

  const toggle = () => {
    setTheme(t =>
      t === 'light' ? 'dark' : 'light'
    );
  };

  return (
    <div className="app">
      <button onClick={toggle}>
        {theme === 'light' ? '🌙' : '☀️'}
      </button>
      <h1>Hello, Themed World!</h1>
    </div>
  );
}

:root, [data-theme="light"] {
  --bg: #ffffff;
  --text: #333333;
  --accent: #FF6B6B;
}

[data-theme="dark"] {
  --bg: #16213e;
  --text: #e8e8e8;
  --accent: #4ECDC4;
}

.app {
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  padding: 20px;
}

button {
  background: var(--accent);
  border: none;
  padding: 10px 20px;
  border-radius: 8px;
  cursor: pointer;
}

Quick Recap

graph TD
    A["Theme Fundamentals"] --> B["CSS Variables"]
    B --> C["Theme Switching"]
    C --> D["Dark Mode"]

    A -.-> E["Define colors, fonts in one place"]
    B -.-> F["Use --name and var"]
    C -.-> G["Swap variables on click"]
    D -.-> H["Dark bg + light text"]

You Did It! 🎉

Now you know how to:

• ✅ Create a theme with colors and fonts
• ✅ Use CSS variables to share styles
• ✅ Switch themes with a button
• ✅ Build dark mode that remembers user choice

Your app can now change outfits anytime—day or night! 🌞🌙