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-dec.........完整代码请登录后点击上方下载按钮下载查看