css+js实现支持亮色暗色黑色主题切换的菜单效果代码-html代码-BFW代码库

css+js实现支持亮色暗色黑色主题切换的菜单效果代码

代码语言：html

代码描述：css+js实现支持亮色暗色黑色主题切换的菜单效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">



    <style>
        @import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap");
        *,
        *:after,
        *:before {
          box-sizing: border-box;
        }
        
        :root {
          --c-text-primary: #191919;
          --c-text-secondary: #737374;
          --c-border-primary: #ccc;
          --c-bg-body: #ccc;
          --c-bg-primary: #fff;
          --c-bg-secondary: #d4d8dd;
          --c-bg-button: #fff;
          --slider-shadow: inset 0 1px 1px #ddd, 0 2px 3px #ccc;
        }
        :root.dark-theme {
          --c-text-primary: #eee;
          --c-text-secondary: #d3d5db;
          --c-border-primary: #454545;
          --c-bg-primary: #323339;
          --c-bg-secondary: #222128;
          --c-bg-button: #494a50;
          --slider-shadow: inset 0 1px 1px #767676;
        }
        :root.black-theme {
          --c-text-primary: #edeeef;
          --c-text-secondary: #d4d7e1;
          --c-border-primary: #323232;
          --c-bg-primary: #1b1d23;
          --c-bg-secondary: #000001;
          --c-bg-button: #343844;
          --slider-shadow: inset 0 1px 1px #555;
        }
        
        body {
          font-family: "Inter", sans-serif;
          line-height: 1.5;
          min-height: 100vh;
          display: flex;
          align-items: flex-end;
          justify-content: center;
          background-color: var(--c-bg-body);
          color: var(--c-text-primary);
        }
        
        .menu {
          width: 90%;
          max-width: 320px;
          background-color: var(--c-bg-primary);
          transition: background-color 0.15s ease;
          border-radius: 10px 10px 0 0;
          box-shadow: 0 0 2px rgba(0, 0, 0, 0.05), 0 -4px 16px rgba(0, 0, 0, 0.1);
        }
        
        .menu-header {
          padding: 1rem;
        }
        
        .menu-header-title {
          font-size: 0.875rem;
          color: var(--c-text-secondary);
          margin-bottom: 0.375rem;
          font-weight: 500;
        }
        
        .theme-switcher {
          background-color: var(--c-bg-secondary);
          border-radius: 10px;
          display: flex;
          padding: 0 3px;
          align-items: center;
          position: relative;
          overflow: hidden;
        }
        .theme-switcher .slider {
          display: block;
          position: absolute;
          z-index: 1;
          width: calc((100% - 6px) / 3);
          top: 3px;
          transform: translatex(-110%);
          bottom: 3px;
          border-radius: 6px;
          transition: 0.15s ease, transform 0.25s ease-out;
          background-color: var(--c-bg-button);
          box-shadow: var(--slider-shadow);
        }
        .theme-switcher input {
          display: none;
        }
        .theme-switcher input:nth-of-type(1):checked ~ .slider {
          transform: translateX(0);
        }
        .theme-switcher input:nth-of-type(2):checked ~ .slider {
          transform: translateX(100%);
        }
        .theme-switcher input:nth-of-type(3):checked ~ .slider {
          transform: translateX(200%);
        }
        .theme-switcher label {
          position: relative;
          z-index: 2;
          width: calc(100% / 3);
          color: var(--c-text-secondary);
        }
 .........完整代码请登录后点击上方下载按钮下载查看