styled component color값을 hex 코드로 쓰는데, rgba처럼 투명도 조절 하려면?

이런걸 만들다가, 투명도 조절이 필요해졌다.

모달을 만들다가 background-color에 투명도를 조절해야 했다.

styled-component로 개발하고 있어서 전역에 사용될 컬러를 미리 설정해뒀다. hex코드로.

 

//theme.js

export const color = {
  white: '#fff',
  grey_1: '#E5E5E5',
  grey_2: '#C4C4C4',
  grey_3: '#A3A3A3',
  grey_4: '#828282',
  grey_5: '#626262',
  grey_6: '#414141',
  black: '#000',
  yellow: '#fdc81d',
};

요런식으로. 그래서 투명도를 일일이 지정하기 애매해서 찾아봤더니,

hex코드도 rgba의 a값(alpha)을 지정할 수 있다.

hex코드는 6자리 혹은 3자리로 적는데, 이게 8자리인 코드가 있다. 가령

color : #A3A3A3ff

이렇게 적혀있으면 A3A3A3컬러의 투명도를 ff값으로 했다는거였다.

여기서 ff는 alpha 값을 16진수로 표현했을 때 100%에 해당하는 값이다.

color : #A3A3A300

만약 이렇게 표현했다면, 컬러값은 같지만 투명도는 0%가 된다.

 

그럼, 일일이 컬러값을 지정하는것 말고, styled-component의 ThemeProvider를 사용해 props로 받는다면, 이렇게 쓸 수 있다.

//index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import { ThemeProvider } from 'styled-components';
import Router from './Router';
import { GlobalStlye } from './styles/GlobalStyle';
import { color } from './styles/theme';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <>
    <GlobalStlye />
    <ThemeProvider theme={{ color }}>
      <Router />
    </ThemeProvider>
  </>

GlobalStyle에는 common.css처럼 전역에 적용될 속성을 미리 지정해둔 컴포넌트라서 스킾~

ThemeProvider로 Router 컴포넌트를 감싸면,

Router에서 관리하고 있는 컴포넌트에 theme이라는 props로 전달하고 있는 color값을 Router에서 관리하는 어떤컴포넌트에서도 props로 받아다 쓸 수 있게된다.

//Modal.style.js

import styled from 'styled-component'

export const Background = styled.div`
background-color: ${({ theme }) => theme.color.grey_1 + "CC"};
`

Modal을 스타일링하는 파일이다.

•  여기서 컬러값을 props로 받는데, 원래는 ${(props)=>props.theme.color.grey_1}이런식으로 props객체로 들어오는걸
•  ${({theme})=>theme.color.grey_1}로 객체 구조분해할당 해준것.
•  theme의 color값중에 grey_1이란 변수의 값("#E5E5E5")를 가져와서 background-color값으로 적용시킬때 string으로 적용된다.
•  그래서 더하기 연산자로 원하는 alpha값("CC")을 추가해주면 투명도80%가 적용된다.

이렇게.

 

alpha값는 100%~0%까지 1%단위로도 지정할 수 있는데, 편의상 10% 단위로 정리했다.

투명도(100에 가까울수록 불투명, 0에 가까울수록 투명)	16진수로 표현한 alpha값
100%	FF
90%	E6
80%	CC
70%	B3
60%	99
50%	80
40%	66
30%	4D
20%	33
10%	1A
0%	00

그런데 이걸 16진수를 언제 보고 치고 있나 싶어서 객체로 만들고 똑같이 props로 받아서 조합하는 식으로 만들었다.

//theme.js

export const color = {
  white: '#fff',
  grey_1: '#E5E5E5',
  grey_2: '#C4C4C4',
  grey_3: '#A3A3A3',
  grey_4: '#828282',
  grey_5: '#626262',
  grey_6: '#414141',
  black: '#000',
  yellow: '#fdc81d',
};

export const alpha = {
  100: 'FF',
  90: 'E6',
  80: 'CC',
  70: 'B3',
  60: '99',
  50: '80',
  40: '66',
  30: '4D',
  20: '33',
  10: '1A',
  0: '00',
};

//index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import { ThemeProvider } from 'styled-components';
import Router from './Router';
import { GlobalStlye } from './styles/GlobalStyle';
import { color,alpha } from './styles/theme';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <>
    <GlobalStlye />
    <ThemeProvider theme={{ color,alpha }}>
      <Router />
    </ThemeProvider>
  </>

//Modal.style.js

import styled from 'styled-component'

export const Background = styled.div`
background-color: ${({ theme }) => theme.color.grey_1 + theme.alpha["80"]};
`

key만 바꾸면 원활하게 잘 바뀐다.