课程: Hands-On Introduction: JavaScript

免费学习该课程！

今天就开通帐号，24,700 门业界名师课程任您挑！

Create a dark mode switch

Create a dark mode switch - JavaScript教程

课程: Hands-On Introduction: JavaScript

开始一个月试用 购买团队方案

Create a dark mode switch

“

- [Narrator] In the previous chapter we looked at how to modify existing code. In this chapter, we'll focus on how to build new features into an existing project using a light dark mode selector as the example. Between the previous movie and this one I've made some changes to our project to get us started. Specifically, I've added this accessible toggle up here. As you can see, it's interactive but it's currently not doing anything so that will be our task as we get started. Let me briefly break down what these changes are and how everything fits together before you get your hands on JavaScript. We'll start in the style sheet, here I'm using custom properties to trigger the light and dark mode. The default is the light mode which is defined by these colors up here and below we have a media query targeting prefers color scheme dark. This is what triggers the dark mode. So we're just switching out these light colors…

内容