Skip to main content

Styling & Theming

DEVELOPER Beginner

Customize UI appearance with Ant Design theming and CSS.

Overview​

EZ-Console uses Ant Design 5's theming system for styling. You can customize colors, fonts, spacing, and component styles through the theme configuration.

Ant Design Theme​

Basic Theme Configuration​

import { ConfigProvider } from 'antd';
import App from 'ez-console';

export default function MyApp() {
  return (
    <ConfigProvider
      theme={{
        token: {
          colorPrimary: '#1890ff',
          borderRadius: 6,
          fontSize: 14,
        },
      }}
    >
      <App />
    </ConfigProvider>
  );
}

Theme Tokens​

<ConfigProvider
  theme={{
    token: {
      // Colors
      colorPrimary: '#1890ff',
      colorSuccess: '#52c41a',
      colorWarning: '#faad14',
      colorError: '#f5222d',
      colorInfo: '#1890ff',
      
      // Typography
      fontSize: 14,
      fontSizeHeading1: 38,
      fontSizeHeading2: 30,
      fontSizeHeading3: 24,
      fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto',
      
      // Spacing
      padding: 16,
      margin: 16,
      borderRadius: 6,
      
      // Layout
      wireframe: false,
    },
  }}
>
  <App />
</ConfigProvider>

Component-Specific Theming​

<ConfigProvider
  theme={{
    token: {
      colorPrimary: '#1890ff',
    },
    components: {
      Button: {
        colorPrimary: '#00b96b',
        borderRadius: 4,
      },
      Table: {
        headerBg: '#fafafa',
        borderColor: '#e8e8e8',
      },
      Input: {
        borderRadius: 4,
        paddingInline: 12,
      },
    },
  }}
>
  <App />
</ConfigProvider>

Custom CSS​

Global Styles​

Create src/index.css:

/* Global styles */
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Custom utility classes */
.text-center {
  text-align: center;
}

.mt-16 {
  margin-top: 16px;
}

.mb-16 {
  margin-bottom: 16px;
}

Component Styles​

// styles.module.css
.container {
  padding: 24px;
  background: #fff;
  border-radius: 8px;
}

.title {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 16px;
}

// Component.tsx
import styles from './styles.module.css';

export const MyComponent: React.FC = () => {
  return (
    <div className={styles.container}>
      <h1 className={styles.title}>Title</h1>
    </div>
  );
};

Inline Styles​

export const MyComponent: React.FC = () => {
  return (
    <div
      style={{
        padding: 24,
        background: '#fff',
        borderRadius: 8,
      }}
    >
      Content
    </div>
  );
};

CSS-in-JS with styled-components​

Installation​

pnpm add styled-components
pnpm add -D @types/styled-components

Usage​

import styled from 'styled-components';

const Container = styled.div`
  padding: 24px;
  background: #fff;
  border-radius: 8px;
  
  &:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  }
`;

const Title = styled.h1`
  font-size: 20px;
  font-weight: 600;
  color: ${props => props.theme.colorPrimary};
`;

export const MyComponent: React.FC = () => {
  return (
    <Container>
      <Title>Title</Title>
    </Container>
  );
};

Dark Mode​

Theme Switching​

import { ConfigProvider, theme } from 'antd';
import { useState } from 'react';

export const App: React.FC = () => {
  const [isDark, setIsDark] = useState(false);

  return (
    <ConfigProvider
      theme={{
        algorithm: isDark ? theme.darkAlgorithm : theme.defaultAlgorithm,
        token: {
          colorPrimary: '#1890ff',
        },
      }}
    >
      <Button onClick={() => setIsDark(!isDark)}>
        Toggle Theme
      </Button>
      <App />
    </ConfigProvider>
  );
};

Custom Colors​

Color Palette​

<ConfigProvider
  theme={{
    token: {
      // Primary colors
      colorPrimary: '#1890ff',
      colorSuccess: '#52c41a',
      colorWarning: '#faad14',
      colorError: '#f5222d',
      colorInfo: '#1890ff',
      
      // Background colors
      colorBgContainer: '#ffffff',
      colorBgElevated: '#ffffff',
      colorBgLayout: '#f0f2f5',
      
      // Text colors
      colorText: 'rgba(0, 0, 0, 0.85)',
      colorTextSecondary: 'rgba(0, 0, 0, 0.65)',
      colorTextTertiary: 'rgba(0, 0, 0, 0.45)',
      
      // Border colors
      colorBorder: '#d9d9d9',
      colorBorderSecondary: '#f0f0f0',
    },
  }}
>
  <App />
</ConfigProvider>

Responsive Design​

Using Ant Design Grid​

import { Row, Col } from 'antd';

export const ResponsiveLayout: React.FC = () => {
  return (
    <Row gutter={16}>
      <Col xs={24} sm={12} md={8} lg={6}>
        <div>Column 1</div>
      </Col>
      <Col xs={24} sm={12} md={8} lg={6}>
        <div>Column 2</div>
      </Col>
    </Row>
  );
};

Media Queries​

/* styles.module.css */
.container {
  padding: 16px;
}

@media (min-width: 768px) {
  .container {
    padding: 24px;
  }
}

@media (min-width: 1200px) {
  .container {
    padding: 32px;
  }
}

Custom Components Styling​

Override Component Styles​

<ConfigProvider
  theme={{
    components: {
      Button: {
        colorPrimary: '#00b96b',
        borderRadius: 4,
        paddingInline: 20,
        paddingBlock: 8,
      },
      Table: {
        headerBg: '#fafafa',
        borderColor: '#e8e8e8',
        borderRadius: 8,
      },
      Card: {
        borderRadius: 8,
        paddingLG: 24,
      },
    },
  }}
>
  <App />
</ConfigProvider>

Best Practices​

1. Use Theme Tokens​

// ✅ Good: Use theme tokens
<ConfigProvider
  theme={{
    token: {
      colorPrimary: '#1890ff',
    },
  }}
>

// ❌ Bad: Hardcode colors
<div style={{ color: '#1890ff' }}>

2. Consistent Spacing​

// ✅ Good: Use consistent spacing
<ConfigProvider
  theme={{
    token: {
      padding: 16,
      margin: 16,
    },
  }}
>

// ❌ Bad: Inconsistent spacing
<div style={{ padding: '10px 20px 15px 25px' }}>

3. Responsive Design​

// ✅ Good: Responsive layout
<Row>
  <Col xs={24} md={12} lg={8}>

// ❌ Bad: Fixed width
<div style={{ width: '500px' }}>

4. CSS Modules for Component Styles​

// ✅ Good: CSS modules
import styles from './styles.module.css';

// ❌ Bad: Global CSS classes
<div className="my-custom-class">

Need help? Ask in GitHub Discussions.