Ora

How to Add Custom Colors in React

Published in React Styling 5 mins read

Adding custom colors in React applications enhances brand consistency and provides a personalized user experience. You can effectively integrate custom color palettes using various styling approaches, from standard CSS methods to modern CSS-in-JS libraries and utility frameworks.

1. Using CSS Variables (Custom Properties)

CSS variables, also known as custom properties, offer a powerful and flexible way to manage custom colors across your React application. They allow you to define color values once and reuse them throughout your stylesheets, making updates easy and consistent.

  • Definition: Declare custom properties, typically in your global CSS file (e.g., App.css, index.css) or within a specific component's scope. Defining them in :root makes them globally accessible.

    /* src/index.css or public/index.css */
:root {
  --primary-color: #007bff;
  --secondary-color: #6c757d;
  --success-color: #28a745;
  --warning-color: #ffc107;
  --info-color: #17a2b8;
  --custom-purple: #6f42c1;
}

  • Usage: Apply these variables in your CSS, SCSS, or Less files using the var() function.

    /* src/components/MyButton.css */
.my-button {
  background-color: var(--primary-color);
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;
}

.my-button:hover {
  background-color: var(--info-color);
}

  • In React Component: Import your CSS file and apply the classes.

    // src/components/MyButton.jsx
import React from 'react';
import './MyButton.css'; // Make sure to import your component's CSS

function MyButton({ text }) {
  return (
    <button className="my-button">
      {text}
    </button>
  );
}

export default MyButton;

    For more details on CSS variables, refer to the MDN Web Docs on CSS Custom Properties.

2. Utilizing CSS Modules

CSS Modules provide scoped styling, ensuring that your custom color classes don't accidentally override styles elsewhere in your application. Each CSS class name is automatically hashed to create unique names.

  • Definition: Create a CSS module file (e.g., MyComponent.module.css) and define your custom colors as classes.

    /* src/components/MyComponent.module.css */
.primaryText {
  color: #007bff;
}

.secondaryBackground {
  background-color: #6c757d;
  padding: 10px;
  border-radius: 4px;
}

.specialHighlight {
  color: #ff5733;
  font-weight: bold;
}

  • Usage: Import the module into your React component and access the class names as properties of the imported object.

    // src/components/MyComponent.jsx
import React from 'react';
import styles from './MyComponent.module.css'; // Import as 'styles'

function MyComponent() {
  return (
    <div>
      <p className={styles.primaryText}>This text uses a primary custom color.</p>
      <div className={styles.secondaryBackground}>
        <p className={styles.specialHighlight}>Background with a secondary color, and text with a special highlight.</p>
      </div>
    </div>
  );
}

export default MyComponent;

3. Styling with CSS-in-JS Libraries (e.g., Styled Components)

CSS-in-JS libraries like Styled Components allow you to write actual CSS code inside JavaScript, offering dynamic styling capabilities and component-scoped styles. This is ideal for defining custom colors that might change based on component props or themes.

  • Installation:

    npm install styled-components
# or
yarn add styled-components

  • Definition and Usage: Define custom colors directly within your styled components or using a ThemeProvider for global access.

    // src/styles/theme.js (Optional: for a global theme)
export const theme = {
  colors: {
    primary: '#007bff',
    secondary: '#6c757d',
    accent: '#ff9900',
    text: '#333333',
    background: '#f8f9fa',
  },
  fonts: {
    heading: 'Arial, sans-serif',
    body: 'Helvetica, sans-serif',
  },
};
    // src/App.js (Using ThemeProvider)
import React from 'react';
import styled, { ThemeProvider } from 'styled-components';
import { theme } from './styles/theme'; // Import your theme

const StyledButton = styled.button`
  background-color: ${props => props.theme.colors.primary};
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;

  &:hover {
    background-color: ${props => props.theme.colors.accent};
  }
`;

const StyledText = styled.p`
  color: ${props => props.theme.colors.text};
  font-family: ${props => props.theme.fonts.body};
`;

function App() {
  return (
    <ThemeProvider theme={theme}>
      <div>
        <StyledText>This text gets its color from the theme.</StyledText>
        <StyledButton>Click Me!</StyledButton>
      </div>
    </ThemeProvider>
  );
}

export default App;

    Learn more about theming with Styled Components documentation.

4. Integrating with Utility-First CSS Frameworks (e.g., Tailwind CSS)

Frameworks like Tailwind CSS allow you to define custom colors in their configuration, which then generates utility classes you can use directly in your JSX.

  • Configuration: Extend your tailwind.config.js file to add custom color palettes.

    // tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        'regal-blue': '#243c5a',
        'deep-green': '#1e8449',
        'sunset-orange': '#fd7e14',
        'off-white': '#f8f8f8',
      },
    },
  },
  plugins: [],
}

  • Usage: Use the generated utility classes in your React components.

    // src/components/MyCard.jsx
import React from 'react';

function MyCard({ title, description }) {
  return (
    <div className="bg-off-white p-6 rounded-lg shadow-md border border-deep-green">
      <h3 className="text-regal-blue text-xl font-semibold mb-2">{title}</h3>
      <p className="text-gray-700 text-sunset-orange">{description}</p>
      <button className="mt-4 bg-deep-green text-white py-2 px-4 rounded-md hover:bg-regal-blue">
        Learn More
      </button>
    </div>
  );
}

export default MyCard;

    Explore more at the Tailwind CSS documentation.

5. Programmatic Color Generation and Custom Tools

Beyond static color definitions, you might need to generate or select custom colors dynamically, perhaps based on user input or an external source. For highly dynamic or user-defined color schemes, you can even consider creating a custom color picking tool. This could involve leveraging browser APIs like canvas and event listeners to capture color values directly from specific pixels on the screen. Such a tool allows users to define colors interactively, which can then be fed into your application's styling system (e.g., updating CSS variables, theme objects, or state) to apply unique, user-generated custom colors. This offers an advanced level of customization, moving from predefined palettes to entirely interactive color selection.

Choosing the Right Method

The best approach depends on your project's scale, complexity, and specific requirements for dynamic styling.

Method Best For Pros Cons
CSS Variables Global themes, static custom palettes Easy to implement, highly maintainable, native browser support Less dynamic than CSS-in-JS, can be verbose for component-specific
CSS Modules Component-scoped styles, avoiding global conflicts Encapsulated styles, prevents naming collisions, good for medium apps Still separates CSS from JS, can feel less dynamic
Styled Components Dynamic styling, complex themes, component-level Highly dynamic, prop-based styling, strong theming support, colocation Learning curve, potential runtime overhead, requires a library
Tailwind CSS Rapid development, utility-first approach Extremely fast styling, responsive design out-of-the-box, easy customization Can lead to lengthy class lists, initial setup complexity
Programmatic Tools User-defined colors, interactive customization Ultimate flexibility, user empowerment Complex to build, requires advanced JavaScript/canvas knowledge

By understanding these methods, you can effectively integrate and manage custom colors, making your React applications visually appealing and maintainable.

← Previous Article
How do you hide your Instagram account from search?
Next Article →
What is a 400 phone number?