CSS 如何使用滑动条创建深色主题

深色主题近年来因为能够减轻眼睛疲劳并且使长时间观看显示屏变得更加容易而越来越受欢迎。本文将讨论使用CSS滑动条功能来制作深色主题。

一个常见的用户界面组件，称为CSS滑动条，通常被称为范围滑块，通过在跟踪栏上滑动一个手柄来让用户选择一个范围内的值。它们经常被用于设置面板和在线表单中。

语法

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

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

min- 最小范围

max- 滑块的最大范围

value- 滑块的总值

class- 指定给滑块容器的类

示例

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

步骤

步骤1： 为滑块和页面内容创建一个包含所有滑块内容的容器。

步骤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>
  Add page content here...

   <script>
  const slider = document.getElementById("dark-slider");
const body = document.querySelector("body");

slider.addEventListener("input", function() {
  const value = slider.value;

  // Calculate new color values based on slider value
  const bgValue = 255 - (value * 2.55);
  const textValue = value * 2.55;

  // Set new variable values for the dark theme
  document.documentElement.style.setProperty('--bg-color', `rgb( ${bgValue},$ {bgValue},  ${bgValue})`); document.documentElement.style.setProperty('--text-color', `rgb($ {textValue},  ${textValue},$ {textValue})`);

  // Add or remove dark theme class based on slider value
  if (value >= 50) {
    body.classList.add("dark-theme");
  } else {
    body.classList.remove("dark-theme");
  }
});

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

结论

使用CSS制作一个深色主题的滑块是一个相当简单的过程，它包括使用CSS属性来定制滑块手柄、背景和轨道，并使用JavaScript来改变页面的背景颜色。对于您的网站或应用程序，您可以使用本文中描述的技术快速开发一个深色主题的滑块。这可以帮助减少视觉模糊，并使长时间在显示屏上阅读材料更简单。实现深色主题的滑块可能是您用户界面工具箱的一个有用功能，因为深色主题是一个发展趋势。