codecamp

主题扩展

主题扩展用于为喧喧提供额外的外观选项。一个主题扩展中可以提供多款主题供用户选择使用。主题扩展所提供的主题在 package.json 文件中通过 themes 字段进行声明。themes 字段为一个对象数组,数组中的每个对象为一个主题配置。

下面为官方暗黑主题的 package.json 文件:

{     
    "name": "dakr-theme-example",     
    "displayName": "暗黑主题",     
    "version": "1.0.0",     
    "description": "提供 1 款暗黑主题外观。快让黑暗降临吧!",     
    "type": "theme",     
    "icon": "mdi-lightbulb",     
    "accentColor": "#333",     
    "themes": [         
        {             
            // 主题的名称,同一个扩展中的主题名称不能相同             
            "name": "dark",      
                   
            // 主题在界面上显示的名称             
            "displayName": "暗黑",   
                      
            // 主题的主色调             
            "color": "#333",      
                   
            // 主题对应的 css 文件             
            "style": "themes/dark.css",  
                       
            // 主题的载入方式             
            "inject": "append"         
        }     
    ],     
    // 其他配置

主题的 css 文件载入方式包括两种:

  • append:将 css 文件作为默认样式表的补充,即挂在在默认主题样式的后面;
  • override:将 css 文件替换原来的默认样式表。

这个主题可以在  dark-theme-example 找到源码。


插件扩展
主题管理
温馨提示
下载编程狮App,免费阅读超1000+编程语言教程
取消
确定
目录

关闭

MIP.setData({ 'pageTheme' : getCookie('pageTheme') || {'day':true, 'night':false}, 'pageFontSize' : getCookie('pageFontSize') || 20 }); MIP.watch('pageTheme', function(newValue){ setCookie('pageTheme', JSON.stringify(newValue)) }); MIP.watch('pageFontSize', function(newValue){ setCookie('pageFontSize', newValue) }); function setCookie(name, value){ var days = 1; var exp = new Date(); exp.setTime(exp.getTime() + days*24*60*60*1000); document.cookie = name + '=' + value + ';expires=' + exp.toUTCString(); } function getCookie(name){ var reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)'); return document.cookie.match(reg) ? JSON.parse(document.cookie.match(reg)[2]) : null; }