昨天我们学习了两种明暗主题切换的方法，但是在SSR渲染的模式下，昨天的切换方法有一个问题，那就是在刷新网站的时候由于使用js读取的color-schema，或者使用js替换class样式的时候都会加载默认的css样式，导致切换到深色主题模式的时候刷新会闪一下浅色模式的样式，很影响查看体验。

昨天的笔记可以直接查看：https://sulao.cn/post/1041

今天我们就记录下从cookie中读取主题模式然后引用不同的样式表，这样就能解决掉昨天那两种模式的问题，具体操作我们接着看。

我们需要引入两套样式表，一个light.css,一个dark.css,这两个样式表有部分的颜色是反过来的，我们贴一下：

light.css

:root {
  --light-bg: #fff;
  --light-color: #2f363c;
  --light-code: #fafafa;
}
body{
    font-size: 14px !important;
    margin: 0;
    padding: 0;width: 100%;
    height: 100%;
    font-family: 'Century Gothic','Microsoft Yahei',tahoma,Arial;
    background-color: #7d3c4e;
    color: var(--light-color);
    transition: background-color 0.3s ease, color 0.3s ease;
}
.row-bg{
    background-color: var(--light-bg);
    opacity: 0.95;
}
.switch-theme{
  --light-bg: #2f363c;
  --light-color: #fff;
  --light-code: #fafafa;
}

dark.css

:root {
  --light-bg: #2f363c;
  --light-color: #fff;
  --light-code: #fafafa;
}
body{
    font-size: 14px !important;
    margin: 0;
    padding: 0;width: 100%;
    height: 100%;
    font-family: 'Century Gothic','Microsoft Yahei',tahoma,Arial;
    background-color: #7d3c4e;
    color: var(--light-color);
    transition: background-color 0.3s ease, color 0.3s ease;
}
.row-bg{
    background-color: var(--light-bg);
    opacity: 0.95;
}
.switch-theme{
  --light-bg: #fff;
  --light-color: #2f363c;
  --light-code: #fafafa;
}

flask视图中我们获取theme并传递到模板，主要在视图的钩子中添加这个功能

#前台视图钩子,限制每秒2次点击
@post.before_request
@limiter.limit("2/second", error_message="Too many requests!")
def post_cache():
    #开启缓存使用缓存的全站配置
    if current_app.config["CACHE_ENABLE"] == 1:
        site_config = cache.get("site_config")
        if not site_config:
            site_config = BConf.get(BConf.config_name == "site_config")
            cache.set("site_config", site_config, current_app.config["CACHE_DEFAULT_TIMEOUT"])
    else:
        site_config = BConf.get(BConf.config_name == "site_config")
    #如果站点状态未开放直接返回503
    if site_config.status == 0:
        return Response(site_config.prompt, status=503)
    g.start_time = time.time()
    #下面两行就是获取主题并传递到模板
    theme = request.cookies.get('theme', 'light')
    g.theme = theme

后端做好了，这样就能直接在前端调用不同的样式表，样式表调用这里可以这样写

<link rel="stylesheet" type="text/css" href="{{ url_for('static',filename='css/'+g.theme+'.css') }}" />

还需要添加一个javascript的配置方便传递到js文件中进行处理

<script>
    var themeMode = '{{ g.theme }}';
</script>
<script src="{{ url_for('static', filename='js/index.js') }}"></script>

index.js文件就是我们调用的js代码，代码内容如下

var storage = window.localStorage;
function switch_theme(theme){
var isDark = document.documentElement.classList.contains('switch-theme');
if(isDark){
    document.documentElement.classList.remove('switch-theme');
}else{
    document.documentElement.classList.add('switch-theme');
}
document.cookie = `theme=${theme}; path=/; max-age=${30 * 24 * 3600}`;
}
storage.theme = themeMode;  //从模板中配置的主题模式获取当前主题模式
$("#mode").on("click",function(){
    if(storage.theme == 'light'){
        switch_theme('dark');
        storage.theme = 'dark';
        $(this).html('<i class="layui-icon layui-icon-light"></i>');
    }else{
        switch_theme('light');
        storage.theme = 'light';
        $(this).html('<i class="layui-icon layui-icon-moon"></i>');
    }
});

我们实现的方式就是通过设置获取不同的cookie中theme的名字来拼接成对应的样式表文件，当然这样只有刷新的时候才有效果。当前页面实现的效果是通过在html添加对应的样式

class="switch-theme"，然后css通过这个class变量实现样式切换，而刷新网页或者打开新网页的时候就完全是使用对应的样式表了。