@liujitcn/kratos-taro-app-core 0.0.79 → 0.0.80

package/src/stores/theme.ts

@@ -0,0 +1,108 @@
+import Taro from '@tarojs/taro'
+import { create } from 'zustand'
+
+/** 主题模式：暗黑、明亮、跟随系统。 */
+export type ThemeMode = 'dark' | 'light' | 'auto'
+/** 实际生效的主题。 */
+export type ResolvedTheme = 'dark' | 'light'
+
+const THEME_MODE_STORAGE_KEY = 'kratos_theme_mode'
+const DEFAULT_THEME_MODE: ThemeMode = 'light'
+
+/** 读取系统主题；系统未上报时回退明亮。 */
+const readSystemTheme = (): ResolvedTheme => {
+  if (process.env.TARO_ENV === 'h5' && typeof window !== 'undefined') {
+    return window.matchMedia('(prefers-color-scheme: light)').matches ? 'light' : 'dark'
+  }
+  try {
+    return Taro.getSystemInfoSync().theme === 'dark' ? 'dark' : 'light'
+  } catch {
+    return 'light'
+  }
+}
+
+/** 读取本地持久化的主题模式。 */
+const readStoredMode = (): ThemeMode => {
+  try {
+    const stored = Taro.getStorageSync(THEME_MODE_STORAGE_KEY)
+    if (stored === 'dark' || stored === 'light' || stored === 'auto') return stored
+  } catch {
+    // 存储读取失败时使用默认主题。
+  }
+  return DEFAULT_THEME_MODE
+}
+
+/** 主题实际生效时给导航栏与页面底色染色，覆盖全局配置的静态浅色。 */
+const applyChrome = (theme: ResolvedTheme) => {
+  try {
+    const backgroundColor = theme === 'light' ? '#f4f9fd' : '#060a12'
+    void Taro.setNavigationBarColor({
+      frontColor: theme === 'light' ? '#000000' : '#ffffff',
+      backgroundColor,
+      fail: () => undefined,
+    })
+    void Taro.setBackgroundColor({ backgroundColor, fail: () => undefined })
+  } catch {
+    // 部分平台/版本未暴露导航栏染色 API，跳过不影响主题类。
+  }
+  // H5 弹层（showModal/showToast）挂在 body 下，取不到页面根类，把主题类镜像到 html 上。
+  if (process.env.TARO_ENV === 'h5' && typeof document !== 'undefined') {
+    document.documentElement.classList.toggle('theme-dark', theme === 'dark')
+    document.documentElement.classList.toggle('theme-light', theme === 'light')
+  }
+}
+
+/** 订阅系统深浅色变化；H5 用 matchMedia，小程序用 onThemeChange。 */
+const watchSystemTheme = (onChange: (theme: ResolvedTheme) => void) => {
+  if (process.env.TARO_ENV === 'h5') {
+    if (typeof window !== 'undefined' && typeof window.matchMedia === 'function') {
+      const media = window.matchMedia('(prefers-color-scheme: light)')
+      const listener = (event: MediaQueryListEvent) => onChange(event.matches ? 'light' : 'dark')
+      if (typeof media.addEventListener === 'function') {
+        media.addEventListener('change', listener)
+      } else if (typeof media.addListener === 'function') {
+        media.addListener(listener)
+      }
+    }
+    return
+  }
+  try {
+    Taro.onThemeChange?.((result) => onChange(result.theme === 'light' ? 'light' : 'dark'))
+  } catch {
+    // 平台不支持系统主题回调时保持启动时读取的值。
+  }
+}
+
+/** 全局主题状态及操作。 */
+export interface ThemeStoreState {
+  mode: ThemeMode
+  theme: ResolvedTheme
+  setMode: (mode: ThemeMode) => void
+}
+
+/** 全局主题 Zustand Store：模式持久化存储，auto 跟随系统深浅色。 */
+export const useThemeStore = create<ThemeStoreState>((set) => ({
+  mode: readStoredMode(),
+  theme: 'dark',
+  setMode(mode) {
+    const theme = mode === 'auto' ? readSystemTheme() : mode
+    try {
+      Taro.setStorageSync(THEME_MODE_STORAGE_KEY, mode)
+    } catch {
+      // 存储写入失败不影响当前会话主题。
+    }
+    set({ mode, theme })
+  },
+}))
+
+// 初始化：解析启动主题、染色导航栏并订阅系统主题变化。
+const initialMode = useThemeStore.getState().mode
+const initialTheme = initialMode === 'auto' ? readSystemTheme() : initialMode
+useThemeStore.setState({ theme: initialTheme })
+watchSystemTheme((theme) => {
+  if (useThemeStore.getState().mode === 'auto') useThemeStore.setState({ theme })
+})
+useThemeStore.subscribe((state, prev) => {
+  if (state.theme !== prev.theme) applyChrome(state.theme)
+})
+applyChrome(initialTheme)

