第三课 主题色适配

基于前两课，我们实际上已经具备了基础应用的开发能力。但还有一些问题可能大家还不知道如何处理。

那么这节课，我们将对这些问题进行说明。

为了保持一致，大家可以尝试引入我们提供的包。

import { useTheme } from 'ttapp_sdk'
// useTheme 会挂载css变量和类名，同时监听样式变换
useTheme()

具体可参考：

主题的使用

这里有几个常用的类，大家可以注意一下：

tt-text 主要字体色

tt-text-2 次要字体色

tt-bg 背景色

tt-theme 主题色

颜色模式

可以使用dark-model和light-model两个变量控制主题颜色模式

浏览器的媒体查询

天天工作台支持浏览器的深色模式查询，此方法是比较方便且成本低廉的适配方式。此方式兼容传统的网页深色模式兼容，会随着工作台整体的深色模式变化而变换。

@media (prefers-color-scheme: light) { 
  .article {  
    background:#fff; 
    color: #000;  
  } 
} 
@media (prefers-color-scheme: dark) { 
  .article {  
    background:#000;  
    color: white;  
  } 
} 
@media (prefers-color-scheme: no-preference) { 
  .article {  
    background:#fff; 
    color: #000;  
  } 
} 

在vue中使用深色模式

import { useDark, useMediaQuery, useStorage, useToggle } from '@vueuse/core';
import { defineStore } from 'pinia';
export const useStyleStore = defineStore('style', {
  state: () => {
    const isDarkTheme = useDark();
    const toggleDark = useToggle(isDarkTheme);
    const isSmallScreen = useMediaQuery('(max-width: 700px)');
    return {
      isDarkTheme,
      toggleDark,
      isSmallScreen,
    };
  },
});