【源码共读】| vant 4 支持暗黑主题-五八三

本文参加了由公众号@若川视野 发起的每周源码共读活动，点击了解详情一起参与。

【若川视野 x 源码共读】第41期 | vant 4 正式发布了，支持暗黑主题，那么是如何实现的呢
点击了解本期详情一起参与。
当我们查看vant的官网，在右上角有一个切换暗黑模式，那么他的实现原理是什么呢，让我们一探究竟。

查看源码

我们首先 clone 仓库到本地，查看package.json

运行调试，那么我们怎么知道对应的文件位置呢

打开浏览器和vue dev tools，选中对应的组件，即可查询对应的组件名

<template>
  <div :class="['van-doc-simulator', { 'van-doc-simulator-fixed': isFixed }]">
    <iframe ref="iframe" :src="src" :style="simulatorStyle" frameborder="0" />
  </div>
</template>

可以看到，整个文件的代码非常简单，只有一个iframe，我们往上翻一下，找到传入的src，可以看到，模拟器指向的是移动端的页面

我们来看怎么触发修改的

// packages\vant-cli\site\desktop\components\Header.vue



toggleTheme() {
  this.currentTheme = this.currentTheme === 'light' ? 'dark' : 'light';
}
// 省略
watch: {
  currentTheme: {
    handler(newVal, oldVal) {
      window.localStorage.setItem('vantTheme', newVal);
      document.documentElement.classList.remove(`van-doc-theme-${oldVal}`);
      document.documentElement.classList.add(`van-doc-theme-${newVal}`);
      syncThemeToChild(newVal);
    },
    immediate: true,
      },
},

可以看到，当发生变更时，会执行这几件事：

存储一个vantTheme变量在本地
修改类名van-doc-theme-xxx
通知子组件

我们来看下怎么通知子组件的

// packages\vant-cli\site\common\iframe-sync.js




export function syncThemeToChild(theme) {
  // 获取iframe 元素
  const iframe = document.querySelector('iframe');
  if (iframe) {
    // iframe 加载完成回调
    iframeReady(() => {
      // 通过postMessage通知子窗口
      iframe.contentWindow.postMessage(
        {
          type: 'updateTheme',
          value: theme,
        },
        '*'
      );
    });
  }
}

然后，我们来看下子窗口是怎么接收的

// packages\vant-cli\site\mobile\App.vue
// 省略...

setup() {
  // 通过监听事件获取 当前的主题
  const theme = useCurrentTheme();

  // 监视 theme 变量的变化
  watch(
    theme,
    (newVal, oldVal) => {
      // 移除旧主题样式
      document.documentElement.classList.remove(`van-doc-theme-${oldVal}`);
      // 添加新主题样式
      document.documentElement.classList.add(`van-doc-theme-${newVal}`);


      // 从 config.site 对象中解构 darkModeClass 和 lightModeClass 变量
      const { darkModeClass, lightModeClass } = config.site;

      // 如果 darkModeClass 存在，根据 newVal 来切换 darkModeClass
      if (darkModeClass) {
        document.documentElement.classList.toggle(
          darkModeClass,
          newVal === 'dark'
        );
      }

      // 如果 lightModeClass 存在，根据 newVal 来切换 lightModeClass
      if (lightModeClass) {
        document.documentElement.classList.toggle(
          lightModeClass,
          newVal === 'light'
        );
      }
    },
    { immediate: true }
  );

},

// packages\vant-cli\site\common\iframe-sync.js




export function useCurrentTheme() {
  // 初始化，获取默认值
  const theme = ref(getDefaultTheme());
  // 监听通知，返回对应的主题值
  window.addEventListener('message', (event) => {
    if (event.data?.type !== 'updateTheme') {
      return;
    }

    const newTheme = event.data?.value || '';
    theme.value = newTheme;
  });


  return theme;
}

通过上述的源码，我们知道了怎么去切换暗黑模式。

通过切换对应的主题css类
通过postMessage通知子窗口刷新

自定义主题

通过查看文档，可以发现，vant还可以通过ConfigProvider来实现自定义主题。

// packages\vant\src\config-provider\ConfigProvider.tsx
// 省略...

function mapThemeVarsToCSSVars(themeVars: Record<string, Numeric>) {
  const cssVars: Record<string, Numeric> = {};
  Object.keys(themeVars).forEach((key) => {
    cssVars[`--van-${kebabCase(key)}`] = themeVars[key];
  });
  // sample: backgroundColor: var(--van-background-color);
  return cssVars;
}
// 省略...
setup(props, { slots }) {
  const style = computed<CSSProperties | undefined>(() =>
    mapThemeVarsToCSSVars(
      extend(
        {},
        props.themeVars,
        props.theme === 'dark' ? props.themeVarsDark : props.themeVarsLight
      )
    )
                                                   );

  if (inBrowser) {
    const addTheme = () => {
      document.documentElement.classList.add(`van-theme-${props.theme}`);
    };
    const removeTheme = (theme = props.theme) => {
      document.documentElement.classList.remove(`van-theme-${theme}`);
    };

    watch(
      () => props.theme,
      (newVal, oldVal) => {
        if (oldVal) {
          removeTheme(oldVal);
        }
        addTheme();
      },
      { immediate: true }
    );
    // 激活时 添加主题
    onActivated(addTheme);
    // 组件卸载时 移除主题
    onDeactivated(removeTheme);
    onBeforeUnmount(removeTheme);
  }
  // iconPrefix
  provide(CONFIG_PROVIDER_KEY, props);

  watchEffect(() => {
    if (props.zIndex !== undefined) {
      setGlobalZIndex(props.zIndex);
    }
  });

  return () => (
    <props.tag class={bem()} style={style.value}>
    {slots.default?.()}
</props.tag>
);
},