:root { font-family: system-ui, Avenir, Helvetica, Arial, sans-serif; line-height: 1.5; font-weight: 400; color-scheme: light dark; color: rgba(255, 255, 255, 0.87); background-color: #242424; --background-color: #242424; --text-color: #3d3d3d; font-synthesis: none; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } a { font-weight: 500; color: #646cff; text-decoration: inherit; } a:hover { color: #535bf2; } .dark { --background-color: #242424; --text-color: rgb(228, 228, 228); } body { margin: 0; display: flex; place-items: center; min-width: 320px; min-height: 100vh; } h1 { font-size: 3.2em; line-height: 1.1; } button { border-radius: 8px; border: 1px solid transparent; padding: 0.6em 1.2em; font-size: 1em; font-weight: 500; font-family: inherit; background-color: var(--background-color); color: var(--text-color); cursor: pointer; transition: border-color 0.25s; } button:hover { border-color: #646cff; } button:focus, button:focus-visible { outline: 4px auto -webkit-focus-ring-color; } .card { padding: 2em; } #app { max-width: 1280px; margin: 0 auto; padding: 2rem; text-align: center; } @media (prefers-color-scheme: light) { :root { color: #213547; background-color: #ffffff; } a:hover { color: #747bff; } button { background-color: #f9f9f9; } } p,a,h1,h2,h3,h4,h5,h6 { color: var(--text-color); } :root { --pre-background-color: #f5f5f5; /* 光明模式的背景颜色 */ --pre-text-color: #333; /* 光明模式的字体颜色 */ } .dark { --pre-background-color: #2d2d2d; /* 黑暗模式的背景颜色 */ --pre-text-color: #cccccc; /* 黑暗模式的字体颜色 */ }