CSS-in-JS ile Renk Yönetimi

CSS-in-JS (styled-components, Emotion, Vanilla Extract vb.) ile renk yönetimi, tema token'ları, dinamik renkler ve type-safe tema yapıları sunar. Bu rehberde theme objeleri, renk erişim pattern'leri, CSS variables ile karşılaştırma ve performans konularını ele alıyoruz.

Theme Token Yapısı

CSS-in-JS kütüphanelerinde tema genellikle bir JavaScript objesi olarak tanımlanır. Renkler semantik anahtarlarla gruplanır: primary, secondary, background, text, border vb. Bu yapı, tutarlı renk kullanımı ve kolay tema değişimi sağlar.

const theme = {
  colors: {
    primary: '#6366f1',
    primaryHover: '#4f46e5',
    secondary: '#8b5cf6',
    background: '#ffffff',
    surface: '#f9fafb',
    text: '#111827',
    textMuted: '#6b7280',
  },
  gradients: {
    primary: 'linear-gradient(135deg, #6366f1, #8b5cf6)',
    hero: 'linear-gradient(135deg, #6366f1 0%, #ec4899 100%)',
  },
};

Bu token'lar Palet Oluşturucu ile hazırladığınız renklerden türetilebilir.

styled-components ile Kullanım

styled-components'ta ThemeProvider ile tema sağlanır. Bileşenler props.theme veya useTheme() hook'u ile erişir.

import styled from 'styled-components';

const Button = styled.button`
  background: ${props => props.theme.colors.primary};
  color: white;
  &:hover {
    background: ${props => props.theme.colors.primaryHover};
  }
`;

const Hero = styled.section`
  background: ${props => props.theme.gradients.hero};
  padding: 4rem 2rem;
`;

Tema değiştiğinde (örn. dark mode) ThemeProvider'a farklı theme objesi geçirilir; tüm bileşenler otomatik güncellenir.

Emotion ile Kullanım

Emotion da ThemeProvider kullanır ve API benzerdir. @emotion/react veya @emotion/styled ile tema erişimi sağlanır.

import { css } from '@emotion/react';
import { useTheme } from '@emotion/react';

const cardStyles = (theme) => css`
  background: ${theme.colors.surface};
  color: ${theme.colors.text};
  border: 1px solid ${theme.colors.textMuted};
`;

Vanilla Extract

Vanilla Extract, zero-runtime CSS-in-JS sunar. Stiller build sırasında çıkarılır. Theme için createTheme veya themeContract kullanılır. Daha performanslı bir alternatif olarak öne çıkar.

import { createTheme } from '@vanilla-extract/css';

export const [themeClass, theme] = createTheme({
  color: {
    primary: '#6366f1',
    text: '#111827',
  },
});

TypeScript ile type-safe tema yapısı kolayca kurulur.

Dinamik Renkler

Prop'lara göre renk değiştirmek CSS-in-JS'te doğal olarak yapılır. Örneğin variant="primary" | "danger" ile farklı renkler uygulanabilir.

const Button = styled.button`
  background: ${props =>
    props.variant === 'primary'
      ? props.theme.colors.primary
      : props.theme.colors.danger
  };
`;

Gradient'ler de dinamik olarak theme'den alınabilir. React tema yönetimi rehberimizde Context ve ThemeProvider entegrasyonunu inceleyebilirsiniz.

CSS Variables ile Karşılaştırma

CSS-in-JS theme'leri runtime'da JavaScript ile enjekte edilir. CSS custom properties ise DOM'da tanımlanır ve tarayıcı tarafından yönetilir. Performans açısından: CSS variables daha hafiftir; stil hesaplaması tarayıcıda yapılır. CSS-in-JS ise JavaScript işleme ve stil enjeksiyonu gerektirir.

Ancak CSS-in-JS, TypeScript type-safety, koşullu stiller ve bileşen-scoped stil yönetimi sunar. Büyük projelerde her iki yaklaşımı birlikte kullanabilirsiniz: tema renkleri CSS variables'da, bileşen-spesifik stiller CSS-in-JS'te. CSS değişkenleri best practices ve CSS variables ile tema rehberlerimizde hibrit stratejileri bulabilirsiniz.

Type-Safe Tema

TypeScript ile tema objesini tip tanımlayarak, yanlış renk anahtarı kullanımını derleme aşamasında yakalayabilirsiniz.

interface ThemeColors {
  primary: string;
  primaryHover: string;
  text: string;
}

const theme: { colors: ThemeColors } = {
  colors: {
    primary: '#6366f1',
    primaryHover: '#4f46e5',
    text: '#111827',
  },
};

Performans

styled-components ve Emotion runtime'da stil hesaplar. Büyük uygulamalarda critical CSS çıkarma, kod bölme ve gereksiz re-render'ları önleme önemlidir. Vanilla Extract veya Linaria gibi zero-runtime çözümler, build zamanında CSS ürettiği için daha hafif paket boyutu sunar. Proje ihtiyacına göre seçim yapın.

Özet

CSS-in-JS ile renk yönetimi, theme token'ları ve dinamik stiller sayesinde güçlü bir yapı sunar. styled-components, Emotion veya Vanilla Extract ile tema objenizi merkezi tutun, type-safe yapı kurun ve gerektiğinde CSS variables ile hibrit yaklaşım deneyin. Gradient Oluşturucu ile hazırladığınız gradient'leri tema gradient objenize ekleyebilirsiniz.