fix: initial transition

DylanVann · Oct 14, 2020 · 8012d9a · 8012d9a
1 parent 3a720e5
commit 8012d9a
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 3 deletions.
diff --git a/packages/docs/index.css b/packages/docs/index.css
@@ -27,7 +27,6 @@
   background: var(--background);
   font-family: sans-serif;
   font-size: 16px;
-  transition: all 0.5s;
   padding: env(safe-area-inset-top) env(safe-area-inset-right)
     env(safe-area-inset-bottom) env(safe-area-inset-left);
 }

diff --git a/packages/docs/index.js b/packages/docs/index.js
@@ -25,6 +25,18 @@ mode.subscribe((v) => {
 // so the checkbox state and text will be correct and we can show them.
 toggleElement.style.visibility = 'unset'
 
+// We want to make sure that if the OS mode is 'light'
+// and the saved mode is 'dark' that we do not transition
+// between the two, so we add the transition after a frame
+// has passed.
+requestAnimationFrame(() =>
+  requestAnimationFrame(
+    () =>
+      (document.documentElement.style.transition =
+        'background 0.5s, color 0.5s'),
+  ),
+)
+
 // When the checkbox is clicked we update the mode.
 // Our listener above will do the rest.
 toggleElement.addEventListener('click', (e) =>

diff --git a/packages/docs/package.json b/packages/docs/package.json
@@ -6,14 +6,16 @@
   "scripts": {
     "build": "run-s build:copy-lib build:html",
     "build:copy-lib": "cpx \"../../node_modules/perfect-dark-mode/dist/**/*\" dist/perfect-dark-mode/dist",
-    "build:html": "pug index.pug --pretty --out dist"
+    "build:html": "pug index.pug --pretty --out dist",
+    "serve": "serve dist"
   },
   "devDependencies": {
     "cpx": "^1.5.0",
     "jstransformer-markdown-it": "^2.1.0",
     "npm-run-all": "^4.1.5",
     "perfect-dark-mode": "0.0.5",
     "pug": "^3.0.0",
-    "pug-cli": "^1.0.0-alpha6"
+    "pug-cli": "^1.0.0-alpha6",
+    "serve": "^11.3.2"
   }
 }