网上冲浪时看到了这篇文章，顿时也有了为自己博客增加暗色主题的想法。https://tendcode.com/article/theme-change/这边文章说的很详细了，我在此基础根据我网站实际情况稍作了一点修改。

一、首先确定好暗黑色的主题颜色。

背景色：#22303f
卡片色：#18222d 
字体颜色：#738292
a标签颜色：#009688
a标签hover：#FF5722

二、选择切换背景色的图标

可以在阿里矢量图库查找自己喜欢的。https://www.iconfont.cn/

我这里选择的：

三、开启漫长的调试阶段

F12进入chrome的调试模式，然后根据自己的确定好的主题色，进行修改，调试好一个，就把对应的css样式写入night.css 文件中去，根据css文件加载顺序和权重，需要把night.css 样式放入到head的最下面，且部分样式需要加!import 进行覆盖。

四、配置按钮切换主题色

因为我的博客缓存，所以当切换主题后，需要向后端发起请求，告知清空缓存。view方法如下：

#  url.py
url(r'^change_theme/$', views.change_theme, name='change_theme')
#views.py
from django.core.cache import cache
def change_theme(request):
    theme = request.GET.get('theme')
    if not theme:
        msg = 'not found theme'
    else:
        cache.clear()
        msg = 'success'
    data = {
        'code': 200,
        'msg': msg
    }
    return JsonResponse(data)

前端配置切换主题的js，依赖jquery

//添加暗色主题css
function addDarkTheme() {
  var link = document.createElement('link');
  link.type = 'text/css';
  link.id = "theme-css-dark";  // 加上id方便后面好查找到进行删除
  link.rel = 'stylesheet';
  link.href = '/static/css/night.css';
  $("head").append(link);
}

// 删除暗色主题
function removeDarkTheme() {
  $('#theme-css-dark').remove();
}

//切换主题按钮，根据cookies切换主题
$("#theme-img").click(function () {
  var theme_key = "toggleTheme";
  var theme_value = Cookies.get(theme_key);
  if (theme_value === "dark") {
      $("#theme-img").attr("src", "/static/image/light.png");
      Cookies.set(theme_key, "light", {expires: 365});
      removeDarkTheme();
  } else {
      $("#theme-img").attr("src", "/static/image/night.png");
      Cookies.set(theme_key, "dark", {expires: 365});
      addDarkTheme();
  }
  $.getJSON('/blog/change_theme/', {'theme': theme_value}, function (data) {
      if(data['code'] === 200){
          return true
      } else {
          alert(data['msg'])
      }
  })
})

模板文件根据cookie判断是否加载night.css文件

 <!--根据cookies判断是否启用暗色主题-->
{% if request.COOKIES.toggleTheme == "dark" %}   
  <link rel="stylesheet" id="theme-css-dark" href="{% static 'css/night.css' %}">
{% endif %}