夜间模式代码 - 腾讯云开发者社区 - 腾讯云

开发者社区

文档建议反馈控制台

文章/答案/技术大牛

发布

设置网站夜间模式

超简单的给网站添加夜间模式 let brightness = 0;//显示遮罩 let div; function cover(brightness) { if (typeof (div) ===

4851 0

Typecho夜间模式设置

最近看到几个友链都弄了跟随系统暗色的夜间模式，然后我也去捣鼓了一下，从友人陆小北哪里学习到了如何配置，甚是感谢 ?...注意:只对Handsome主题进行了测试，其余主题自行测试配置方法 1，下载夜间模式配置文件点击下载下载上面的css和js文件，分别放到到 /usr/themes/handsome/assets...v=dedediy" type="text/css" /> 打开文件找到自动进入夜间模式配置打开找到版权属于：奥秘Sir（除特别注明外）本文链接：https://blog.say521

1.4K2 0

您找到你想要的搜索结果了吗？

是的

没有找到

网站夜间模式的实现

整体流程夜间模式开关按钮：用来手动切换夜间模式的，会存储cookie。自动夜间模式：当cookie为空时，浏览器时间大于22点小于6点时会自动进入夜间模式，并存储cookie。...切换夜间模式的 js 函数 function switchNightMode(){ var night = document.cookie.replace(/(?:(?:^|....'); } } 指定时间进入夜间模式 (function(){ if(document.cookie.replace(/(?...>stylesheet" type="text/css" title="dark"> 适配 Mac 的 Dark Mode 纯js判断设备是否进入了夜间模式，感谢simplify提供代码 if ( window.matchMedia...参考 1，link rel=alternate网站换肤功能最佳实现 2，给博客添加夜间模式 3，prefers-color-scheme: CSS Media Query

1.4K2 1

Android – 切换夜间模式

单独的夜间模式和日模式的资源：有时我们需要为不同的模式使用不同的资源。...a）默认模式的文件夹名称 drawable values b）夜间模式的文件夹名称： drawable-night values-night 在本篇文章中，我们将使用value文件夹中的colors...break; Intent intent = new Intent(this, DayNightActivity.class); startActivity(intent); 上面代码分别是两个按钮的点击事件...点击日间模式，就会如下图所示： ? 日间模式.png 当然，这里因为是日间模式所以看起来，没有多大的改变。下面我们来看看当点击夜间模式时，就会出现明显的区别了。如下图所示： ?...夜间模式.png 我们的colors资源文件是这样的。正常模式value/colors： <?xml version="1.0" encoding="utf-8"?

1.6K5 0

优化夜间阅读体验 - 夜间模式设计通用方法

你有没有在夜间使用移动设备的习惯？你觉得QQ现有的夜间模式亮度在使用时是否舒适？...我们为什么要做夜间模式？ 1. 用户调研显示：57%的用户想要使用夜间模式，71.1%的用户习惯在夜间不开灯看手机在ISUX北京调研小组的帮助下，我们针对移动端QQ界面夜间模式进行了调研。...用户期望更暗色、更能保护眼睛的夜间模式设计从用户对夜间模式的期望来看，他们希望主体界面的颜色更暗，能够更加持久地使用软件。希望我们设计师，能够设计出更加保护眼睛的夜间模式。...我们如何设计夜间模式？ ...其他建议针对夜间模式的设计，我们还有些小小的建议：（1）夜间模式与官方白色界面的设计除颜色之外，不要对图形、结构、交互等有其他改变，减少用户学习成本。

1.8K3 0

添加白天夜间模式转换动画

F点击查看更新记录更新记录 2022-03-11 源教程转为pug文件，styl文件精简js内容，去jquery化嵌入主题原生的夜间切换模式按钮点击查看参考教程参考方向教程原贴原教程 butterfly...新建, 新建,去除了冗余代码，去jquery。。修改,在文件末位加上一行：F 修改,把原本的昼夜切换按钮替换掉，修改,引入一下js，具体效果就自己切换下夜间模式看看吧。

1.2K4 0

博客园美化夜间模式

博客园美化夜间模式一.点击控制样式主要看思路,自己增删改查,里面样式只针对我的博客一.触发点击二.修改按钮样式以及对于类名三.将模式信息存入sessionStorage中四.更具按钮的类名,...this.innerHTML = '夜间模式:开启' : this.innerHTML = '夜间模式:<span style...3.有些人不喜欢这些提示这段代码解决这3中情况,内容自己理解 <!...为了解决问题: 1.跳转页面后要重复切换模式 2.提示后进行切换注意点:这段代码必须放在时间控制后面,不然时间那段没啥用夜间模式分支,session中有night切换夜间模式--> letmodel = sessionStorage.getItem('model') if (model == 'night

7702 0

简洁优雅地实现夜间模式

夜间模式作为APP的一个重要的用户体验之一，很多应用有这个功能，目前，用户体验也是产品和设计较为看重的方面，越来越值得深入探究，本文将介绍在Android上一种夜间模式的实现方式。 ?...，夜间模式和暗色模式先是开启，然后有再次被移除。...而在正式版中，夜间模式也没有出现。但其实相关的代码一直存在于系统中，只是默认没有被开启。...不过，今天要介绍的主要内容并不是关于系统的夜间模式，而是如何给我们开发的APP添加夜间模式的功能。毫不夸张的说，夜间模式现在已经是阅读类App的标配了。...2 新建夜间模式资源文件夹:在res目录下新建values-night文件夹，然后在此目录下新建colors.xml文件在夜间模式下的应用的资源。

2.1K3 0

Flutter 主题设置及夜间模式

夜间模式实现效果：分析：这次是使用局部的实现，哪个页面需要同步就加个 Theme 就行了，全局也是类似的实现方式，主体代码不到 100 行。...代码实现：首先写个配置类，主要配置主题的是否为黑夜模式和主题样式： class Config { static bool dark = true; // 是否...ThemeData themeData = new ThemeData.dark(); // 主题为暗色 } 然后我们正常的执行代码

2.8K1 0

php实现自动开启关闭夜间模式

首先，想要自动开启/关闭夜间模式我们需要知道现在的太阳的状态(日出/日落)，所以说先要获取今日的日出和日落时间。在网上找了一大圈也没找到可以对接的api，所以说只能靠自己来写了。...php//获取源代码$result = get_curl('https://mtime.guowaitianqi.com/rcrl-5141-'.date('Ymd').'.html');//获取日出时间...//判断是否开启夜间模式$time = time();if($timestrtotime($sundown)){//开启夜间模式}else{//关闭夜间模式...}原理也很简单，如果当前时间小于日出时间，或者当前时间大于日落时间就开启夜间模式，很好理解吧。...具体代码自行实现吧，这里获取源码的时间我是用date函数拼接出来的，所以说想要获取下一天或者上一天的，只要改一下date函数就可以了。

1.2K3 0

QQ极简与夜间模式设计

为了给用户提供更舒适的夜间体验，部分手机系统逐渐推出黑暗模式，一些应用还定制深度的夜间模式。 QQ夜间模式设计策略晚上是QQ用户活跃的高峰期之一，针对夜间场景使用痛点以及业界的趋势。...组件化 QQ夜间模式适配覆盖度很高，涉及界面也很多，我们梳理适配了夜间模式组件，同时也提升适配的效率。...主题背景大面积黑色界面难免会些许单调冰冷，有别于手机系统与应用，QQ夜间模式保留前版本的星空元素传承到新版设计中，夜间模式启动后，通过繁星点点的背景元素建立夜间环境关联。...动效使用切换操作时，加入适度的过渡动画，进一步强化用户对夜间模式的感知，用户可在抽屉页点击切换至夜间模式。...夜间模式体验路径，用户进入QQ后，通过右滑或点击一级界面左上角个人头像，进入抽屉页，点击左下方夜间图标即可切换至夜间模式。

1.9K3 0

Android常用技巧夜间模式开发浅析

前言 Android的夜间模式主要主用于阅读方面，在QQ，微信读书，新闻阅读类一般会有相应的功能，本文主要介绍整体APP的夜间模式以及webview中夜间模式的实现。效果图展示 ? ?...功能实现简介 APP的夜间模式有两种方式： 1、通过切换theme来实现夜间模式。2、通过修改uiMode来切换夜间模式。...application夜间模式代码详解首先记载依赖：compile 'com.android.support:appcompat-v7:24.0.0'，然后Activity须继承AppCompatActivity...：使用亮色(light)主题，不使用夜间模式 MODE_NIGHT_YES：使用暗色(dark)主题，使用夜间模式 MODE_NIGHT_AUTO：根据当前时间自动切换亮色(light)/暗色(dark...webview中的夜间模式我这个方法不通用，但是理念是一样的，都需要注入css代码，改变HTML中的样式，因为HTML的整体样式都归于css管理。

1.5K5 0

实现夜间模式真就这么简单？！

今天我们讲讲夜间模式的实现，这篇文章的名字应该叫：《Android Material Design系列之夜间模式》。...在Android 5.0 之后，实现夜间模式并非很难了，支持的5.0库提供了非常简单的实现方式。不信，你就往下看。...夜间模式对于夜间模式的颜色和主题配置，我们需要建立一个res下建立一个values-night文件夹，里面放着夜间主题样式的color等资源。 colors.xml配置如下： ?...我这里对模式进行了保存，先判断现在处于什么模式，然后点击的时候，再根据现在的模式切换到另一种模式。重点是这两行代码： ?...(默认选项)：设置为跟随系统，通常为MODE_NIGHT_NO 到这里关于夜间模式的切换就讲完了，是不是非常简单？

1.2K9 0

php实现自动开启关闭夜间模式

我是写代码的，不是气象台的！实现首先，想要自动开启/关闭夜间模式我们需要知道现在的太阳的状态(日出/日落)，所以说先要获取今日的日出和日落时间。...//判断是否开启夜间模式 $time = time(); if($timestrtotime($sundown)){ //开启夜间模式 }...else{ //关闭夜间模式 } 原理也很简单，如果当前时间小于日出时间，或者当前时间大于日落时间就开启夜间模式，很好理解吧。...具体代码自行实现吧，这里获取源码的时间我是用date函数拼接出来的，所以说想要获取下一天或者上一天的，只要改一下date函数就可以了。...如无特殊说明《php实现自动开启/关闭夜间模式》为博主MoLeft原创，转载请注明原文链接为：https://moleft.cn/post-49.html

1.1K3 0

Darkmode.Js – 网站支持炫酷暗黑模式夜间模式

昨晚在网上逛时无意发现了轻松让网站实现暗黑模式的小工具Darkmode.js, Darkmode.js是一个开源JavaScript项目，只一段代码就能快速让你的网站支持深色模式，非常強大！...安装好之后，在网页的右下角有一个圆形按钮，点击即可切换白天/夜晚模式。...darkmode-js@1.5.5/lib/darkmode-js.min.js"> new Darkmode().showWidget(); 这个代码很多人都会安装了...可能是有些主题代码层叠顺序导致的，因为我也遇到过，在CSS文件中重新定义一个z-index就可以了。...关于这种方式唯一有点不满意的就是暗黑模式下照片会变成像相机底片那样，有些照片会看着不好看。

1.6K4 0

WordPress夜间深色模式切换插件wp-nightdm

我不太明白为什么很多英文主题的作者，不愿意给主题自带深色模式切换的功能，国内中文环境很多作者都已经加上这个功能了。...我这个博客主题和另外一个在用的博客主题，默认也没有深色模式，我问过作者了，作者考虑他们的主题定位，所以就没加这个功能，让用第三方插件，然后我在后台搜索了下，发现这类插件也挺火的，竟然一大堆还有付费版本，...，他也应该是修改外面的开源代码，所以我也在基础上修改了下。...相比原版我改动的：首先肯定是改成中文界面修改设置页面样式减少部分不是特别需要的代码优化代码安全性由原来7个css、js文件减少到3个(2个js、1个css，前台会调用1个css和1个js文件)...文件由原来的1.2M多，降到了不到40kb，压缩包由原来的600多kb降到了6kb左右修改了前台切换按钮样式删掉了第三方字体库删掉了第三方图标库新增功能：可以自定义设置按钮位置的百分比插件名称：夜间深色模式

3341 0

个人博客网站怎么适配手机端夜间模式或深色模式

大家对网站的自适应模式都已经清楚了，现在个人博客基本都兼容自适应代码，相比手机端的优势很明显，在PC端、手机端和IPAD端都采用同一套代码，不必再另外解析独立域名，有效避免了网页内容的重复，并能集中精力维护网页...但是近几年各大手机厂商逐渐开始注重深色方式或者说夜间模式，从而改善用户在环境光亮低时的阅读体验。...很多手机APP应用都已经对夜间模式进行了支持，那么问题来了，对于手机网站来说，个人博客的网站能否支持自适应浅色模式和夜间模式呢？答案是当然可以啦！...CSS代码 @media (prefers-color-scheme: dark) { // 暗色模式样式 } @media not (prefers-color-scheme: dark) {...至此通过上面的代码兼容，我们就可以实现手机端深色和夜间模式的自适应兼容，之前在群里看到有人讨论过，然后自己也一致未在意，今天在公众号看新闻时看到了月光博客写的这篇文章教程，自己也百度查看了相关的资料，至于主题是否会增加

1.2K2 0

对于Android日夜间模式实现的探讨

实现日间/夜间模式切换的方案也有许多种，趁着今天有空来讲一下日间/夜间模式切换的几种实现方案，也可以做一个横向的对比来看看哪种方案最好。.../夜间模式的切换；通过资源 id 映射，回调自定义 ThemeChangeListener 接口来处理日间/夜间模式的切换。...这样就实现了日间/夜间模式切换的换色了。...之后根据不同的模式会去选择不同的 colors.xml 。在 Activity 调用 recreate() 之后，就实现了切换日/夜间模式的功能。说了这么多，直接上代码。...最后还要把找到的夜间模式资源加入到缓存中。这样的话以后就直接去缓存中读取，而不用再次去动态查找资源 id 了。 ThemeManager 中剩下的代码应该都是比较简单的，相信大家都可以看得懂了。

2.6K2 0

WordPress夜间模式插件：Blackout: Dark Mode Widget

所谓的夜间模式就是把网页变成深色或者黑色模式，貌似现手机上某个系统能实现全局夜间模式就能吹嘘一通。...本文推荐一款WordPress夜间模式插件：Blackout: Dark Mode Widget，可以让你的网站一键切换到夜间模式。...之后打开网站，会发现在页面最下端增加了一个圆形按钮，点击就会进入黑色背景的夜间模式。...Darkmode.js使用方便，代码量少，不像我目前主题的夜间模式，需要写样式配合并反复调试，不过由于Darkmode.js兼容性和自定义程度低，最终放弃使用，自己写代码实现。...夜间模式对于一款主题而言，用户可以不用，但你不能没有，好吧，我接着改主题夜间样式去....

7761 0

Volantis实现自动夜间和日间模式切换

Volantis实现自动夜间和日间模式切换大佬弄好了一个我问什么要改大佬弄的这个实现了在没有暗黑模式的系统里的切换，如果像iOS或者macOS或者新的win10和安卓都实现了系统级别的暗黑模式...如果还按照大佬的弄，就会造成在启用暗黑模式的系统中切换夜间/日间模式切反的情况，所以我才对其进行了修改。如何使用使用方法与大佬的一致，目前适用于Volantis4及以下。...text/javascript" src="https://cdn.jsdelivr.net/gh/Colsrch/CDN@master/judge_time/js.js"> 将下列代码复制添加至该文件的末尾...// 未开启夜间模式，修改按钮状态 $.message({ title: '操作通知', message: nighttitle + '，已自动为您切换为夜间模式。...，修改按钮状态 $.message({ title: '操作通知', message: nighttitle + '，已自动为您切换为夜间模式。

9371 0

点击加载更多

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