作者：阿秀
InterviewGuide大厂面试真题网站：https://top.interviewguide.cn

小伙伴们大家好，我是阿秀。

关注我久的小伙伴可能知道，我是在今年上半年5月份的时候离开字节，一月后入职到现在的这家外企的。

在准备期间自己自己希望根据筛选条件查看自己想要看的面试问题，比如可以查看行业为互联网，公司为字节跳动，考察岗位为后端，考察科目为数据结构，考察时间为最近一年之类的面试题有哪些？

但很可惜，当时我并没有找到类似的网站，再后来就想着自己动手写一个，毕竟毛爷爷曾经说过：自己动手，丰衣足食。

这个想法就一直在我心里深埋着，5月份我从字节跳动跳槽到某外企后，利用自己的业余休息时间，前后花了两三个月时间将之复现出来，前后端都是脚手架直接开撸的，包括两个前端和一个后端的开发以及数据的收集和录入，最后就变成了InterviewGuide这个网站。

前几天看了下访问数据，感觉还可以，有些面试问题甚至都访问超过 8000 次之多了，说明还是有点帮助的哈哈

但一直没加上暗黑模式，自己也没当回事，结果昨天晚上被人cue了一下，说使用浏览器的暗黑模式访问我的网站效果很糟糕，有些文字无法显示，顿时有一种夜半时分用户找上门来说你写的代码有bug的感觉了。。

后来想想，作为程序员夜猫子居多，暗黑模式确实比较实用，于是就花了十来分钟搞了下，给自己新开发的这个网站安排上暗黑模式了。

先来看看最终的暗黑模式效果吧。

其实整个流程很简单，这里也简单说下，如果你有自己的博客或者网站想要自己动手实现这个功能可以参考下我的步骤。

1、增加全局css样式

首先在全局css样式中增加一个 dark 模式即可，主要就是filter这个属性， invert(1);则表示100%完全反转样式，说人话就是颠倒黑白，白的让它变成黑的，黑的让它变成白的。

html {
  &.dark {
    filter: invert(1);

    // 通过再次反转图像, 来让图片颜色保持正常
    img {
      filter: invert(1);
    }
  }
  // 切换黑夜模式时添加过渡动画
  // transition: color .6s, background-color .6s; // 无效?
  transition: all .6s; // 有效
}

2、定义一个事件

通过一个按钮button或者div绑定一个切换模式的点击事件，并且存储在cookie中，方便下次直接从cookie读数据，保持上次访问时的状态。

export function setMode(mode: string) {
  if (mode === LIGHT_MODE) {
    document.documentElement.classList.remove('dark') // 移除暗黑模式 
  } else {
    document.documentElement.classList.add('dark')// 暗黑模式增加
  }
  setLocal(WEBSITE_MODE, mode, DURATION)
}

后来搞完后跟这位cue我的小伙伴说了下，现在已经支持了。

搞完后，我想了想自己好像有段时间没在晚上写代码了，以前在字节的时候搞到十一二点是家常便饭，有时候甚至要把电脑带回家搞，别问，问就是自愿加班、主动加班，好久没体验过这种半夜被人叫起来改bug的感觉了哈哈。

最后也感谢这位提出意见的小伙伴，他还祝我工作顺利了哈哈

欢迎各位大佬体验阿秀开发的这个互联网大厂面试真题解析网站，接下来的一段时间里阿秀还会继续开发新功能，敬请期待。

如果各位在使用过程中有意见或者bug发现，欢迎在阿秀的公众号留言反馈或者也可以直接加我的私人微信告知，扫描下方二维码即可添加我的微信。

当然了，也欢迎各位大佬添加我的私人微信，阿秀时常会在朋友圈分享一些社招/校招岗位，也会时不时分享一些实用工具、免费羊毛等，欢迎来做点赞之交，一般不闲聊~如果你已经添加我其余微信了，无需重复添加。