自定义VS Code调色板：自由书写代码配色方案

2023-11-10 12:48:19

1. 前期准备：

准备开发环境：确保已安装好HTML、CSS、JavaScript开发环境和VS Code编辑器。
收集灵感：浏览各种配色方案网站，如ColorHunt、Adobe Color、Coolors等，寻找自己喜欢的颜色组合作为配色方案的基础。

2. HTML结构搭建：

建立一个新的HTML文件，作为调色板的骨架。
使用<div>元素创建调色板的主容器，再用<ul>和<li>元素创建颜色列表。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  
  <link rel="stylesheet" href="style.css" />
</head>

<body>
  <div class="palette-container">
    <ul class="palette">
      <li class="palette-item">
        <div class="color-block"></div>
        <span class="color-name"></span>
      </li>
    </ul>
  </div>

  <script src="script.js"></script>
</body>

</html>

3. CSS样式美化：

定义<div>和<ul>元素的样式，设置调色板的整体布局。
为<li>元素和其中的<div>和<span>元素添加样式，设置颜色块的外观和文字样式。
使用CSS变量来存储颜色值，以便于后续修改。

/* CSS样式代码 */

.palette-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background-color: #efefef;
}

.palette {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  list-style: none;
  padding: 0;
}

.palette-item {
  width: 100px;
  height: 100px;
  margin: 10px;
  border: 1px solid #ddd;
  border-radius: 5px;
  cursor: pointer;
}

.color-block {
  width: 100%;
  height: 100%;
  background-color: var(--color);
}

.color-name {
  position: absolute;
  bottom: 0;
  left: 0;
  padding: 5px;
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
}

4. JavaScript交互逻辑：

使用JavaScript来动态生成颜色块，并为每个颜色块添加点击事件监听器，以实现颜色选择的交互功能。
定义一个颜色数组，其中包含您选择的颜色值，并使用循环来遍历数组并创建相应的颜色块。

/* JavaScript代码 */

// 定义颜色数组
const colors = [
  "#ff0000",
  "#ff7f00",
  "#ffff00",
  "#00ff00",
  "#0000ff",
  "#4b0082",
  "#8b00ff",
];

// 获取调色板元素
const palette = document.querySelector(".palette");

// 循环颜色数组并创建颜色块
colors.forEach((color) => {
  // 创建颜色块元素
  const paletteItem = document.createElement("li");
  paletteItem.classList.add("palette-item");

  // 设置颜色块的颜色
  paletteItem.style.setProperty("--color", color);

  // 创建颜色块名称元素
  const colorName = document.createElement("span");
  colorName.classList.add("color-name");
  colorName.textContent = color;

  // 将颜色块名称元素添加到颜色块元素中
  paletteItem.appendChild(colorName);

  // 添加点击事件监听器
  paletteItem.addEventListener("click", () => {
    // 将选中的颜色应用到文档的背景色
    document.body.style.backgroundColor = color;
  });

  // 将颜色块添加到调色板中
  palette.appendChild(paletteItem);
});