投资组合网站：明暗模式设计展示与CSS应用

资源摘要信息:"在明暗模式下的投资组合网站" CSS知识点: 1. 明暗模式概述： 明暗模式（也称为亮色模式和暗色模式），是一种用户界面主题，允许用户根据个人喜好或情境需要选择界面的颜色方案。亮色模式以浅色背景为主，文字和图标颜色较深；而暗色模式则以深色背景为主，文字和图标颜色较浅。这种模式的切换可以帮助减少眼睛疲劳，适合在光线较暗的环境中使用。 2. CSS媒体查询： 在创建一个支持明暗模式的网站时，可以使用CSS媒体查询（Media Queries）来检测用户的偏好设置。例如，可以监听用户的系统颜色方案选择，并在用户切换明暗模式时，通过CSS媒体查询更改网站的颜色方案。 媒体查询基本语法： ```css @media (prefers-color-scheme: dark) { /* 在暗色模式下应用的CSS样式 */ } ``` 3. CSS变量： 为了方便管理和维护不同颜色模式下的样式，可以使用CSS变量（Custom Properties）。CSS变量允许我们定义可在整个文档范围内重复使用的值，并在用户切换明暗模式时轻松更改这些值。 例如： ```css :root { --text-color: black; --background-color: white; } @media (prefers-color-scheme: dark) { :root { --text-color: white; --background-color: black; } } ``` 4. JavaScript实现明暗模式切换： 虽然CSS已经提供了强大的功能来实现明暗模式，但是有时候我们还需要使用JavaScript来手动切换模式，或者在页面加载时根据用户的偏好来设置初始模式。通过检测系统颜色方案选择或者通过DOM操作来切换类名，我们可以实现这一功能。 例如： ```javascript if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) { document.documentElement.classList.add('dark-mode'); } else { document.documentElement.classList.add('light-mode'); } ``` 5. 模式切换按钮的实现： 除了系统自动切换模式外，我们通常还需要提供一个模式切换按钮，供用户手动选择。这通常涉及到监听按钮点击事件，并使用JavaScript来切换页面的模式。 例如： ```javascript const toggleButton = document.querySelector('#mode-toggle'); toggleButton.addEventListener('click', () => { document.documentElement.classList.toggle('dark-mode'); }); ``` 6. SCSS预处理器的使用： 对于大型项目，使用SCSS这样的CSS预处理器可以帮助我们更好地组织和复用代码。SCSS支持变量、嵌套规则、混合等高级功能，能够使我们更方便地为不同模式编写和切换样式。 例如： ```scss $light-background: white; $dark-background: black; $primary-color: blue; @mixin dark-mode { background-color: $dark-background; color: white; } @mixin light-mode { background-color: $light-background; color: $primary-color; } body { @include light-mode; } @media (prefers-color-scheme: dark) { body { @include dark-mode; } } ``` 通过上述知识点的介绍，我们可以了解到创建具有明暗模式的投资组合网站需要掌握的关键技术。利用CSS的媒体查询和变量，JavaScript的DOM操作以及可能需要的SCSS预处理技术，可以构建出既美观又实用的响应用户偏好设置的网站。