Merge pull request #129 from code-hike/fix-dependencies

Add `color-scheme` CSS

Author: pomber

packages/mdx/package.json

@@ -29,8 +29,8 @@
     "@code-hike/smooth-code": "^0.3.0-next.0",
     "@code-hike/utils": "^0.3.0-next.0",
     "@codesandbox/sandpack-client": "^0.1.20",
-    "estree-util-value-to-estree": "^1.3.0",
     "hast-util-to-estree": "^1.4.0",
+    "is-plain-obj": "^3.0.0",
     "node-fetch": "^2.0.0",
     "remark-rehype": "^8.1.0",
     "unified": "^9.2.2",

packages/script/package.json

@@ -10,7 +10,7 @@
     "autoprefixer": "^9.8.2",
     "cssnano": "^4.1.10",
     "edit-json-file": "^1.5.0",
-    "node-sass": "^5.0.0",
+    "node-sass": "^6.0.0",
     "rollup": "^2.41.2",
     "rollup-plugin-copy": "^3.3.0",
     "rollup-plugin-postcss": "^4.0.0",

packages/smooth-code/src/code-tween.tsx

@@ -9,6 +9,7 @@ import {
   getCodeColors,
   getColor,
   ColorName,
+  getColorScheme
 } from "@code-hike/utils"
 import {
   useStepParser,
@@ -146,6 +147,7 @@ function AfterDimensions({
         opacity: 1,
         backgroundColor: bg,
         color: fg,
+        ["color-scheme" as any]: getColorScheme(theme),
         ["--ch-selection-background" as any]: getColor(
           theme,
           ColorName.SelectionBackground

packages/utils/src/theme.ts

@@ -203,6 +203,16 @@ export function getColor(
   }
 }
 
+export function getColorScheme(theme: EditorTheme): string | undefined {
+  const themeType = getThemeType(theme)
+  if (themeType === "dark") {
+    return "dark"
+  } else if (themeType === "light") {
+    return "light"
+  }
+  return undefined
+}
+
 export function transparent(
   color: Color,
   opacity: number