SASS에서 다음처럼 일단 색상표를 만들어 나감:

1
2
3
4
5
6
7
8
9

  \:root
      color-scheme: light dark

      --bg-color: #{$bg_beige}
      --text-color: #{$blackish_text}

      @media (prefers-color-scheme: dark)
        --bg-color: #{$monochrome_black}
        --text-color: #{$monochrome_lgrey}

1. color-scheme: 👉 [MDN] color-scheme

2. $bg_beige, $blackish_text 등의 색상값들은 그 위에서 SASS변수로 등록:

   1 2	$bg_beige: #fffbeb $blackish_text: #5c5537

사용은 이런 느낌으로 했다:

1
2
3

  body
    background-color: var(--bg-color)
    color: var(--text-color)

👉 [MDN] light-dark() 이런 것도 이제 지원하기는 하던데. 쓰진 않음.

최근에 추가되어 호환성이 아직인거 같아서.

아마 장점은, var(...) 사용하려면, :root pseudo-class에 css 변수들 등록해 놓아야 하는데, 그럴 필요 없이 바로 light/dark-mode에 따른 컬러값 literal 적어줄 수 있을거 같다.

그런데 그냥 어차피 색상표/팔레트 정리하기로 마음 먹었으니 안썼다. 🍣

1. 👉 [SO] How do I detect dark mode using JavaScript?
2. 👉 [SO] How to override css prefers-color-scheme setting

위 링크들 베껴서:

1. 다크모드 토글버튼

   1. +다음에 페이지 다시 로딩되면, 선택한 색상테마가 다시 불리도록 local-storage 저장하기.

2. 페이지 로딩되면:

   1. 이전에 선택되어 local-storage에 저장해놓은 색상테마으로 전환.
   2. 아니면 냅두기. (사용자 OS/브라우저 preferences가 그냥 먹도록)

Hugo 블로그생성기의 chromastyles으로 코드 문법강조를 사용하고 있었는데, 이걸 색상모드별로 적당히 전환하고 싶었다.

원래는:

1. hugo gen chromastyle 명령으로 특정한 1개 테마의 스타일시트를 미리 생성하고,
2. (그걸 적용해도 문제가 없는게) darkmode.js이 color-inverse해줬으니 그럴싸하게 보였었다.

그래서:

1. 원하는 스타일시트 2개(light/dark)을 골라서 둘 다 다른 CSS파일으로 생성하도록 빌드스크립트를 수정.

   1. … chroma style gallery 참고해서 원하는 스킴을 지정했다.
   2. … Hugo config.toml-에 “공식”-설정키는 markup.highlight/style-이었는데, “비공식”-설정키 lightStyle / darkStyle-을 추가하고, 원래의 “공식“설정키는 무시하기로 했다.
2. color-mode 전환시에 매칭되는 CSS파일을 페이지에 로딩하도록 JS.

ㅎㅎ 상당히 hacky하지만 잘 동작한다.

1
2
3
4

  # config.toml
  [markup.highlight]
  lightStyle='solarized-light'
  darkStyle='solarized-dark256'

1
2
3
4
5
6
7
8
9

  # Makefile
  chromastyles:
  	hugo gen chromastyles \
  		--style=`cat config.toml | perl ./scripts/toml-get.pl markup highlight lightStyle` \
  		> static/css/chroma.light.css

  	hugo gen chromastyles \
  		--style=`cat config.toml | perl ./scripts/toml-get.pl markup highlight darkStyle` \
  		> static/css/chroma.dark.css

…위에서 config.toml-파일의 특정 설정키를 읽어서 hugo gen chromastyles 명령에 먹여주는 Perl스크립트는:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

  #!/usr/bin/env perl
  #
  # toml-get.pl
  #

  use strict;
  use warnings;
  use TOML;
  use Data::Diver qw(Dive);

  my $slurped = do { local $/; <STDIN> };
  my ($t, $err) = TOML::from_toml($slurped);
  die $err if $err;

  print Dive($t, @ARGV);

Data::Diver 사용해서 설정키 하위경로 접근을 커맨드라인에서 편하게 받도록 했다. …직접 스크립트를 고정해서 짜주거나 않아도 되어서 이것도 좋아하는 Hack🪓. ²

그리고 마지막으로 JS쪽에서 테마에 따라 해당 문법강조 테마에 따른 CSS파일을 로딩해줬다. 👉 [SO] How to load in an external CSS file dynamically?