--- theme: fancy --- #### 主题效果 ::: block-1 在**VueUse**官网中有这样一个效果，就是点击切换按钮，切换页面主题，由白天切换到黑夜。 ::: ![动画主题.gif](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b08c4061f0f64903bf5208a40c0c966e~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1428&h=442&s=505398&e=gif&f=58&b=fefefe) 今天呢我们封装一个简易前端主题Hook，主要分享其中的实现原理。 #### 封装Hooks 准备两个主题样式 ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b408ec7136a14ead86b488fd0c5cd2f7~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=222&h=76&s=2017&e=png&b=181818) ``` js export default { fontSize: '20px', Color: '#f90', backgroundColor: '#eee' } themeday.js ``` ```js export default { fontSize: '20px', Color: '#fff', backgroundColor: '#333', } themedark.js ``` 新建一个hook文件夹，在hook文件夹中新建theme.ts ```ts import { ref, type Ref } from 'vue'; // 定义你的主题类型 interface ThemeType { fontSize?: string; Color?: string; backgroundColor?: string; } // 定义你的响应式引用类型 type ThemedRef = Ref; // 导入你的主题对象 import themeday from '../utils/themeday.js'; import themedark from '../utils/themedark.js'; // 初始化你的响应式引用 let Theme: ThemedRef = ref(themeday as ThemeType); export function useTheme() { let Localtheme = localStorage.getItem('theme'); Theme.value = Localtheme ? JSON.parse(Localtheme) : themeday; const changeday = () => { Theme.value = themeday; localStorage.setItem('theme', JSON.stringify(themeday)); }; const changedark = () => { Theme.value = themedark; localStorage.setItem('theme', JSON.stringify(themedark)); }; // 为返回的对象添加类型注释 return { Theme, changeday, changedark } as { Theme: ThemedRef; changeday: () => void; changedark: () => void }; } ``` 因为页面会刷新，所以使用localstorage把主题存入，这样切换主题后，即使页面刷新主题也不会再改变。 #### 组件中使用在组件中引入useTheme ```html ``` 引入成功之后该怎样修改页面样式呢？别忘了vue内置指令有一个**v-bind**可以动态绑定元素，在js中可以使用，**css**也可以使用。 ```css ``` #### 效果 ![active.gif](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/77ff6a49e6334a749d216cf0103e3a77~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1496&h=442&s=154256&e=gif&f=107&b=f6f6f6) 谢谢观看~