问CSS配色方案选择器或媒体查询
EN

Stack Overflow用户

提问于 2022-09-24 23:04:42

回答 1查看 76关注 0票数 1

是否可以编写只在color-scheme暗时应用的媒体查询或CSS选择器。

:root { 
    /*Special CSS variable see: https://twitter.com/diegohaz/status/1529543787311144961*/
    color-scheme: dark;
}

:root {
  --blue-france: #f5f5fe;
}

/* Psudo code, I know it isn't possible to use var in selectors, I just hope there is a way around it in this perticulat usecase. */
:root:where(var(color-scheme)="dark") {
  /* Overwrite default value */
  --blue-france: #1b1b35;
}

/* Alternative psudo code, it works with prefers-color-scheme but not with color-scheme */
@media screen and (color-scheme: dark) {
    :root {
       --blue-france: #1b1b35;
    }
}

我对替代解决方案持开放态度，只要它不涉及JavaScript或设置<head />或<body />上的属性。

css

media-queries

color-scheme

回答 1

Stack Overflow用户

发布于 2022-09-25 00:13:40

据我所知，你在寻找一种没有Javascript的黑暗模式？这里是这个代码片段基于这个片段的黑暗模式，没有Javascript，只是纯CSS。

/**
 * VARIABLES
 */

:root {
  --bg: #f8fafc;
  --panel-bg: #FFFFFF;
  --panel-border: #CCCCCC;
  --panel-title: #343f44;
  --panel-text: #54666d;
  --btn: #3eb0ef;
}


/**
 * GENERIC STYLES 
 */

body {
  position: relative;
  height: 100vh;
  padding: 0;
  margin: 0;
  font-family: 'Nunito Sans', sans-serif;
  font-weight: 600;
}


/**
 * TOGGLERS 
 */

#toggleMode {
  visibility: hidden;
}

.toggleDark,
.toggleLight {
  cursor: pointer;
  position: absolute;
  z-index: 2;
  top: 20px;
  left: 20px;
}

.toggleDark {
  display: block;
  color: #222;
}

.toggleDark:hover {
  color: blue;
}

.toggleLight {
  display: none;
  color: white;
}

#toggleMode:checked~.toggleDark {
  display: none;
}

#toggleMode:checked~.toggleLight {
  display: block;
}

#container {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--bg);
  z-index: 1;
  padding: 50px 20px;
}

#toggleMode:checked~#container {
  --bg: #020202;
  --panel-bg: #111413;
  --panel-border: #1f2322;
  --panel-title: #8e9294;
  --panel-text: #505456;
  --btn: #2962fe;
  background-color: var(--bg);
}


/**
 * PANEL 
 */

.panel {
  margin-top: 20px;
}

.panel .content h2 {
  margin-top: 20px;
  margin-bottom: 0;
  color: var(--panel-title);
}

.panel .content p {
  margin-top: 10px;
  font-weight: 300;
  color: var(--panel-text);
}

.panel .content button {
  border: 0;
  border-radius: 3px;
  background-color: var(--btn);
  padding: 10px 20px;
  color: white;
  cursor: pointer;
}

.panel .content button:hover {
  opacity: 0.7;
}

<body>
  <input type="checkbox" id="toggleMode">
  <label for="toggleMode" class="toggleDark">Dark Mode</label>
  <label for="toggleMode" class="toggleLight">Light Mode</label>
  <div id="container">
    <div class="panel">
      <div class="content">
        <h2>This is a title</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ullamcorper erat quis faucibus pulvinar. Duis vel ex non sem ultricies consectetur. Donec blandit dolor ac libero euismod, sit amet blandit libero scelerisque.</p>
        <button>Read more</button>
      </div>
      <div style="clear:both"></div>
    </div>
  </div>
</body>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/73841094

复制

相似问题

问CSS配色方案选择器或媒体查询
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CSS配色方案选择器或媒体查询EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CSS配色方案选择器或媒体查询
EN