项目遇到的问题

H5夜间模式

适配大部分元素

加上<meta name="color-scheme" content="light dark" />，媒体查询，有些颜色不符合的就加父组件 class 里 加上 ignore__auto_dark

h1:not(.ignore__auto_dark):not(.ignore__auto_dark *),  
h2:not(.ignore__auto_dark):not(.ignore__auto_dark *),  
h3:not(.ignore__auto_dark):not(.ignore__auto_dark *),  
h4:not(.ignore__auto_dark):not(.ignore__auto_dark *),  
h5:not(.ignore__auto_dark):not(.ignore__auto_dark *),  
h6:not(.ignore__auto_dark):not(.ignore__auto_dark *),  
div:not(.ignore__auto_dark):not(.ignore__auto_dark *),  
p:not(.ignore__auto_dark):not(.ignore__auto_dark *),  
article:not(.ignore__auto_dark):not(.ignore__auto_dark *),  
section:not(.ignore__auto_dark):not(.ignore__auto_dark *),  
aside:not(.ignore__auto_dark):not(.ignore__auto_dark *),  
header:not(.ignore__auto_dark):not(.ignore__auto_dark *),  
footer:not(.ignore__auto_dark):not(.ignore__auto_dark *),  
span:not(.ignore__auto_dark):not(.ignore__auto_dark *),  
ul:not(.ignore__auto_dark):not(.ignore__auto_dark *),  
li:not(.ignore__auto_dark):not(.ignore__auto_dark *),  
a:not(.ignore__auto_dark):not(.ignore__auto_dark *)  {  
  color: #A3A3A3 !important;  
  background-color: #0D0D0D !important;  
  border-color: rgba(116, 122, 130, 1) !important;  
}  
img,source,button {  
  filter: brightness(.95);  
}

应用

@media (prefers-color-scheme: dark) {
  .item,.title,.type,.actor,.desc,.item-infos:not(.ignore__auto_dark):not(.ignore__auto_dark) {
    color: #A3A3A3 !important;
    background-color: #161616 !important;
    border-color: rgba(116, 122, 130, 1) !important;
  };
  .bgtitle,.bgdesc:not(.ignore__auto_dark):not(.ignore__auto_dark) {
    color: #A3A3A3 !important;
  };
  .darkicon,.darkmask:not(.ignore__auto_dark):not(.ignore__auto_dark) {
    z-index: 3 !important;
    visibility: visible !important;
  }
  .lightmask,.lighticon:not(.ignore__auto_dark):not(.ignore__auto_dark) {
    z-index: -3 !important;
    visibility: hidden !important;
  }
  .titleTemplate,.typeTemplate,.descTemplate:not(.ignore__auto_dark):not(.ignore__auto_dark) {
    opacity: .5;
  }
}

其他

域名预解析

<link rel="dns-prefetch" href="https://xxx.com">

数据未加载骨架图

自己手写

适配折叠屏

百度

图片链接加载失败用兜底图

监听onerror事件

const imgLoadError = (event: React.SyntheticEvent<HTMLImageElement, Event>): void => {
    event.currentTarget.src = BASE64_IMG.templateItemImage;
    event.currentTarget.onerror = null;
}
<img className='image' src={item.coverVz} onError={imgLoadError}/>