# Jupyter Lab CSS 변경

Jupyter lab Dark 테마에서 문자열색이 잘 안보이는 문제가 발생

![](https://content.screencast.com/users/beneapp/folders/Snagit/media/d8701cef-3238-4a36-96f0-9be071368140/2019-07-02_10-31-58.png)


1. extension으로 테마 변경
2. 위 방법으로 안되면 CSS 변경

## Extension 활성화를 통해 추가 테마 설치

setting → Advanced Settings Editor 클릭

![](https://content.screencast.com/users/beneapp/folders/Snagit/media/8a9bf664-b3f5-46f9-9cf2-015383eca3b9/2019-07-02_10-32-48.png)

Extension Manager 선택후 User Preferences 를 작성합니다.

```shell
{
  "enabled": true
}
```


![](https://content.screencast.com/users/beneapp/folders/Snagit/media/dd1f7f8c-619a-4f89-bbd2-32e73ef25cd9/2019-07-02_10-33-29.png)

저장한 후 확장탭에서 테마 검색 후 설치합니다.

![](https://content.screencast.com/users/beneapp/folders/Snagit/media/091184e8-5b3e-49dd-ad4a-4112f418ac64/2019-07-02_10-35-15.png)

만약 버전이 안맞아서 build 에서 실패할 경우 CSS를 직접 수정합니다.

## CSS 수정

`dark` 테마의 경우 /usr/local/share/jupyter/lab/themes/@jupyterlab/theme-dark-extension 에 있는 `index.css` 파일을 수정합니다.


문자열의 색을 변경하기 위해 351번째의 줄을 주석처리하고, 352줄을 추가하였습니다.

```css
/* --jp-mirror-editor-string-color: #ba2121; */
--jp-mirror-editor-string-color: #ec642c;
```

이 후 테마를 light로 변경 후 다시 `dark`로 변경하면 CSS가 적용된 것을 확인 할 수 있습니다.

![](https://content.screencast.com/users/beneapp/folders/Snagit/media/e200260b-2b23-4a1c-bbbd-0d2eada2ec57/2019-07-02_10-38-52.png)


> miniconda의 경우 위치는 다음과 같습니다. 
> ~/miniconda3/share/jupyter/lab/themes/@jupyterlab/theme-dark-extension