个人中心
文章发布
退出
作者热门文章
- Java锁的逻辑（结合对象头和ObjectMonitor）
- 还在用饼状图？来瞧瞧这些炫酷的百分比可视化新图形（附代码实现）⛵
- 自动注册实体类到EntityFrameworkCore上下文，并适配ABP及ABPVNext
- 基于Sklearn机器学习代码实战
28
4
老是碰到初版制作完成没多久，就整一出说什么要更改整个项目的色彩体系。真的是宝宝心里苦啊.
起初都是通过uni项目自带的uni.scss中定义，在替换页面上对应的css。以便于达到一次性修改整体布局的样式.
在该文件里定义： $名字 ：颜色值； 。
使用时需要在 style 节点上加上 lang=“scss” 。
<style lang="scss" scoped>
.bg {
height: 120px;
width:
100%
;
background
-color: $uni-color-
primary;
}
</style>
该方法使用，适合单一颜色修改，一次修改全局统一.
暗黑模式（Dark Mode），也被称为夜间模式或深色模式，是一种高对比度，或者反色模式的显示模式。是一种有利于在黑暗环境下观看手机的高对比度的模式。uni-app的暗黑模式，是帮助开发者完成自己应用的暗黑模式的一批配置和API。开发者可以参考本文实现自己应用的暗黑模式.
注：HBuilder X 3.6.9+ 支持 目前只支持深色和浅色 。
具体介绍看官网地址： https://uniapp.dcloud.net.cn/tutorial/darkmode.html 。
可自行定义多种主题配色，通过js动态修改导航栏等色彩。缺点在于，页面加载缓慢时前期会显示出原有的色彩。整体上不影响使用.
注：在APP 微信小程序 H5 都行 。
css-theme.scss 主题适配主要css 。
css-variate.scss 统一颜色值配置 。
cue-theme.js vue 混入js 。
system-theme.js 自定义的相关配置 。
主要为使用sass切换主题，百度一下大部分都是按照以下配置，这里不过多介绍 。
注：uni中使用时 建议这个scss 在 uni.scss 中 引入该scss 。
/*
* @author: Jay
* @description: 通过监听 css 变量切换主题色
* @createTime: 2022-12-13 11:29:00
* @introduce: 需要在 uni.scss 中 引入该scss
*/
//统一配置色彩
@import "./css-variate.scss";
/*
---------------------方法一 使用css 控制变量 ---------------------------
*/
/*
使用方法
.css-theme {
width: 100%;
@include text-color();
@include base-background();
@include border-color();
@include shadow-color();
}
*/
/*
白天主题 颜色集合
*/
$day-theme:(
bg-color:$day-bg,
text-color:$day-text,
border-color: $day-border,
shadow-color:$day-shadow
);
/*
夜间主题 颜色集合
*/
$night-theme:(
bg-color:$night-bg,
text-color:$night-text,
border-color: $night-border,
shadow-color: $night-shadow
);
/*
玉红主题 颜色集合
*/
$jade-theme:(
bg-color:$jade-bg,
text-color:$jade-text,
border-color: $jade-border,
shadow-color: $jade-shadow
);
//定义主题对象
$themes: (
day-theme: $day-theme,
night-theme: $night-theme,
jade-theme: $jade-theme
);
// 生成主题背景色样式
@mixin base-background()
{
@each $themename , $theme in $themes {
&.#{$themename
} {
background-color
:
map-get($map: $theme, $key: bg-color)
;
}
}
}
// 生成主题字体色样式
@mixin text-color()
{
@each $themename , $theme in $themes {
&.#{$themename
} {
color
:
map-get($map: $theme, $key: text-color) !important
;
}
}
}
// 生成主题边框色样式
@mixin border-color($opa: 1.0)
{
@each $themename , $theme in $themes {
&.#{$themename
} {
border-color
:
rgba(map-get($map: $theme, $key: border-color), $opa) !important
;
}
}
}
// 生成主题阴影
@mixin shadow-color()
{
@each $themename , $theme in $themes {
&.#{$themename
} {
box-shadow
:
0 16rpx 32rpx rgba(map-get($map: $theme, $key: shadow-color), 0.4)
;
}
}
}
/*
---------------------方法二 使用css 属性选择器 ---------------------------
*/
/*
使用方法
<view class="padding-sm" :data-theme="cueTheme">
暗黑模式-官方自带:(只支持 白天黑夜)
</view>
*/
/*
白天主题
*/
[data-theme='day-theme']
{
background-color
:
$day-bg
;
color
:
$day-text
;
border-color
:
$day-border !important
;
shadow-color
:
$day-shadow
;
}
/*
夜间主题
*/
[data-theme='night-theme']
{
background-color
:
$night-bg
;
color
:
$night-text
;
border-color
:
$night-border !important
;
shadow-color
:
$night-shadow
;
}
/*
玉红主题
*/
[data-theme='jade-theme']
{
background-color
:
$jade-bg
;
color
:
$jade-text
;
border-color
:
$jade-border !important
;
shadow-color
:
$jade-shadow
;
}
/*
主题相关颜色
*/
@import './theme/css-theme.scss';
主要为配置主题所需css 颜色值，方便统一修改.
/*
主题 统一配置色彩
*/
//页面背景色
$page-bg:var(--page-bg,#FFFFFF);
// 白天主题
$day-bg: #FFFFFF;
$day-text: #333333;
$day-border: #c8c7cc;
$day-shadow: #c8c7cc;
// 夜间主题
$night-bg: #292929;
$night-text: #FFFFFF;
$night-border: #c8c7cc;
$night-shadow: #FFFFFF;
// 玉红主题
$jade-bg: #c04851;
$jade-text: #FFFFFF;
$jade-border: #eea2a4;
$jade-shadow: #f1939c;
/*
需要在js 中使用的css 导出
APP 无法使用
h5 微信小程序有值
*/
:export
{
dayBg
:
$day-bg
;
nightBg
:
$night-bg
;
jadeBg
:
$jade-bg
;
}
主要使用 混入 (mixin) ，方便与在页面中复用相同的功能.
该方法主要调用vuex的数据 和 system-theme 中的方法 。
注：需要在main.js 导入该js 。
/*
* @author: Jay
* @description: 监听主题变化
* @createTime: 2022-12-12 15:22:19
*/
import system from
'../theme/system-theme'
import {
mapMutations,
mapGetters
} from
'vuex'
export
default
{
install(Vue) {
Vue.mixin({
onShow() {
//
修改导航栏 底部 tab
system.setSystemTheme(
this
.cueTheme)
//
获取缓存 背景色
let bgColor = uni.getStorageSync('pageColor') || ''
;
if
(bgColor) {
this
.getSystemBg(bgColor)
}
//
获取缓存 主题名字
let themeType = uni.getStorageSync('themeType') || ''
;
if
(themeType) {
this
.cueGetTheme(themeType)
}
//
监听主题状态变化
uni.onThemeChange((res) =>
{
//
console.log("监听主题状态变化", res.theme);
//
黑夜
if
(res.theme == 'dark'
) {
this
.cueGetTheme('night-theme'
)
}
//
白天
if
(res.theme == 'light'
) {
//
有多个主题时 判断 缓存是否为白色主题
let type = uni.getStorageSync('themeType'
);
if
(type != 'day-theme'
) {
this
.cueGetTheme(type)
}
else
{
this
.cueGetTheme('day-theme'
)
}
}
});
},
computed: {
//
获取vuex 主题参数
...mapGetters({
cueTheme:
'theme/theme'
,
pageBg:
'theme/pageColor'
,
}),
},
methods: {
//
修改主题
...mapMutations({
cueGetTheme:
'theme/GET_THEME'
,
themeCache:
'theme/SET_THEME_CACHE'
,
pageColorCache:
'theme/SET_PAGE_COLOR'
}),
//
设置 全局背景色
getSystemBg() {
//
从 主题列表 获取 页面颜色
let bgColor = system.systemThemeBg(
this
.cueTheme)
//
console.log(bgColor);
//
缓存 已设置 背景色
this
.pageColorCache(bgColor)
}
}
})
}
}
//
监听主题变化
import theme from './theme/cue-theme.js'
Vue.use(theme)
主要用来放置一些需要重复使用的js。可根据需求自行添加 。
注： themeList 为系统主题列表参数相关配置，用于全局设置系统导航栏，底部tab颜色值的存放.
注：其中导入 css-variate.scss 在app 没有相关数据返回，h5,微信小程序则有数据返回。其他平台自行测试.
/*
* @author: Jay
* @description: 主题相关配置
* @createTime: 2022-12-12 17:45:09
*/
/*
variables APP 拿不到值
h5 微信小程序有值返回
*/
import variables from
'./css-variate.scss'
export
default
{
/*
系统主题列表
*/
themeList() {
return
[{
title:
"白天"
,
name:
"day-theme"
,
navBg: variables.dayBg,
navBgApp:
"#FFFFFF"
,
tabBg:
""
,
tabSeleText:
""
,
tabText:
""
,
}, {
title:
"黑夜"
,
name:
"night-theme"
,
navBg: variables.nightBg,
navBgApp:
"#292929"
,
tabBg:
""
,
tabSeleText:
""
,
tabText:
""
,
}, {
title:
"玉红"
,
name:
"jade-theme"
,
navBg: variables.jadeBg,
navBgApp:
"#c04851"
,
tabBg:
""
,
tabSeleText:
""
,
tabText:
""
,
}]
},
//
根据主题 返回背景色
systemThemeBg(name) {
let color
= ''
this
.themeList().map((item, index) =>
{
if
(item.name ===
name) {
color
=
item.navBgApp
}
})
return
color
},
//
根据主题 修改系统 导航栏 底部 tab
setSystemTheme(name) {
this
.themeList().map((item, index) =>
{
if
(item.name ===
name) {
//
设置页面导航条颜色
this
.setNavigationColor(item.name, item.navBgApp)
//
设置 tabBar 样式
this
.setTabBarColor(item.tabBg, item.tabSeleText, item.tabText)
}
})
},
/*
设置页面导航条颜色
name 主题名字 该颜色值只支持2种 故判断对于白天 为 #000 其他均为 #FFF
bgClor 背景色 可以随意修改
*/
setNavigationColor(name, bgClor) {
let navigationBar
=
{
//
前景颜色值 仅支持 #ffffff 和 #000000
frontColor: name == 'day-theme' ? "#000000" : "#ffffff"
,
//
背景颜色值
backgroundColor: bgClor || "#FFFFFF"
,
//
fail(err) {
//
console.error(err)
//
}
}
uni.setNavigationBarColor(navigationBar)
},
/*
动态 设置 tabBar 样式
*/
setTabBarColor(bgColor, seleColor, color) {
let tabBar
=
{
//
背景色
backgroundColor: bgColor || '#ffffff'
,
//
文字选中时的颜色
selectedColor: seleColor || '#3cc51f'
,
//
文字默认颜色
color: color || '#7A7E83'
,
}
uni.setTabBarStyle(tabBar)
}
}
使用vuex模块化开发（module）用于区分主题相关设置 与其他需求.
注： namespaced: true 主要为 cue-theme 用于模块化调用。缺少这个，在调用cue-theme中的方法时，拿不到所需参数 。
//
主题相关配置
import system from '../../theme/system-theme'
const theme
=
{
namespaced:
true
,
state: {
theme:
"day-theme"
,
//
主题列表
theme: system.themeList(),
//
页面背景色
pageColor: ""
,
},
mutations: {
//
设置主题色
GET_THEME(state, provider) {
state.theme
=
provider
//
修改导航栏 底部 tab
system.setSystemTheme(state.theme)
},
//
设置主题缓存
SET_THEME_CACHE(state, provider) {
uni.setStorage({
key:
'themeType'
,
data: provider
});
},
//
设置主题缓存
SET_PAGE_COLOR(state, provider) {
state.pageColor
=
provider
//
缓存
uni.setStorage({
key:
'pageColor'
,
data: provider
});
},
},
getters: {
theme: state
=>
state.theme,
pageColor: state
=>
state.pageColor
},
actions: {
}
}
export
default
theme
import Vue from "vue"
import Vuex from
"vuex"
//
登录
import logIn from "./modules/login.js"
//
主题切换
import theme from "./modules/theme.js"
Vue.use(Vuex)
const store
=
new
Vuex.Store({
modules: {
theme,
logIn
}
})
export
default
store
//
引入store
import store from 'store/index.js'
Vue.prototype.$store
= store
class="conter" :style="{'--page-bg':pageBg}" 为该页面单独设置背景色 ，需要配合 page 设置页面高度使用 。
:data-theme="cueTheme" 给view设置data-theme属性,根据名字匹配对应颜色 。
:class="[cueTheme]" 设置对应的名字， css 中使用 @include text-color(),
案例地址： https://gitee.com/jielov/uni-app-tabbar 。
<!--
* @author: Jay
* @description: 动态修改主题色
* @createTime: 2022-12-12 14:55:31
-->
<
template
>
<
view
class
="conter"
:style
="{'--page-bg':pageBg}"
>
<
view
class
="padding margin-bottom-xl css-theme"
:class
="[cueTheme]"
>
<
view
class
="text-lg text-center text-bold"
>
暗黑模式
</
view
>
<
view
class
="margin-top-sm"
@click
="openDoc"
>
uni-app的暗黑模式。
<
text
class
="text-blue"
>
点击查看官方文档
</
text
>
</
view
>
</
view
>
<
view
class
="css-theme padding"
:class
="[cueTheme]"
>
<
view
class
="text-center text-bold text-lg"
>
通过判断css 名字修改主题!!!
</
view
>
<
view
class
="margin-tb-sm text-lg text-center"
>
当前主题:{{cueTheme}}
</
view
>
<
view
class
="margin-tb-sm text-lg text-center"
>
当前页面背景色:{{pageBg}}
</
view
>
<
view
class
="flex align-center justify-around"
>
<
button
class
="cu-btn round"
@click
="cssEditThemeBut('day-theme')"
>
白天
</
button
>
<
button
class
="cu-btn round"
@click
="cssEditThemeBut('night-theme')"
>
黑夜
</
button
>
<
button
class
="cu-btn round"
@click
="cssEditThemeBut('jade-theme')"
>
玉红
</
button
>
</
view
>
</
view
>
<
view
class
="padding margin-top-xl"
:data-theme
="cueTheme"
>
<
view
class
="text-center text-bold text-lg"
>
通过 data-theme 判断 名字修改主题!!!
</
view
>
</
view
>
</
view
>
</
template
>
<
script
>
export
default
{
data() {
return
{
url:
'
https://uniapp.dcloud.net.cn/tutorial/darkmode.html#open-darkmode
'
};
},
onLoad() {
console.log(
"
当前主题:
"
,
this
.cueTheme);
},
onShow() {},
methods: {
cssEditThemeBut(e) {
//
修改主题
this
.cueGetTheme(e)
//
设置主题缓存
this
.themeCache(e)
//
设置 全局背景色
this
.getSystemBg()
//
js自改变量值 h5 可用
//
document.getElementsByTagName('body')[0].style.setProperty('--page-bg', 'red');
},
openDoc() {
//
#ifdef APP
plus.runtime.openWeb(
this
.url);
//
#endif
//
#ifdef H5
let a
=
document.createElement(
'
a
'
);
a.href
=
this
.url;
a.target
=
'
__blank
'
;
a.click();
a
=
null
;
//
#endif
}
}
}
</
script
>
<
style
>
/*
全局背景色
*/
page
{
height
:
100%
;
}
</
style
>
<
style
lang
="scss"
scoped
>
// 全局背景色
.conter
{
height
:
100%
;
background-color
:
$page-bg
;
}
.css-theme
{
// border
:
2px solid
;
@include text-color();
@include base-background();
@include border-color();
@include shadow-color();
}
</
style
>
。
最后此篇关于uni-app动态修改主题色的文章就讲到这里了,如果你想了解更多关于uni-app动态修改主题色的内容请搜索CFSDN的文章或继续浏览相关文章，希望大家以后支持我的博客！ 。
28
4
0
在 JavaScript 中，我们可以动态创建 元素并附加到 部分，以便为大量元素应用 CSS 规则。 这种方法的优点或缺点是什么？ 如果它确实提供了与元素上的 javascript 迭代相比的性
我有这个代码 import "./HTTPMethod.dart"; import '../../DataModel/DataModel.dart'; mixin RouterMixin { HT
哪些 OLAP 工具支持动态、动态地创建维度或层次结构？ 例如，层次结构将成员定义为:“前 5 名”、“前 6-10 名”、“其他”... 计算成员是通常的答案，我正在寻找不同的东西。计算器的问题。成
我正在 CakePHP 中创建一个“表单编辑器”。 该界面允许用户选择要应用于字段的验证，例如数字、电子邮件等 因此，我需要根据用户输入为模型动态创建验证。为此，我可以使用验证对象:https://b
这是一个场景: 我有一个Web服务，我们将其称为部署在tomcat(轴)上的StockQuoteService。通过此 Web 服务公开了 getStockQuote() 方法。 现在，我想构建一个
我正在尝试从服务器获取 JSON 响应并将其输出到控制台。 Future login() async { var response = await http.get( Uri.
我从另一个问题中得到了这段代码(感谢 chunhunghan)。我需要创建一个登录屏幕，并尝试根据服务器发回给我的响应来验证用户凭据，但是每次我尝试运行代码时，它都会给我“未处理的异常:Interna
当我在“Dart”主程序中运行它时，一切正常，并且我得到了一个与会者列表。但是，当我在我的 Flutter 应用程序中调用它时，出现错误: flutter:“List”类型不是“List>”类型的子类
本文实例为大家分享了js实现验证码动态干扰的具体代码，供大家参考，具体内容如下 效果一 效果二 代码一 ?
目前我正在为我的网站使用 No-Ip，我想使用 cloudflare 来抵御 ddos 和机器人程序。我注意到您需要一个用于 cloudflare 的域。我还搜索了网络，发现了一个叫做 cloud
有没有办法在 Excel VBA 中构建动态 if 语句？基本上我正在尝试创建一个参数化计算，用户将能够输入不同的变量，即 变量 1 “变量 2” “变量 3” 在这种情况下 变量 1 是单元格引用
大家好， 请查看上面的图片，我有两张 table 。在下面代码的第一个表中，我得到了这种格式。 但我想像 Table2 那样格式化，每个合并单元格中的行数是动态的，而且不一样。 有没有办法像table
如何根据我添加的 View 修改标题部分的高度？heightForHeaderInSection在 viewForHeaderInSection 之前被调用我不知道 View 大小，直到我创建它。 最
是否存在在运行时生成 AST/解析树的解析器？有点像一个库，它会接受一串 EBNF 语法或类似的东西并吐出数据结构？ 我知道 antlr、jlex 和他们的同类。他们生成可以做到这一点的源代码。 (喜
我在持有汽车制造商的表格上有一个 MultipleChoiceField。我想将我的汽车数据库过滤到已检查的品牌，但这会导致问题。如何动态获取所有 Q(make=...) 语句？ 我如何开始:['va
$end = preg_replace($pattern, $replacement, $str); 如何使替换字符串 $replacement 随 $str 中的每次匹配而变化？例如，我想用关联的图
我正在编写一个 VBA 程序，用于过滤表中的值。我试图使其成为一个适用于您提供的所有表格的通用程序。在我的程序中，我必须设置它正在过滤的表的范围:Set rng = dataSheet.Range("
我正在循环一个元素数组，并且我想使用给定的模板递归地显示该元素 然后在该模板内使用带有切换功能的按钮来显示/隐藏给定元素的Child的更深级别模板(Child也是一个元素) 这是我的模板
从客户端(html)发送表单，服务器端通过选择选项之一决定运行哪个函数。 const decideWho = (form) => { const choice = form.choice; c
我有一个具有以下属性的按钮: circle_normal.xml(在 res/drawable 中) circle.xml(在 res/drawable 中)
我是一名优秀的程序员,十分优秀！