如何使用 CSS 滑块创建暗黑主题?

cssweb developmentfront end technology更新于 2024/11/18 16:44:17

暗黑主题近年来越来越受欢迎，因为它们可以减轻眼部疲劳，让长时间观看屏幕更加轻松。本文将讨论如何使用 CSS 滑块功能创建暗黑主题。

CSS 滑块是一种常见的用户界面组件，通常称为范围滑块，它允许用户通过沿轨道滑动手柄来选择一定范围内的值。它们经常用于设置面板和在线表单中。

语法

<input type="range" min="number" max="number" value="number" class="slider">

Type - 输入类型，例如按钮、复选框或范围

Min - 最小范围

Max - 滑块的最大范围

Value - 滑块的总值(以数字表示)

Class - 滑块容器指定的类

示例

在这里，我们将创建一个滑块，用于将网页主题从亮色更改为暗色。此滑块将帮助您将页面主题从亮色更改为暗色。我们将创建一个暗色主题滑块，并使用一些 CSS 属性来设置滑块轨道、手柄和背景的样式。此外，我们还将编写 JavaScript 代码，根据滑块的值更新页面的背景颜色。

算法

步骤 1: 为滑块和页面内容创建一个容器。此容器将是一个包含滑块所有内容的 div。

步骤 −2: 为滑块部分插入标签和其他输入内容。

步骤 −3: 添加页面样式，将页面内容设置为浅色背景。

步骤 −4: 现在设置 CSS，将滑块页面内容、手柄和背景设置为深色。

步骤 −5: 为滑块添加事件监听器，以帮助用户更新页面的背景颜色。

步骤 −6: 包含 JavaScript 代码，根据滑块的值设置页面的背景颜色。

在这里，我们将使用 div 元素包裹滑块和页面内容。

<!DOCTYPE html>
<html>
<head>
  <title>Dark Theme Slider</title>
  <style>
     /* Define variable values for the dark theme */
     :root {
        --bg-color: #212121;
        --text-color: #fff;
     }

     /* Default light theme styles */
     body {
        background-color: #fff;
        color: #212121;
     }

     /* Dark theme styles */
    .dark-theme {
       background-color: var(--bg-color);
       color: var(--text-color);
    }

    .slider-container {
     margin-top: 20px;
  
    }

   </style>
</head>
<body>
  <h1>Tutorials Point Slider</h1>
  <!-- div for slider this is the basic container -->
  <div class="slider-container">
    <label for="dark-slider">Switch To Darkness:</label>
    <input type="range" id="dark-slider"  min="0" max="100" value="50">
  </div>
  <p>Add page content here...</p>
  
   <script>
  const slider = document.getElementById("dark-slider");
const body = document.querySelector("body");

slider.addEventListener("input", function() {
    const value = slider.value;
    
    // 根据滑块值计算新的颜色值
    const bgValue = 255 - (value * 2.55);
    const textValue = value * 2.55;
    
    // 为深色主题设置新的变量值
    document.documentElement.style.setProperty('--bg-color', `rgb(${bgValue}, ${bgValue}, ${bgValue})`);
    document.documentElement.style.setProperty('--text-color', `rgb(${textValue}, ${textValue}, ${textValue})`);
    
    // 根据滑块值添加或删除深色主题类
    if (value >= 50) {
        body.classList.add("dark-theme");
    } else {
        body.classList.remove("dark-theme");
    }
});

  </script>
</body>
</html>

结论

使用 CSS 制作暗黑主题滑块是一个相当简单的过程，只需使用 CSS 属性自定义滑块手柄、背景和轨道，并使用 JavaScript 更改页面的背景颜色即可。对于您的网站或应用程序，您可以使用本文介绍的技术快速开发暗黑主题滑块。这有助于减轻视力模糊，并让您更轻松地长时间阅读屏幕上的内容。随着暗黑主题日益流行，实现暗黑主题滑块可能会成为您用户界面工具箱中一项非常有用的功能。