資料結構
網路
關係型資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究如何使用 CSS 滑塊建立暗黑主題？
近年來，暗黑主題越來越受歡迎，因為它們可以減少眼睛疲勞，並使人們能夠更長時間地觀看顯示屏。本文將討論 CSS 滑塊功能，以建立暗黑主題。
CSS 滑塊（通常稱為範圍滑塊）是一種常見的使用者介面元件，它允許使用者透過沿著軌道滑動滑塊手柄來在一個範圍內選擇一個值。它們常用於設定面板和線上表單中。
語法
<input type="range" min="number" max="number" value="number" class="slider">
型別 - 輸入型別，例如按鈕、複選框或範圍
最小值 - 最小範圍
最大值 - 滑塊的最大範圍
值 - 滑塊的總數值
類 - 為滑塊容器指定的類
示例
在這裡，我們將建立一個滑塊，用於將網頁的主題從淺色更改為暗色。此滑塊將幫助您將頁面主題更改為從淺色到暗色的不同色調。我們將使用一些 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;
// 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 更改頁面的背景顏色。您可以使用本文中描述的技術，快速為您的網站或應用程式開發一個暗黑主題滑塊。這有助於減少視力模糊，並使人們更容易長時間閱讀顯示器上的內容。隨著暗黑主題越來越流行，實現暗黑主題滑塊可能是您使用者介面工具箱中一個有用的功能。
449 次檢視
