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=EB+Garamond:ital,wght@0,400..800;1,400..800&display=swap');

* {
  box-sizing: border-box;
}

body {
        display: flex;
        flex-direction: column;
  min-height: 100vh;
  color: var(--color);
  background: var(--bg);
  font-family: SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif;
}

:root {
        color-scheme: light only;
        --line: color-mix(in lch, canvasText 25%, transparent);
  --color: hsl(0 0% 6%);
  --bg: hsl(0 0% 98%);
  --content-size: 520px;
  --eclipse: 60%;
}

.dark {
        color-scheme: dark only;
  --color: hsl(0 0% 98%);
  --bg: hsl(0 0% 6%);
}

body::before {
  --size: 60px;
  content: '';
  height: 100vh;
  width: 100vw;
  position: fixed;
  background: linear-gradient(
        90deg,
        var(--line) 1px,
        transparent 1px var(--size)
      )
      50% 50% / var(--size) var(--size),
    linear-gradient(var(--line) 1px, transparent 1px var(--size)) 50% 50% /
      var(--size) var(--size);
  -webkit-mask: linear-gradient(-15deg, transparent 60%, white);
          mask: linear-gradient(-15deg, transparent 60%, white);
  top: 0;
  transform-style: flat;
  pointer-events: none;
  z-index: -1;
}

.content {
        display: grid;
        gap: 1.5rem;
        justify-items: start;
}

a:not(.bear-link) {
        padding: 1rem 2rem;
        border-radius: 12px;
        color: var(--bg);
        -webkit-text-decoration-line: none;
                text-decoration-line: none;
        background: var(--color);
        font-weight: bold;
        transition: background 0.2s;
/*      justify-self: end;*/
}

.dark a:not(.bear-link):is(:hover, :focus-visible) {
        background: hsl(0 0% 80%);
}

a:not(.bear-link):is(:hover, :focus-visible) {
        background: hsl(0 0% 50%);
}

footer {
        padding: 2rem;
        text-align: center;
        opacity: 0.5;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

h1 {
        font-family: 'EB Garamond', serif;
        font-size: clamp(2rem, 5vw + 1rem, 8rem);
  line-height: 1;
  font-weight: 300;
  margin: 0;
}

header {
        width: var(--content-size);
        max-width: 100%;
        margin: 0 auto;
        min-height: 35vh;
        display: grid;
        align-content: end;
        padding: 0 2rem;
}

main {
  width: var(--content-size);
  max-width: 100%;
  margin: 0 auto;
  padding: 1rem 2rem;
  flex: 1;
}

pre {
  max-width: 100%;
}

p {
  text-align: justify;
  margin: 0;
}

.theme-t.........完整代码请登录后点击上方下载按钮下载查看