js获取当前浏览器是否采用深色主题
发表于|更新于
|浏览量:
荣誉在于劳动的双手。——达芬奇
代码如下：
1 | window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches |
对应的mdn：
https://developer.mozilla.org/zh-CN/docs/Web/API/Window/matchMedia
相关推荐
2021-12-02
uniapp播放音频
人们不太看重自己的力量——这就是他们软弱的原因。——高尔基 播放音频的代码很简单： 123const innerAudioContext = uni.createInnerAudioContext(); innerAudioContext.src = '/img/oss/picGo/kuangstudy9664a946-42a5-4111-80e7-65e735932ef7.wav'; innerAudioContext.play(); 官方文档： https://uniapp.dcloud.io/api/media/audio-context 除了播放、暂停、停止等也都能实现 完整代码： 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980<template> <view class=...
2024-07-22
Apache-ShenYu支持namespace功能
健康的身体是灵魂的客厅，病弱的身体是灵魂的监狱。——培根 我主要完成前端部分对接，pr如下： https://github.com/apache/shenyu-dashboard/pull/462 这里主要是结合redux-saga完成需求，例如modal/global.js shenyu-dashboard/src/models/global.js at 624a2afe74367b5c5a310627197d3622a8c896a4 · apache/shenyu-dashboard · GitHub 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109...
2026-08-13
diagram-design
学习要有三心，一信心，二决心，三恒心。—— 陈景润 Diagram Design：让技术图不再像模板拼装，而像一篇真正被设计过的编辑作品项目地址：https://github.com/cathrynlavery/diagram-design 一张图，常常比一段长篇解释更快抵达读者。 架构如何连接，流程在哪里分叉，数据怎样流动，团队如何协作，时间如何推进，系统边界在哪里，复杂问题往往需要借助视觉结构才能被真正看清。 但现实中的技术图，常常陷入两种尴尬。 一种是内容很对，视觉却像从默认组件库里匆忙拼出来的。圆角卡片、阴影、渐变、密集的连线和随处可见的颜色，让读者还没理解结构，就先被视觉噪声拖住。 另一种是画面很漂亮，却缺乏准确性。它像一张精致海报，却没有承担信息组织的职责。 Diagram Design 想解决的，正是这个中间地带的问题。 它是一套面向 Claude Code、Codex 与 Pi 的图表设计技能。它不把图当作随手生成的装饰，也不把技术结构塞进千篇一律的模板，而是尝试用一套带有编辑感的设计系统，把复杂内容整理成清晰、克制、可阅读的视觉表达。 它的目标并不是制造更多...
2024-08-26
vuemotion
青春是一种持续的陶醉，是理智的狂热。——拉罗什富科 作为vue的动画框架 https://github.com/Bug-Duck/vuemotion 目前属于非常崭新的项目，但是其积累是源自于newcar，因此备受期待 VueMotion 是一个现代动画引擎，就像 Python 的 Manim for Vuejs 生态系统一样，它提供了大量的小部件来帮助用户快速制作动画和视频。并且它具有很高的可扩展性，这意味着您可以轻松创建自己的动画风格。 VueMotion 的前身是 Newcar 动画引擎，但后来因为一些特殊原因停止了开发。如果你是 Newcar 的老用户，欢迎你迁移到 VueMotion。 其团队也是非常之年轻，还在读高中就已经开始做开源 Roadmap Basic Widget Arc Group Line Polygon Rect Text Image Mask Webview Polyline Animations move rotate scale create destroy stroke...
2024-09-17
vue-starport跨路由组件共享动画
没有风暴，船帆不过是一块破布。——雨果 vue-starport/README.zh-Hans.md at main · antfu/vue-starport · GitHub 我们经常会在在不同的路由（页面）上使用同一组件，但他们的位置和大小可以不尽相同。这时你可能会希望在用户进行路由跳转时，想让它们展示流畅的过渡动画。尽管这样的动画在原生应用中较为常见，但要在 Web 中实现却有一些挑战。 Vue 的组件结构以 树 的形式呈现，在不同分支中的子组件有其各自的实例，这意味着当用户在路由之间跳转时，同样的组件并不会跨路由共享。 因为它们是两个不同的实例，这意味着你无法直接为它们的添加补间动画。幸运的是，有一种叫做 FLIP 的技术可以模拟不同组件之间的过渡动画。 然而，FLIP 只解决了过渡的问题，我们仍然还是会有两个组件实例。在跳转过程中，组件的内部状态将会丢失。 因此，我开始实验一个新的解决方案用于满足这一需求，并将其取名为 Starport。 在线Demo： https://vue-starport.netlify.app/ 可以看到点击下方的图片...
2022-01-03
在vue中使用ts
诚实的生活方式其实是按照自己身体的意愿行事，饿的时候才吃饭，爱的时候不必撒谎。——马尔克斯《霍乱时期的爱情》 官方文档：https://www.typescriptlang.org/docs/handbook/intro.html 首先找到中文文档：https://www.tslang.cn/samples/index.html 寻找到vue.js 跳转过去后就是教程，我们跟着教程一步一步来 首先新建一个空项目 然后新建src目录和components目录 1234typescript-vue-tutorial/├─ dist/└─ src/ └─ components/ 输入命令下载依赖 1D:\file\projects\vue-ts-demo>cnpm install --save-dev typescript webpack webpack-cli ts-loader css-loader vue vue-loader vue-template-compiler 很快就下载完毕 然后初始化ts环境 1tsc --init 可以看到多出了ts配置文...