Skip to content

Commit

Permalink
docs(stylesheet): DOM API로 동적 초기화 수정
Browse files Browse the repository at this point in the history
- letter spacing 플랫폼별 적용
- seedScaleColor는 document.documentElement 직참조
  • Loading branch information
junghyeonsu committed Jul 5, 2023
1 parent e9d4e81 commit 7de76f2
Showing 1 changed file with 11 additions and 5 deletions.
16 changes: 11 additions & 5 deletions packages/stylesheet/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -69,11 +69,16 @@ Seed Design 에서 제공하는 속성은 사용하기 전에 **명시적인 초

```js
(function () {
var el = document.documentElement;
el.dataset.seed = "";

function isIOS() {
return /iphone|ipad|ipod/i.test(window.navigator.userAgent.toLowerCase());
}
var ios = isIOS();
var prefersLight = window.matchMedia("(prefers-color-scheme: light)");
var prefersDark = window.matchMedia("(prefers-color-scheme: dark)");
var el = document.documentElement;

el.dataset.seedScaleLetterSpacing = ios ? "ios" : "android";
el.dataset.seed = "";

if (prefersLight.matches) {
if ("addEventListener" in prefersLight) {
Expand All @@ -90,8 +95,9 @@ Seed Design 에서 제공하는 속성은 사용하기 전에 **명시적인 초
}

function apply() {
el.dataset.seedScaleColor = prefersDark.matches ? "dark" : "light";
el.dataset.seedScaleLetterSpacing = "ios";
document.documentElement.dataset.seedScaleColor = prefersDark.matches
? "dark"
: "light";
}

apply();
Expand Down

0 comments on commit 7de76f2

Please sign in to comment.