openjs

Appearance

主题切换 Theme ​

theme通过预设css变量，通过改变html属性open-theme值，实现主题样式改变

基本使用 ​

主题切换的例子

显示代码
html
<div class="demo">
	<div class="theme">
		<p>主题切换的例子</p>	
		<button class="open-btn open-btn-primary" bg @click="onDark">暗黑主题</button>
		<button class="open-btn open-btn-primary" bg @click="onLight">高亮主题</button>
	</div>
</div>

<!-- 样式 -->
<style>
	/* 预设light高亮主题css变量	*/
	html[open-theme="light"]{
		--color-bg: #ffffff;
		--color-font: #333333;
	}
	/* 预设dark暗黑主题css变量	*/
	html[open-theme="dark"]{
		--color-bg: #000000;
		--color-font: #f6f6f6;
	}

	/* demo示例容器样式	*/
	.theme{
		background: var(--color-bg);
		color: var(--color-font);
	}
</style>

<script setup>
	import { onMounted } from 'vue'
	import { theme } from '../public/openjs@0.1.0-beta.esm.js';

	// 初始化配置主题
	theme.init({
		default: 'light', // 默认高亮主题
		data: ['light','dark'], // 所有主题数据
	})
	
	// 切换暗黑主题
	const onDark = ()=>{
		theme.toggle('dark');
	}

	// 切换高亮主题
	const onLight = ()=>{
		theme.toggle('light');
	}
</script>
<div class="demo">
	<div class="theme">
		<p>主题切换的例子</p>	
		<button class="open-btn open-btn-primary" bg @click="onDark">暗黑主题</button>
		<button class="open-btn open-btn-primary" bg @click="onLight">高亮主题</button>
	</div>
</div>

<!-- 样式 -->
<style>
	/* 预设light高亮主题css变量	*/
	html[open-theme="light"]{
		--color-bg: #ffffff;
		--color-font: #333333;
	}
	/* 预设dark暗黑主题css变量	*/
	html[open-theme="dark"]{
		--color-bg: #000000;
		--color-font: #f6f6f6;
	}

	/* demo示例容器样式	*/
	.theme{
		background: var(--color-bg);
		color: var(--color-font);
	}
</style>

<script setup>
	import { onMounted } from 'vue'
	import { theme } from '../public/openjs@0.1.0-beta.esm.js';

	// 初始化配置主题
	theme.init({
		default: 'light', // 默认高亮主题
		data: ['light','dark'], // 所有主题数据
	})
	
	// 切换暗黑主题
	const onDark = ()=>{
		theme.toggle('dark');
	}

	// 切换高亮主题
	const onLight = ()=>{
		theme.toggle('light');
	}
</script>

API ​

API描述
theme.init(callback)初始化配置主题信息
theme.toggle(themeName)切换主题
theme.getCurrentTheme()返回当前主题名

init初始化主题信息

项目配置的所有主题，一定要配置到init.data数组中

html
theme.init({
	default: 'dark', // 配置默认主题
	data: ['dark','light'] // 配置的所有主题
})
theme.init({
	default: 'dark', // 配置默认主题
	data: ['dark','light'] // 配置的所有主题
})

toggle切换主题

主题名一定要在init.data数组中有配置，如果data找不到当前切换主题名，会设置为空

html
theme.toggle('dark');
theme.toggle('dark');

getCurrentTheme返回当前主题名

html
const currentTheme = theme.getCurrentTheme();
const currentTheme = theme.getCurrentTheme();