首页 > 其他分享 >CSS@media暗黑模式配置

CSS@media暗黑模式配置

时间:2023-03-04 11:24:09浏览次数:34  
标签:background color media 000 暗黑 article scheme CSS

css媒体切换

需要基于模板修改成需要的样式

@media (prefers-color-scheme: light) {
    .article {
        background:#fff;
        color: #000;
    }
}
@media (prefers-color-scheme: dark) {
    .article {
        background:#000;
        color: white;
        }
}
@media (prefers-color-scheme: no-preference) {
    .article {
        background:#fff;
        color: #000;
    }
}

在此基础上修改即可

对于图片亮度的css

img { 
	-webkit-filter: brightness(50%)! important; 
	-moz-filter: brightness(50%) ! important; 
} 

标签:background,color,media,000,暗黑,article,scheme,CSS
From: https://www.cnblogs.com/lxrvm/p/17177903.html

相关文章

  • tailwindcss封装一个按钮
    templatetag<template><button:class="classes"><slot:iconSizeClasses="iconSizeClasses"/></button></template>scripttag<scriptsetup>......
  • css背景铺满
    第一种方式body{ position:fixed; top:0; left:0; right:0; bottom:0; background-image:linear-gradient(-225deg,#2CD8D50%,#6B8DD648%,#8E37D7100%)......
  • 了解Microsoft Media Foundation
    关于MicrosoftMediaFoundation是什么MicrosoftMediaFoundation是用来处理(创建、修改、传输、合成)多媒体数据(音视频)的一个平台。有什么用MicrosoftMediaFoundatio......
  • css实现正方体旋转
    <!--物品入库-待入库--><template>  <divclass="content">    <button@click="onImg">图片切换</button>    <divclass="cubeBox">  ......
  • 一篇完整的 Scss 学习指南,看这篇就够啦
    作者:小猪努力学前端https://juejin.cn/post/7055101823442485255前言今时不同往日,能叫我们切图仔的只能是我们自己! 在JavasScrip框架满天飞的年代,前端三板斧之一的CS......
  • 使用 CSS 实现页面加载的淡入效果
    可以使用CSS过渡让文本段落在页面加载时淡入吗?我真的很喜欢它在http://dotmailapp.com/上的样子,并且很想使用CSS来使用类似的效果。该域名已被购买,不再具有提及的......
  • 如何使用 jQuery 更改 CSS display none 或 block 属性?
    如何使用jQuery更改CSSdisplaynone或block属性?解答http://www.stackoverflow.ink/posts/ru-he-shi-yong-jquery-geng-gai-css-display-none-huo-block-......
  • CSS 边框属性
    CSS边框属性CSS边框属性允许你指定一个元素边框的样式和颜色。在四边都有边框红色底部边框圆角边框左侧边框带宽度,颜色为蓝色边框样式边框样式属性指......
  • CSS ::backdrop All In One
    CSS::backdropAllInOnedialog/*Backdropisonlydisplayedwhendialogisopenedwithdialog.showModal()*/dialog::backdrop{background:rgba(255,0,0......
  • 记录一个移动端图片预览(支持旋转),使用css强制旋转的坑
    注:我并没有解决只是换了一个插件,记录一下问题1、需求要支持图片预览和旋转,<1>我选择是vant组件自带的ImagePreview图片预览,用的css强制实现旋转,<2>出现的问题是样......