Just The Docs 다크 모드 추가
작성일: 2023-10-22Prerequisite
- Jekyll Theme 로컬 환경 구축
다크 모드
사용자 편의 기능인 다크 모드를 추가하면 좋겠다 생각해서 just-the-docs 설정에서 color_scheme 항목을 찾았습니다.
_config.yml
# Color scheme currently only supports "dark", "light"/nil (default), or a custom scheme that you define
color_scheme: light
해당 속성은 head에서 css를 불러올 때 아래와 같이 동작합니다.
_includes/head.html
<head>
...
<link rel="stylesheet" href="{{ '/assets/css/just-the-docs-default.css' | relative_url }}">
assets/css/just-the-docs-default.css
---
---
{% if site.color_scheme and site.color_scheme != "nil" %}
{% assign color_scheme = site.color_scheme %}
{% else %}
{% assign color_scheme = "light" %}
{% endif %}
{% include css/just-the-docs.scss.liquid color_scheme=color_scheme %}
_includes/css/just-the-docs.scss.liquid
{% if site.logo %}
$logo: "{{ site.logo | relative_url }}";
{% endif %}
@import "./support/support";
@import "./custom/setup";
@import "./color_schemes/light";
{% unless include.color_scheme == "light" %}
@import "./color_schemes/{{ include.color_scheme }}";
{% endunless %}
@import "./modules";
{% include css/callouts.scss.liquid color_scheme = include.color_scheme %}
{% include css/custom.scss.liquid %}
위 코드에서 color_scheme 값에 따라 color_schemes 폴더에 있는 scss 파일을 읽고 있습니다.
하지만 이는 처음 구동시에만 적용이 가능하고, 브라우저에서 버튼으로 컨트롤 할 수 없었습니다.
저와 같은 고민을 하는 사람이 있을 것으로 생각해서 GitHub Issues 탭을 검색하다 다크 모드를 적용했다는 댓글을 발견했습니다.
위 사이트 저장소를 확인 후 해당 commit을 적용해서 다크 모드를 적용했습니다.