동작 정리
- 모드를 변경하면 화면깜빡임 없이 모드가 변경된다.
- 모드를 변경하면 session에 있는
color_mode의 값이 변경된다. - 모드를 변경하면 서버에 저장요청이 간다.
- 위 2가지 케이스의 우선순위를 따져보면, 모드가 변경되면 세션에 저장이되고, 저장요청이 간다(추측).
- 핵심은 서버의 저장된값을 다시 받아와서 세션의 값을 변경하는게 아닐듯!!
- 같은 계정으로 로그인한 2개의 브라우저를 동시에 켜놨을때, 한개의 브라우저에서 모드를 변경하면 다른 하나의 브라우저에서는 실시간으로 반영되는게아니라, 큰 메뉴가 변경 되었을 때 새로바뀐 모드가 적용된다.
- 여기서 신기한건 페이지의 작은 탭을 클릭했을때는 new 모드가 적용되지않는데, 큰 메뉴가 변경되면 new 모드가 적용된다는것이다.
- 작은 탭의 변화는 route로 관리하고, 큰 탭의 변화는 redirect로 관리하다는 것이다.
- 그게 맞는것같은게, 아래의 2장의 사진을 보면 어드민페이지에서 Appearance, Account탭을 눌러도 오른쪽의 source가 새로 받아와지지 않는다.
- 반면, 가장 큰 탭에서의 이동은 오른쪽의 source에서도 볼 수 있듯이 페이지소스가 새로 reload 된다.
- 위 사진을 보면 spa + ssr 이라고 추측할 수 있다.
- 그럼 react를 사용해서 ssr처럼 동작하게하는 방법을 정리해보자악
그럼 모드가 선택되었을때 실제로 스타일은 어떻게 적용할까?
우선 html태그를 보면 몇개의 dataset이 설정되어있는것을 볼 수 있다.
mode를 변경하면 저 값이 실시간으로 변경된다.
그럼 저 dataset에 따라서 어떻게 스타일이 적용되는것일까???
<link rel="dns-prefetch" href="https://github.githubassets.com">이 코드를 보면
https://github.githubassets.com 이 주소에서 무언가를 prefetch 한다는것이고, 그것이 dns와도 관련이있다는것으로 유추해볼수있다.
해당 링크를 통해 받아온 파일을 살펴보면 사진의 하단에 css파일을 볼 수 있다.
하나의 css파일을 살펴보면
[data-color-mode=light]
[data-light-theme=dark_dimmed],
[data-color-mode=dark]
[data-dark-theme=dark_dimmed]{
--color-canvas-default-transparent: rgba(34,39,46,0);
--color-marketing-icon-primary: #6cb6ff;
--color-marketing-icon-secondary: #316dca;
--color-diff-blob-addition-num-text: #adbac7;
--color-diff-blob-addition-fg: #adbac7;
.
.
.
위의 코드와 같이 모드에따라서 색상변수를 선언한 것을 볼 수있다.
이게 cloud front인것같다!!
모드, 테마에 따른 스타일설정은 css에 변수를 선언해서 하지만, 해당 설정과 관련된 스타일파일은 클라우드파일로 관리를 한다.
