weather_react

主题更改 #

具体实现 #

实现也是比较简单,因为在react中就没有直接写:root全局的配置，在App组件最外层也可以实现全局配置，

颜色可以自己按着配色搭配着来

/* Light Mode */
.App[color-mode="light"] {
  --surface1: #e6e6e6;
  --surface2: #f2f2f2;
  --surface3: #ffffff;
  --element1: #111111;
  --element2: #222222;
  --element3: #333333;
  --elementInverse: #eee;
  --primary: #01408e;
  --secondary: #3c5d5c;
  --tertiary: #fff7d6;
}

/* Dark Mode */
.App[color-mode="dark"] {
  --surface1: #262626;
  --surface2: #333333;
  --surface3: #404040;
  --element1: #eeeeee;
  --element2: #dddddd;
  --element3: #cccccc;
  --elementInverse: #111;
  --primary: #8fceff;
  --secondary: #72faca;
  --tertiary: #eee8a9;
}
//引用写法： background-color: var(--element2);
/* Light Mode */
.App[color-mode="light"] {
  --surface1: #e6e6e6;
  --surface2: #f2f2f2;
  --surface3: #ffffff;
  --element1: #111111;
  --element2: #222222;
  --element3: #333333;
  --elementInverse: #eee;
  --primary: #01408e;
  --secondary: #3c5d5c;
  --tertiary: #fff7d6;
}

/* Dark Mode */
.App[color-mode="dark"] {
  --surface1: #262626;
  --surface2: #333333;
  --surface3: #404040;
  --element1: #eeeeee;
  --element2: #dddddd;
  --element3: #cccccc;
  --elementInverse: #111;
  --primary: #8fceff;
  --secondary: #72faca;
  --tertiary: #eee8a9;
}
//引用写法： background-color: var(--element2);

参考网站：https://ryanfeigenbaum.com/dark-mode/

一些功能组件 #

用来位置查询api和天气查询api可以自己区申请，结构也很简单，一个search组件，还有当天天气详情与未来七天天气详情。

search是用了组件库（react-select-async-paginate）有一些简单的配置项

还是用了Accordion组件，接口少用的fetchd获取数据