feat: appearance support light/dark mode theme in CodeHike

[codersjj]

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
island	✅ Ready (Inspect)	Visit Preview	Aug 2, 2023 3:45am

[netlify[bot]]

✅ Deploy Preview for jade-conkies-8119e7 ready!

Name	Link
🔨 Latest commit	c3d8db46f9bdfb301bfbbae1ea42b71f968ef242
🔍 Latest deploy log	https://app.netlify.com/sites/jade-conkies-8119e7/deploys/64c9d116423ae30008b89b21
😎 Deploy Preview	https://deploy-preview-190--jade-conkies-8119e7.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[sanyuan0704]

I think it should be added in the custom theme instead of framework logic.

[codersjj]

I think it should be added in the custom theme instead of framework logic.

I agree with you. I checked the documentation again and implemented the desired effect using MutationObserver. My implementation is like this:

// `.island/theme/index.tsx`
import React, { useEffect } from 'react';
import {
  Layout as DefaultLayout,
  NotFoundLayout,
  HomeLayout,
  setup
} from 'islandjs/theme';
// Add some custom styles
import "./github-from-css.css";

const docEl = document.documentElement
const getIsDark = (target: HTMLElement) => target.classList.contains('dark')
const setCHTheme = (isDark: boolean) => {
  const chThemeEls = document.querySelectorAll("[data-ch-theme='github-from-css'], [data-ch-theme='material-from-css']")
  const mode = isDark ? '' : 'light'
  chThemeEls.forEach(el => el.setAttribute('data-theme', mode))
}

const classListChanged = (mutationList) => {
  for (const mutation of mutationList) {
    const { type, target } = mutation
    if (type === "attributes") {
      setCHTheme(getIsDark(target))
    }
  }
}
const observer = new MutationObserver(classListChanged)

const Layout = () => {

  useEffect(() => {
    // Execute immediately once during initialization
    setCHTheme(getIsDark(docEl))

    observer.observe(docEl, { attributes: true })

    return () => {
      observer.disconnect()
    }
  })

  return <DefaultLayout />
}

// Export the three components and the setup function
export { Layout, HomeLayout, NotFoundLayout, setup };

and the effect is like this：

Welcome any suggestions to improve it or better approaches.

[sanyuan0704]

Nice!

[sanyuan0704]

But there are some lint problem.Please check it locally.

[codersjj]

But there are some lint problem.Please check it locally.

As you said, it should be added in the custom theme instead of framework logic. So this pr can probably be closed right?