在 src/app 目录的下面先准备几个小图标，这些小图标你可以在这个代码仓库里找到。在 src/app/icons 里面，把这些小图标下载下来，放到自己的项目里。

在 React 应用里，组件可以通过属性的方式把数据一级一级地传递给它的后代，也可以使用 Context 传递数据，好处是不需要一级一级往下传递，任意级别的后代都可以直接获取到使用 Context 传递的数据。

打开 app.tsx 文件，创建 Context 需要用到 react 这个包提供的 createContext，把它从 react 这个包里导入进来。然后创建并导出一个 context ，export 一个 AppContext ，用 createContext 创建 context，使用这个函数的时候要设置这个 context 默认提供的值。一个对象，里面添加一个 theme，表示应用当前使用的主题，它的值是 light。

在 App 组件里，使用 useState 创建一个状态，第一个项目叫 theme，第二个项目是 setTheme，用一下 useState，默认值是 light。使用这个 useState 函数的时候，编辑器会自动帮我们更新导入它，如果没有导入可以选中 useState，按一下 command + . 然后选择导入它。

这个 theme 还有 setTheme 就是要用 Context 提供的东西。

创建的 context，都会提供一个 Provider 组件，在 App 组件里用一下 AppContext.Provider 这个组件，用它包装一些组件现在要显示的这些东西。要提供的数据可以交给这个 Provider 组件的 value 属性，一个对象，里面添加一个 theme，还有 setTheme。

这样这个 Provider 组件在任意层级的后代，都可以获得到这里提供的数据。也就是这个 theme 还有 setTheme。

现在这里提示了一个类型问题，说 setTheme 在这个 context 的值里不存在。我们需要处理一下，在上面定义一个 type，名字是 AppContextValue，它里面有一个 theme，类型是 string，再添加一个 setTheme? ，类型是 Dispatch，参数类型是 SetStateAction，它的参数类型是 string。在使用 createContext 的时候设置一下数据类型，AppContextValue。

这个 context 的 Provider 组件的作用就是让使用这个 context 的组件可以订阅这个 context 的变化。

Consumer

下面可以找一个这个 Provider 组件的后代，然后用一下 context 提供的数据。打开这个 AppHeader 组件，在文件顶部，导入 AppContext ，位置是 app 下面的 app 组件。

这个 AppHeader 是一个类组件，想在这种组件里使用 context 提供的值，可以用一下 context 里的 Consumer 组件，先剪切一下组件的显示，然后用一组 AppContext.Consumer 组件。

一组大括号，需要提供一个函数，函数的参数值就是这个 AppContext 提供的数据，我们可以直接解构一下，需要的是 theme 还有 setTheme。 这个函数要返回组件的显示。现在我们就可以在这里使用 AppContext 提供的 theme 还有 setTheme 了。把剪切的东西粘贴到这个括号里。

然后随便找个地方，可以绑定输出这个 theme 的值。然后在浏览器预览一下，现在这个 AppHeader 上面会显示在 App 组件里创建的那个 context 提供的 theme 这个状态的值。

下面我们可以在 AppHeader 这个组件里，根据这个 theme 状态的值决定要显示的小图标。如果是 light 就显示 lightIcon ，如果是 dark 就显示 darkIcon。

先在文件顶部导入两个 svg 小图标，导入 lightIcon，位置是 app 目录里的 icons 里的 light.svg ，再导入 darkIcon，位置是 app 下面的 icons 里的 dark.svg。

在组件的显示这里，添加一个 div 元素，一组大括号，判断一下 theme 是否等于 light，如果是就显示 lightIcon 小图标，不是就显示 darkIcon 小图标。用一个 img 元素，src 的值是 lightIcon ，添加一个 alt 属性，再监听一下点击事件，点击这个小图标可以执行一下 setTheme，提供的值是 dark。这样点击这个小图标会把 theme 这个状态的值改成 dark。

复制一份，如果 theme 的值不是 light，要显示的是 darkIcon 小图标，点击这个小图标执行 setTheme，把 theme 这个状态的值改成 light。

测试

在浏览器测试一下，这个头部的样式再调整一下，打开 app-header.css，在这个 .app-header > .content 这段样式里，用一下 gap 属性，添加点间隔，大小是 16 像素。

现在 AppHeader 这里显示的就是 lightIcon 小图标，因为当前 theme 这个状态的值是 light。点击这个小图标，会把 theme 状态改成 dark，这样就会显示 darkIcon 小图标，再点一下这个小图标，会把 theme 改变 light，现在显示的就会是 lightIcon。