package/src/styles/base.scss

@@ -1,3 +1,21 @@
+@use './components.scss';
+
+/*
+ * H5 的 pxtransform 结果使用 rem。根字号与 uni-app H5 保持同一套
+ * 375 设计宽度规则；根字号脚本未能从部署子路径加载时仍能正确缩放。
+ */
+/* #ifdef h5 */
+html {
+  font-size: 5.333333vw;
+}
+
+@media screen and (min-width: 961px) {
+  html {
+    font-size: 20PX;
+  }
+}
+/* #endif */
+
 page,
 body {
   min-height: 100%;
@@ -31,11 +49,6 @@ button::after {
   overflow-y: auto !important;
 }
 
-// Taro H5 的默认确认色与 uni-app H5 不同，统一为基线平台色。
-.taro-model__confirm {
-  color: #007aff !important;
-}
-
 // H5 ScrollView 使用内部滚动，隐藏其滚动条避免额外占用内容宽度。
 .taro-scroll-view__scroll-y {
   scrollbar-width: none;
@@ -46,3 +59,75 @@ button::after {
   width: 0;
   height: 0;
 }
+
+html.theme-light body,
+html.theme-light page {
+  background: #eef3f8;
+}
+
+html.theme-dark body,
+html.theme-dark page {
+  background: #060a12;
+}
+
+/* ============================================================
+ * H5 系统弹层随主题：Taro.showModal/showToast 渲染在 body 下，
+ * 取不到页面根类，用 theme store 镜像到 html 上的主题类着色。
+ * ============================================================ */
+/* #ifdef h5 */
+html.theme-dark .taro-modal__mask {
+  background: var(--kratos-color-mask) !important;
+}
+
+html.theme-dark .taro-modal__content {
+  background: var(--kratos-color-surface-solid) !important;
+  color: var(--kratos-color-text);
+}
+
+html.theme-dark .taro-modal__title {
+  color: var(--kratos-color-text);
+}
+
+html.theme-dark .taro-modal__text {
+  color: var(--kratos-color-text-muted) !important;
+}
+
+html.theme-dark .taro-modal__foot::after,
+html.theme-dark .taro-model__btn::after {
+  border-color: var(--kratos-color-border);
+}
+
+html.theme-dark .taro-model__btn:active {
+  background: var(--kratos-color-surface-2);
+}
+
+html.theme-dark .taro-model__btn.taro-model__cancel {
+  color: var(--kratos-color-text-muted) !important;
+}
+
+html.theme-dark .taro__actionSheet > div:first-child {
+  background: var(--kratos-color-mask) !important;
+}
+
+html.theme-dark .taro__actionSheet > div:last-child {
+  background: var(--kratos-color-background) !important;
+}
+
+html.theme-dark .taro__actionSheet > div:last-child > div {
+  background: var(--kratos-color-surface-solid) !important;
+  color: var(--kratos-color-text) !important;
+}
+
+html.theme-dark .taro__actionSheet .taro-actionsheet__cell:first-child {
+  color: var(--kratos-color-text-muted) !important;
+}
+
+html.theme-dark .taro__actionSheet .taro-actionsheet__cell::after {
+  border-color: var(--kratos-color-border);
+}
+
+html.theme-dark .taro__toast > div:last-child {
+  background: rgba(10, 18, 30, 0.9) !important;
+  color: var(--kratos-color-text) !important;
+}
+/* #endif */