经常上 V2EX 的人应该知道,前一段时间该论坛上线了暗色主题切换功能,当天就获得一致好评。也就是在当天,我给自己的博客 github 上面提交了一个 issue,也就是需要给博客添加一套暗色主题并支持主题切换。但是人都是有拖延症的,这一拖,两个月就过去了,我的主题切换功能才终于上线了。
主题化管理经常能在网站上看到,一般的思路都是将主题相关的CSS样式独立出来,在用户选择主题的时候加载相应的CSS样式文件。现在大部分浏览器都能很好的兼容CSS变量,主题化样式更容易管理了。最近,使用CSS变量在Vue项目中做了一个主题化实践,下面来看看整个过程。
主要的实现原理是,2套css样式,2套js文件,如果需要切换图片的情况也需要2套图片,页面上有个切换按钮,点击的时候切换css样式和js文件,以及切换图片,css文件切换时会立即起效,但是js没有效果,需要重新刷新下,采用的是点击按钮的时候直接reload,切换样式文件和js文件都在初始化时进行
如果您想要手动在亮/暗模式之间切换,您可以通过在nativeTheme模块的themeSource属性中设置所需的模式来做到这一点。此属性的值将传播到您的渲染进程。任何与prefers-color-scheme相关的CSS规则都将相应地更新。
作者:matrix 被围观: 2,616 次 发布时间:2013-10-09 分类:Wordpress 兼容并蓄 零零星星 | 2 条评论 »
携手创作,共同成长!这是我参与「掘金日新计划 · 8 月更文挑战」的第11天,点击查看活动详情 >>
其实这个动画切换效果不是第一次看到了,最早看到是在一些volantis主题的用户博客那里,比如银河小徐那里,百度了一下也搜到过volantis相关的魔改教程,当时没当回事,直到在今年勇那里想到了相对完善的源码,不过他嵌入的不是很完美,按钮在一个比较尴尬的地方。和我的副标题重合了,js也是依赖于jquery的,和最新版butterfly去jquery的理念相悖,所以心血来潮对这个教程做下完善,顺便去jquery。
那么,我们自己的网站如何适配暗色/亮色模式呢?首先说一下最基础的媒体查询,然后带大家了解一下我的适配方案(纯JS、CSS和HTML的前端操作)。
Dear,大家好,我是“前端小鑫同学”,😇长期从事前端开发,安卓开发,热衷技术,在编程路上越走越远~ Electron是一个使用 JavaScript、HTML 和 CSS 构建桌面应用程序的框架。 嵌入 Chromium 和 Node.js 到 二进制的 Electron 允许您保持一个 JavaScript 代码代码库并创建 在Windows上运行的跨平台应用 macOS和Linux——不需要本地开发 经验。 前情概要: 上一篇通过快速入门我们搭建了最基础的HelloWorld模型,我们接下来就要在这
该方案作为一套多功能的后台框架模板,适用于绝大部分的后台管理系统(Web Management System)开发。基于 vue.js,使用 vue-cli3 脚手架,引用 Element UI 组件库,方便开发快速简洁好看的组件。分离颜色样式,支持手动切换主题色,而且很方便使用自定义主题色。
之前用darkmode.js给主题适配了一个暗黑模式,操作很简单,但体验感不是很好,于是用了几天就干掉了。
由于ant-design-vue的样式使用的是less作为开发语言,所以这里我们选择Less
昨天,发布了《完美实现移动主题在 360 网站卫士缓存全开情况下的切换》一文,通过 JS 实现了主题在移动端访问时的自动切换,最后提到了可以在电脑版和移动版的 footer 里面加上手动切换链接,实现手动版本切换功能。 今早发现,电脑版切换到移动版是没问题了,但是移动版切换到电脑版,JS 将会再次工作uaredirect.js会再次做 UA 判断,然后由又跳回了电脑版! 也就是说,手机上浏览无法手动切换到电脑版,看来还得继续折腾! 于是,想到一个办法,给移动版的切换链接带上一个参数,再修改 uaredire
原文链接:https://juejin.im/post/5e92ad7a518825736c5b91cd
在项目开发过程中,我们有时候遇到需要更换站点主题色的需求。乃至于 APP 底部的 banner 中的 icon、文案和背景图都是运营线上可配置的。还有的功能比如更换系统字体大小等。
https://segmentfault.com/a/1190000038436829
网站或者应用一键切换主题(简称:换肤)功能,对每个前端开发者来说已经非常常见了,通常是一深一浅,或自由组合衍生出众多主题,或任意主题,这时候,设计一个工程化主题切换功能,并梳理现代前端样式的解决方案显得尤为重要。
随着 iOS 13 的发布,深色模式(Dark Mode)越来越多地出现在大众的视野中,支持深色模式已经成为现代移动应用和网站的一个潮流,前段时间更是因为微信的适配再度引起热议。深色模式不仅可以大幅减少电量的消耗,减弱强光对比,还能提供更好的可视性和沉浸感。
方式3:使用类名切换,通过对顶层节点设置不同的类名,然后定义不同类名的CSS样式,切换主题时修改类名即可
我不太明白为什么很多英文主题的作者,不愿意给主题自带深色模式切换的功能,国内中文环境很多作者都已经加上这个功能了。
之前在公司用了Vue + Element组件库做了个后台管理系统,基本很多组件可以直接引用组件库的,但是也有一些需求无法满足。像图片裁剪上传、富文本编辑器、图表等这些在后台管理系统中很常见的功能,就需要引用其他的组件才能完成。从寻找组件,到使用组件的过程中,遇到了很多问题,也积累了宝贵的经验。所以我就把开发这个后台管理系统的经验,总结成这个后台管理系统解决方案。
之前就有想法给主题适配一个暗黑模式,但就于目前大家的暗黑模式体验都不是很好。就一直被搁浅了。今天给新站移植RIPRO的时候,发现暗黑主题还蛮好玩的,开搞!
关注 JS 太久,会养成任何功能都用 JS 实现的习惯,而忘记了 HTML 与 CSS 也具备一定的功能特征。其实有些功能用 JS 实现吃力不讨好,我们要综合使用技术工具,而不是只依赖 JS。
发布于 2018-05-19 13:42 更新于 2018-08-12 06:50
暗黑模式已成为许多应用程序和网站的最基本功能,因为它可以带来非常好的用户体验。因此在项目中实现暗模式是一项非常有用的技能,使用 ReactJS 和 Chakra UI 可以轻松实现暗模式。
在现有的系统当中,我们的主题切换会比较生硬,下面我们将基于Masa Blazor实现好看的扩散主题切换的样式效果。
随着业务的发展,客户的需求也会变得更加多样化,产品后期就需要有自定义界面的能力,于是出现了“动态换主题”的需求。
由于业务需要,在用蚂蚁金服antd组件库时需要设置两种主题色动态切换。在这里踩了一些坑,觉得有必要写一篇水文记录一下。
为了使图表更具表现力,可以使用混搭图表对数据进行展现。 当多个系列的数据存在极强的不可分离的关联意义时,为了避免在同一个直角系内同时展现时产生混乱,需要使用联动的多图表对其进行展现。
Android的夜间模式主要主用于阅读方面,在QQ,微信读书,新闻阅读类一般会有相应的功能,本文主要介绍整体APP的夜间模式以及webview中夜间模式的实现。
说起博客开源程序,我想很多人都会想到wp,它是一种使用PHP语言开发的博客平台,用户可以在支持PHP和MySQL数据库的服务器上架设属于自己的网站,当然如果你的技术很牛掰也可以把它当作一个内容管理系统(CMS)来使用。11月14号WordPress开发团队发布了WordPress 4.9正式版,为了纪念爵士音乐家和乐队领袖Billy TiptonWordPress 4.9命名为Tipton。
究竟什么是暗黑模式?这个概念起初来源于macOS系统,该系统的mojave版本为用户提供两个主题皮肤,即浅色和深色的皮肤。自从有了这个概念之后,很多网站和系统都会用户提供了相应的两套肤色,便于用户根据自己的习惯或爱好进行切换
现在越来越多的网站都提供了更换主题功能,如ElementUI,既是为了迎合用户需求,或是为了凸显自己特点,因此提供了个性化定制功能。
实际网站效果 https://www.cnblogs.com/leader755/
WordPress响应式免费主题,一款基于Js+jquery2.1.4+H5/CSS3响应式+Wordpress后台开发,每天活人访问量500-800+IP,百度权重2,百度、Google收录链接突破1800+条,前后端完全独立制作,现主题作者Art_Blog开源给所有小伙伴免费使用!
深色模式(Dark Mode)在iOS13 引入该特性后各大应用和网站都开始支持了深色模式。在这之前,深色模式更常见于程序IDE开发界面和视频网站界面。前者通过降低屏幕亮度,使得使用人员长时间盯着屏幕眼睛没有那么疲惫;后者通过深色模式来降噪,从而突出主体内容部分。快速开发一个深色模式难吗?在支持css自定义属性(又称css变量,css variables)的现代浏览器里,可以说是相当的容易。甚至可以在运行时实时新增主题,摆脱传统css主题文件加载模式下的主题需要预编译内置不能随时修改的弊端。下面我们来看一下如何使用css自定义属性来完成深色模式和主题化的开发。
本周工作中遇到类似颜色主题的问题,在查资料的时候,看到这个视频,觉得讲得很清楚,而且趣味性丰富,所以想拿出来讲讲这个很有意思的主题。
所谓的夜间模式就是把网页变成深色或者黑色模式,貌似现手机上某个系统能实现全局夜间模式就能吹嘘一通。本文推荐一款WordPress夜间模式插件:Blackout: Dark Mode Widget,可以让你的网站一键切换到夜间模式。
https://liuyib.github.io/2019/09/24/use-pjax-to-your-site/
嗨,大家好,我是徐小夕。之前一直在社区分享零代码&低代码的技术实践,也陆陆续续设计并开发了多款可视化搭建产品,比如:
背景 前段时间做了一个 COVID-19 的疫情数据每日邮箱推送平台(https://ncov.ouorz.com),本着给自己用的小工具顺便练手的精神,尝试接触了一些新的关于 JavaScript 的技术栈。包括 Vue-Cli、Node.js、MongoDB 等,好不一番爽快的开发体验。顺便一提,这个疫情数据订阅平台我拿着去填写在了 Github Trending 爆火的 wuhan2020 项目(https://github.com/wuhan2020/wuhan2020)举办的「黑客马拉松」报名表里
options支持的属性很多,上面的例子只使用了几个常用的属性,更多属性请参照官方文档
暗黑模式实现,最初的设计,就是参考之前的主题模式。所谓多套主题/配色/皮肤,就是我们很常见的换肤功能。换肤简单的实现就是更换 css实现不同样式呈现不同肤色。
scss的安装、全局设置及一些常规用法 css变量的一些用法 element-plus自定义主题的两种实现方法 暗黑模式的视线
最近啊,看到好多的同学都在做年终总结,作为程序猿的我们被 PPT 虐的不轻。奈何 PPT 是这个世界上最好的编程语言,我们不得不会,今天我们就一起来了解下如何以程序猿的方式写 PPT,而且还不比那些高级 PPT 工程师写的差!
bootstrap4有个网站叫做bootswatch(文末给出链接),其中已经设计了一些很美的主题:
使用工具介绍 码云 Pages:码云 Pages 是一个免费的静态网页托管服务,您可以使用码云 Pages 托管博客、项目官网等静态网页。这样就不用购买服务器和域名了,如果您使用过 Github Pages 那么您会很快上手使用码云的Pages服务。这里使用码云上的Pages 而不是用Github Pages,主要原因就是在国内没有VPN的话。。。你懂得!还有就是支持国产! 链接:https://git.oschina.net/ Hexo:Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Mark
Sass 是对 CSS 的扩展,让 CSS 语言更强大、优雅。 它允许你使用变量、嵌套规则、 mixins、导入等众多功能, 并且完全兼容 CSS 语法。 Sass 有助于保持大型样式表结构良好, 同时也让你能够快速开始小型项目, 特别是在搭配 Compass 样式库一同使用时。
主题介绍 轻盈美观 - 使用 Argon Design System 前端框架,细节精致,轻盈美观 高度可定制化 - 可自定义主题色、布局(双栏/单栏/三栏)、顶栏、侧栏、Banner、背景图、日夜间模式不同背景、背景沉浸、浮动操作按钮等,提供了丰富的自定义选项 夜间模式 - 支持日间、夜间、纯黑三种模式,并可以根据时间自动切换或跟随系统夜间模式 功能繁多 - Tag 和分类统计、作者链接、额外链接、文章字数和预计阅读时间、文章过时信息显示 Pjax - 支持 Pjax 无刷新加载,提高浏览体验 友情链接
单例模式是为了解决一个应用中的内存只存在一份,不允许多个的需求,类似于主题。下面通过theme 主题切换举例
领取专属 10元无门槛券
手把手带您无忧上云