Dev

material-ui dark theme

Joo 2020. 3. 8. 22:55

혹시나 theme를 변경하게 될까 싶어 앱 전체 UI 스타일을 css가 아닌 material-ui 자체 style로 만들었다. 하지만 theme를 변경하여 내맘대로 커스텀을 하려면 theme 전반에 대한 이해가 있어야 해서 약간 망설여지게 되었다. 감각없는 나에게 디자인 작업이라는 것은 아주 시간이 오래걸리고 힘든일이다.

결국 어찌어찌 수정해서 완료하기는 했는데 의외로 material-ui의 theme라는 것이 간단해서 어떤 부분을 건드렸는지, 어떤 부분을 주의해야하는지 정리해보려고 한다.

material-ui style

material-ui의 style은 makeStyles로 theme를 이용하여 class들을 만들고 이를 component요소에 className으로 지정하는 방식이다. v1 릴리즈에서는 모든 스타일을 이런 식으로 변경하였다.

const useStyles = makeStyles(theme => ({
  root: {
    margin: theme.spacing(2),
    backgroundColor: theme.palette.background.default
  }
}))

여기서 주의할 점은 backgroundColor를 #fff 이런식으로 상수로 지정하지 않아야 한다는거다. 상수로 지정할 경우 theme 변경과 무관해지기 때문이다. 그래서 하나의 component에서만 사용하는 값이라고 할지라도 theme에 값을 추가해서 사용하는 것이 좋다.

ThemeProvider

theme를 커스텀 하는 방법은 App전체를 ThemeProvider로 감싼 후 createMuiTheme로 만든 theme를 넘겨주는 것이다.

const theme = createMuiTheme({
  palette: {
    type: isDarkMode? 'dark' : 'light',
    primary: {
      main: '#f9dc41'
    }
  }
})

render(
  <ThemeProvider theme={theme}>
    <App />
  </ThemeProvider>
  , document.getElementById('root')
)

여기서 주의할 점은 type을 dark 혹은 light로 변경했더라도 임의로 변경한 색은 고정된다는 점이다. 따라서 type에 따른 커스텀을 완전히 분리하여 작성하는 것이 좋다. material-ui에 기본색을 지정하면 type에서 사용하는 색을 알아서 어울리게 변경해주면 좋겠지만... 그런건 없다.

dark mode 검증

electron은 기본적으로 웹기술을 사용하므로 prefers-color-scheme로 다크모드를 사용하는지 알아낼 수 있다. 하지만 이걸 사용하는 웹페이지들을 본 사람들은 알겠지만 처음엔 값을 가져오지 못해서 light 모드가 나왔다가 로드된 후에 dark로 변경되는... 그러니까 첫 로딩에서 한번 깜빡이듯 변경된다.

electron은 아무래도 데스크탑앱의 기능도 사용가능하다보니 자체적으로 제공하는 dark mode api가 있다. nativeTheme.shouldUseDarkColors를 사용하면 깜빡임없이 즉시 이 값을 사용할 수 있다. 이건 물론 electron이라서 가능한 방법이다. renderer process에는 이 api가 없으니 remote를 사용해야 한다.

나의 부족한 감각과 디테일한 부분을 무시하는 귀차니즘이 더해져 아주아주 간단한 부분만 그리고 어려운 부분은 색을 고정하는 것으로 마무리가 되었는데 이런 부분은 아마도 v2에서나 해결이 되지 않을까 싶다.

아! windows에서 다크모드를 사용하더라도 타이틀바는 여전히 흰색인데 이건 어째야할 지 모르겠다. stackoverflow에선 os 타이틀바를 사용하지 않고 직접 구현하라던데... 그건 v3이나 되어야 할 듯 ;;;

반응형