可道云KODBOX开启黑暗护眼模式

博主：时光假寐
发布时间：2021 年 01 月 15 日
1254 次浏览
暂无评论
55094字数
分类：折腾笔记

> 可道云KODBOX是一款非常好用的云端文件协同合作的开源框架，在免费里应该算是佼佼者，使用后你会惊叹它流畅的使用体验，和windows操作没多大区别，对小型的创业公司来说意义重大。
> 在使用过程中，如果长时间使用，还是黑暗护眼模式更舒适一些，但是目前官方还没有出黑暗模式，所以自己写了一个css样式。

### 简单介绍

利用css 的@media (prefers-color-scheme: dark)属性设置前端黑暗模式
prefers-color-scheme CSS 媒体特性用于检测用户是否有将系统的主题色设置为亮色或者暗色。
简而言之，就是可以实现随系统（或浏览器）的深、浅色模式设置，改变网页配色。

### 操作方法（选择其一即可）

- 复制粘贴下面css样式至 后台管理 - 系统设置 - 基础设置 - 其他设置 - 自定义全局css，目前更新后官方改了后台css引入方式，所以此方法目前只对前台有效，
- (推荐)或者新建文件dark.css，复制粘贴下文css样式，并上传到服务器再引入css文件，此方法对前台后台都有效。
  - 在你的可道云随便哪个文件夹建立一个dark.css文件，复制粘贴下方css样式文件，右键-属性-复制外链地址。
  - 编辑web根目录/app/template/user/index.html
  - 在`</head>`之前插入`<link href="刚才复制的外链地址" rel="stylesheet">`

保存-刷新

如果没啥变化。请检查浏览器是否开启黑暗模式或者系统开启黑暗模式后浏览器跟随系统设置。理论上支持手机，平板，电脑等平台。

### 最终效果如图

![koxbox黑暗demo](https://www.silencetime.com/usr/uploads/2021/01/1297518316.jpg)

### CSS样式

<div class="hideContent">此处内容需要评论回复后（审核通过）方可阅读。</div>

### 附：隐藏侧边栏css

```css
/* 隐藏侧边 */
.app-main,
#app.app-desktop .bodymain {
    left: 0;
}

.menuBar {
    z-index: 999999;
     left: -62px; 
     opacity: 0; 
    /*box-shadow: 0 0 25px #b4b4b4;*/
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
}

.menuBar:hover {
    left: 0;
    opacity: 1;
}

/* 768 < 宽度*/

@media screen and (min-width: 768px) {  
    .app-main,
    #app.app-desktop .bodymain {
        left: 0;
    }
    .menuBar {
        z-index: 999999;
         left: -62px; 
         opacity: 0; 
        /*box-shadow: 0 0 25px #b4b4b4;*/
        -webkit-transition: all .2s ease-in-out;
        -moz-transition: all .2s ease-in-out;
        -o-transition: all .2s ease-in-out;
         transition: all .2s ease-in-out; 
    }
    .menuBar:hover {
        left: 0;
        opacity: 1;
    }
}
```

### 20210305更新

支持1.18版本

```css
@charset "UTF-8";

:root {
    --dark-q1: #dadada;
    --dark-s1: #b5b5b5;
    --dark-s2: #949494;
    --dark-s3: #797979;
    --dark-s4: #545454;
    --dark-s5: #3e3e3e;
    --dark-s6: #292929;
    --dark-s7: #212121;
    --dark-s8: #131313;
    --dark-s9: #060606;
    --dark-s10: #000000;
    --blue-bg: #344e61;
    --blue-border-s: #007da5;
    --blue-light: #029ee3
}
@media (prefers-color-scheme: dark) {
    body input::-webkit-input-placeholder {
        color: var(--dark-q1);
        opacity: 0.7
    }
    body input::-moz-placeholder {   /* Mozilla Firefox 19+ */
        color: var(--dark-q1);
        opacity: 0.7
    }
    body input:-moz-placeholder {    /* Mozilla Firefox 4 to 18 */
        color: var(--dark-q1);
        opacity: 0.7
    }
    body input:-ms-input-placeholder {  /* Internet Explorer 10-11 */ 
        color: var(--dark-q1);
        opacity: 0.7
    }
    /*front-munebar*/
    #app .menuBar {
        background: linear-gradient(to bottom, var(--dark-s5), var(--dark-s9));
    }
    #app .app-main .frame-left {
        background: var(--dark-s8);
    }
    #app .app-main .frame-left .ztree li a {
        color: var(--dark-s1)
    }
    #app .app-main .frame-left .ztree li a .menu-item {
        background: var(--dark-s3);
        border-color: var(--dark-s4)
    }
    #app .frame-main-explorer .frame-left .ztree li a:hover, 
    #app .frame-main-explorer .frame-left .ztree li a:active, 
    #app .frame-main-explorer .frame-left .ztree li a:focus,
    #app .frame-main-explorer .frame-left .ztree li a.level0:hover, 
    #app .frame-main-explorer .frame-left .ztree li a.level0:active, 
    #app .frame-main-explorer .frame-left .ztree li a.level0:focus {
        background: var(--dark-s5)
    }
    #app .frame-main-explorer .frame-left .ztree li a.curSelectedNode:active, 
    #app .frame-main-explorer .frame-left .ztree li a.curSelectedNode, 
    #app .frame-main-explorer .frame-left .ztree li a.curSelectedNode:hover, 
    #app .frame-main-explorer .frame-left .ztree li a.curDropTreeNode,
    #app .frame-main-explorer .frame-left .ztree li a.level0.curSelectedNode, 
    #app .frame-main-explorer .frame-left .ztree li a.level0.curSelectedNode:hover, 
    #app .frame-main-explorer .frame-left .ztree li a.level0.curSelectedNode:active, 
    #app .frame-main-explorer .frame-left .ztree li a.level0.curDropTreeNode {
        background: var(--blue-bg);
        border: 1px solid var(--blue-border-s)
    }
    /*right-header */
    #app .frame-main-explorer .frame-right {
        border-left: 1px solid var(--dark-s4);
    }
    #app .frame-main-explorer .frame-right .frame-header {
        background: linear-gradient(to bottom, var(--dark-s5), var(--dark-s7));
    }
    #app .frame-main-explorer .frame-header .header-content {
        border-color: var(--dark-s4)
    }
    #app .frame-main-explorer .frame-right .frame-header .header-content .header-left .btn.btn-default .font-icon {
        color: var(--dark-s1);
    }
    #app .frame-main-explorer .frame-right .frame-header .header-content .header-left button.disable .font-icon {
        color: var(--dark-q1);
    }
    #app .frame-main-explorer .frame-header .header-middle .btn-default,
    #app .frame-main-explorer .frame-header .header-content .header-left .btn {
        background: var(--blue-bg);
        border-color: var(--blue-border-s)
    }
    #app .frame-main-explorer .frame-header .header-middle .header-address {
        border-color: var(--blue-border-s)
    }
    #app .frame-main-explorer .frame-header .header-middle .header-address .header-address-content .header-address-item a {
        background-image: url(../images/common/h_button.png)
    }
    #app .frame-main-explorer .frame-header .header-middle .children-list {
        background: var(--dark-s6);
        border: 1px solid var(--dark-s5)
    }
    .frame-main-explorer .frame-header .header-middle .children-list .list-item {
        color: var(--dark-s2)
    }
    .frame-main-explorer .frame-header .header-middle .children-list .list-item:hover, 
    .frame-main-explorer .frame-header .header-middle .children-list .list-item.active {
        background: var(--dark-s7);
        color: var(--blue-border-s)
    }
    .frame-main-explorer .frame-header .header-middle .children-list .list-item.current {
        color: var(--blue-light)
    }
    #app .frame-main-explorer .frame-header .header-middle .header-address .header-address-content .header-address-item a, 
    #app .frame-main-explorer .frame-header .header-middle .header-address .header-address-content .header-address-item a:link, 
    #app .frame-main-explorer .frame-header .header-middle .header-address .header-address-content .header-address-item a:visited {
        color: var(--dark-q1)
    }
    #app .frame-main-explorer .frame-header .header-content .header-right .search-box {
        color: var(--dark-q1);
    }
    #app .frame-main-explorer .frame-header .header-content .header-right .search-box input.search {
        background: var(--dark-s4);
        border-color: var(--blue-border-s);
        color: var(--dark-s1)
    }
    #app .frame-main-explorer .frame-header .header-content .header-right .search-box .btn-default {
        background: var(--dark-s6);
        border-color: var(--blue-border-s)
    }
    #app .frame-main-explorer .frame-header kod-toolbar .btn.btn-default, 
    #app .btn-group>.btn.btn-default, 
    #app .btn-group-sm>.btn.btn-default {
        background: var(--dark-s4);
        border-color: var(--blue-border-s);
        text-shadow: none;
        color: var(--dark-q1)
    }
    #app .frame-main-explorer .frame-header .tools .tools-right {
        background: var(--dark-s9);
        box-shadow: none

}
    #app .frame-main-explorer .frame-header .search-dropdown {
        border-color: var(--dark-s3);
        background: var(--dark-s6)
    }
    #app .form-box .form-row .setting-title {
        color: var(--dark-q1);
    }
    #app .btn-group.btn-group-segment> .btn.btn-default {
        border-color: var(--dark-s3);
        background: var(--dark-s7);
        color: var(--dark-q1);
        text-shadow: none
    }
    #app .form-box .form-row .setting-content,
    #app .from-box {
        color: var(--dark-s2)
    }
    #app input[type="checkbox"].kui-checkbox {
        background: var(--dark-s6);
        border-color: var(--dark-s3)
    }
    #app .frame-main-explorer .frame-header .search-dropdown .form-box.config-box .panel-form-body hr {
        border-color: var(--dark-s3)
    }
    #app .frame-main-explorer .frame-header .search-dropdown .form-box.config-box .panel-form-body {
        background: var(--dark-s6)
    }
    #app span.select2-container--default .select2-selection--single, 
    #app span.select2-container--classic .select2-selection--single {
        background: var(--dark-s3);
        border-color: var(--dark-s1);
    }
    #app .select2-container--default .select2-selection--single .select2-selection__rendered {
        color: var(--dark-s6)
    }
    #app .select2-container--default .select2-selection--single .select2-selection__arrow b {
        border-color: var(--dark-s1) transparent transparent transparent
    }
    span.select2-container--default.select2-container--open .select2-dropdown.select2-dropdown--below, 
    span.select2-container--classic.select2-container--open .select2-dropdown.select2-dropdown--below,
    span.select2-container--default .select2-dropdown, 
    span.select2-container--classic .select2-dropdown {
        background: var(--dark-s6);
        color: var(--dark-s1);
        border-color: var(--dark-s6)
    }
    span.select2-container .select2-results__option[aria-selected=true], 
    span.select2-container .select2-results__option.select2-results__option--highlighted, 
    span.select2-container .select2-results__option:hover, 
    span.select2-container .select2-results__option:active, 
    span.select2-container .select2-results__option:focus {
        background; var(--dark-s7);
        color: var(--dark-s3)
    }
    #app .frame-main-explorer .frame-header .tools {
        background: none;
        border-color: var(--dark-s3)
    }

/*bodymain */
    .frame-main-explorer .frame-right .bodymain {
        background: var(--dark-s6);
        color: var(--dark-s1)
    }
    body #app div.file-continer .file.select, body div.file-continer .file.file-select-drag-temp {
        background: var(--dark-s4);
        border-color: var(--blue-border-s)
    }
    #app .file-continer .file.file-focus {
        background: var(--dark-s5);
        border-color: var(--blue-bg)
    }
    body div.file-continer .file.select:focus, 
    body div.file-continer .file.select.file-focus, 
    body div.file-continer .file.file-select-drag-temp:focus, 
    body div.file-continer .file.file-select-drag-temp.file-focus {
        border-color: var(--blue-border-s)
    }
    body #app div.file-continer .file.hover {
        background: var(--dark-s8);
        border-color: var(--dark-s4)
    }
/*     右键菜单 */
    .context-menu-list.animated, 
    .context-menu-list .context-menu-list,
    #app .context-menu-list.menu-auto-fit {
        background: var(--dark-s7);
        border: 1px solid var(--dark-s4);
    }
    #app .context-menu-list .context-menu-item {
        color: var(--dark-s1)
    }
    #app .context-menu-list .context-menu-item.hover {
        background: var(--dark-s9)
    }
    #app .context-menu-list .context-menu-item.hover .context-menu-item .item:hover {
        background: var(--dark-s9);
        text-shadow: none
    }
    #app .context-menu-list .context-menu-item.context-menu-separator {
        border-color: var(--dark-s4)
    }
    /*文档右侧详细信息 */
    .frame-main-explorer .bodymain, .frame-main-explorer .file-panel{
        background: var(--dark-s7);
        border-color: var(--dark-s4)
    }
    .frame-main-explorer .file-panel .panel-info-header {
        background: linear-gradient(190deg,var(--dark-s5),var(--dark-s8));
        border-color: var(--dark-s3)
    }
    #app .file-panel .panel-info-header .header-content .file-name {
        color: var(--dark-s1)
    }
    #app .file-panel .pathinfo .p.info-item-path-group .content .link, 
    #app .file-panel .pathinfo .p.info-item-path .content .link,
    #app .file-panel .pathinfo .p.info-item-path-group .content, 
    #app .file-panel .pathinfo .p.info-item-path .content,
    #app .file-panel .pathinfo .p > .content {
        color: var(--dark-s1)
    }
    #app .frame-main-explorer .file-panel > .tab-group-line .tab-item {
        background: var(--dark-s6);
    }
    #app .frame-main-explorer .file-panel .dialog-tab {
        background: var(--dark-s4);
        border-color: var(--dark-s5)
    }
    #app .frame-main-explorer .file-panel > .tab-group-line .tab-item.active, 
    #app .frame-main-explorer .file-panel > .tab-group-line .tab-item.active .font-icon {
        background: var(--dark-s8)
    }
    /*上传*/
    .dialog-file-upload.aui-state-focus .aui-outer .aui-border .aui-title {
        background: var(--dark-s7);
        text-shadow: none;
        color: var(--dark-s1)
    }
    .dialog-file-upload.aui-state-focus .aui-outer .aui-border .aui-min, 
    .dialog-file-upload.aui-state-focus .aui-outer .aui-border .aui-max, 
    .dialog-file-upload.aui-state-focus .aui-outer .aui-border .aui-close {
        background-color: var(--dark-s5);
    }
    .dialog-file-upload.aui-state-focus .aui-outer .aui-border .aui-min:hover, 
    .dialog-file-upload.aui-state-focus .aui-outer .aui-border .aui-min:active, 
    .dialog-file-upload.aui-state-focus .aui-outer .aui-border .aui-max:hover, 
    .dialog-file-upload.aui-state-focus .aui-outer .aui-border .aui-max:active, 
    .dialog-file-upload.aui-state-focus .aui-outer .aui-border .aui-close:hover, 
    .dialog-file-upload.aui-state-focus .aui-outer .aui-border .aui-close:active {
        background-color: var(--blue-bg);
    }
    .dialog-file-upload.aui-state-focus .aui-outer .aui-border .aui-main {
        background: var(--dark-s6)
    }
    .dialog-file-upload.aui-state-focus .aui-outer .aui-border .dialog-tab .tab-item:hover, 
    .dialog-file-upload.aui-state-focus .aui-outer .aui-border .dialog-tab .tab-item:active, 
    .dialog-file-upload.aui-state-focus .aui-outer .aui-border .dialog-tab .tab-item:focus {
        background: var(--dark-s5)
    }
    .dialog-file-upload.aui-state-focus .aui-outer .aui-border .dialog-tab .tab-item.active, 
    .dialog-file-upload.aui-state-focus .aui-outer .aui-border .dialog-tab .tab-item.active:hover {
        background: var(--dark-s8)
    }
    .dialog-file-upload.aui-state-focus .aui-outer .aui-border .dialog-tab {
        border-color: var(--dark-s4)
    }
    .dialog-file-upload.aui-state-focus .aui-outer .aui-border .aui-content {
        color: var(--dark-s1)
    }
    .dialog-file-upload.aui-state-focus .aui-outer .aui-border .file-upload-box .upload-box-tips .btn.btn-default {
        background: var(--dark-s5);
        text-shadow: none;
        color: var(--dark-s1);
        border-color: var(--dark-s3)
    }
    .dialog-file-upload.aui-state-focus .aui-outer .aui-border .file-upload-box .list input {
        background: var(--dark-s5);
        color: var(--dark-s1);
        border-color: var(--dark-s3)
    }
    .dialog-file-upload.aui-state-focus .aui-outer .aui-border .file-upload-box .download-btn-group .btn.btn-default {
        background: var(--dark-s6);
        border-color: var(--dark-s3);
        text-shadow: none;
        color: var(--dark-s1)
    }
    .dialog-file-upload.aui-state-focus .aui-outer .aui-border .file-upload-box .uploader-content, 
    .dialog-file-upload.aui-state-focus .aui-outer .aui-border .file-upload-box .downloader-content {
        border-color: var(--dark-s4)
    }
    .dialog-file-upload.aui-state-focus .aui-outer .aui-border .file-upload-box .upload-select-file,
    .dialog-file-upload.aui-state-focus .aui-outer .aui-border .file-upload-box .upload-cert {
        background-image: -webkit-linear-gradient(top,var(--dark-s3),var(--dark-s7));
        background-image: -moz-linear-gradient(top,var(--dark-s3),var(--dark-s7));
        background-image: -o-linear-gradient(top,var(--dark-s3),var(--dark-s7));
        background-image: -ms-linear-gradient(top,var(--dark-s3),var(--dark-s7));
        background-image: linear-gradient(top,var(--dark-s3),var(--dark-s7));
        -pie-background: linear-gradient(to top,var(--dark-s3),var(--dark-s7));
        background: var(--dark-s4)
    }
    .dialog-file-upload.aui-state-focus .aui-outer .aui-border .file-upload-box .uploader-list .item, 
    .dialog-file-upload.aui-state-focus .aui-outer .aui-border .file-upload-box .download-list .item {
        background: var(--dark-s4);
        border-color: var(--dark-s2);
        color: var(--dark-q1);
    }
    .dialog-file-upload.aui-state-focus .aui-outer .aui-border .file-upload-box .uploader-list .item .progress,
    .dialog-file-upload.aui-state-focus .aui-outer .aui-border .file-upload-box .download-list .item .progress {
        background-image: -webkit-linear-gradient(top,var(--dark-s3) 0,var(--dark-s5) 100%);
        background-image: -o-linear-gradient(top,var(--dark-s3) 0,var(--dark-s5) 100%);
        background-image: -webkit-gradient(linear,left top,left bottom,from(var(--dark-s3)),to(var(--dark-s5)));
        background-image: linear-gradient(to bottom,var(--dark-s3) 0,var(--dark-s5) 100%);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='var(--dark-s3)', endColorstr='var(--dark-s5)', GradientType=0);
        background-repeat: repeat-x;
    }
    .dialog-file-upload.aui-state-focus .aui-outer .aui-border .file-upload-box .uploader-list .item .progress-bar,
    .dialog-file-upload.aui-state-focus .aui-outer .aui-border .file-upload-box .download-list .item .progress-bar {
        background: var(--dark-s6);
        color: var(--dark-s3);
    }
    /*文档右键属性*/
    .dialog-file-panel.dialog-no-title.aui-state-focus .aui-main {
        background: var(--dark-s5)
    }
    .dialog-file-panel.dialog-no-title.aui-state-focus .file-panel {
        background: var(--dark-s5)
    }
    .dialog-file-panel.dialog-no-title.aui-state-focus .file-panel .panel-info-header {
        background-image: linear-gradient(190deg,var(--dark-s4),var(--dark-s7));
        border-bottom: 1px solid var(--dark-s4);
    }
    .dialog-file-panel.dialog-no-title.aui-state-focus .file-panel .panel-info-header .header-content .file-name {
        color: var(--dark-s1)
    }
    .dialog-file-panel .file-panel > .dialog-tab {
        border-color: var(--dark-s3)
    }
    .dialog-file-panel.dialog-no-title.aui-state-focus .file-panel > .dialog-tab .tab-item:hover, 
    .dialog-file-panel.dialog-no-title.aui-state-focus .file-panel > .dialog-tab .tab-item.active, 
    .dialog-file-panel.dialog-no-title.aui-state-focus .file-panel > .dialog-tab .tab-item.active:hover {
        background: var(--dark-s6);
        color: var(--blue-light)
    }
    .dialog-file-panel.dialog-no-title.aui-state-focus .file-panel > .dialog-tab .tab-item {
        color: var(--dark-s1)
    }
    .dialog-file-panel.dialog-no-title.aui-state-focus .file-panel .pathinfo .user-space-info {
        background: var(--dark-s6);
        border-color: var(--dark-s3)
    }
    .dialog-file-panel.dialog-no-title.aui-state-focus .file-panel .pathinfo .user-space-info .name {
        right: 10px
    }
    .dialog-file-panel.dialog-no-title.aui-state-focus .file-panel .pathinfo .user-space-info .bg-grey-3 {
        background: var(--dark-s3)
    }
    .dialog-file-panel.dialog-no-title.aui-state-focus .file-panel .pathinfo .user-space-info .space-info {
        padding-left: 10px;
        color: var(--dark-s1)
    }
    .dialog-file-panel.dialog-no-title.aui-state-focus .file-panel .pathinfo .download-url {
        background: var(--dark-s6);
        color: var(--dark-s2);
        border-color: var(--dark-s4)
    }
    .file-panel .pathinfo .input-group-btn .btn {
        background: var(--dark-s4);
        border-color: var(--dark-s2)
    }
    .dialog-file-panel.dialog-no-title.aui-state-focus .file-panel .pathinfo .p.info-item-path-group .content, 
    .dialog-file-panel.dialog-no-title.aui-state-focus .file-panel .pathinfo .p.info-item-path .content,
    .dialog-file-panel.dialog-no-title.aui-state-focus .file-panel .pathinfo .p.info-item-path-group .content .link, 
    .dialog-file-panel.dialog-no-title.aui-state-focus .file-panel .pathinfo .p.info-item-path .content .link {
        color: var(--blue-light)
    }
    .dialog-file-panel.dialog-no-title.aui-state-focus .file-panel .pathinfo .p.info-item-path-group .content .link:hover, 
    .dialog-file-panel.dialog-no-title.aui-state-focus .file-panel .pathinfo .p.info-item-path-group .content .link:active, 
    .dialog-file-panel.dialog-no-title.aui-state-focus .file-panel .pathinfo .p.info-item-path-group .content .link:focus, 
    .dialog-file-panel.dialog-no-title.aui-state-focus .file-panel .pathinfo .p.info-item-path .content .link:hover, 
    .dialog-file-panel.dialog-no-title.aui-state-focus .file-panel .pathinfo .p.info-item-path .content .link:active, 
    .dialog-file-panel.dialog-no-title.aui-state-focus .file-panel .pathinfo .p.info-item-path .content .link:focus {
        background: var(--dark-s6)
    }
    .dialog-file-panel.dialog-no-title.aui-state-focus .file-panel .pathinfo .p:hover {
        background: var(--dark-s6);
        color: var(--dark-q1)
    }
    .dialog-file-panel.dialog-no-title.aui-state-focus .file-panel .pathinfo .p:hover .title,
    .dialog-file-panel.dialog-no-title.aui-state-focus .file-panel .pathinfo .p > .content {
        color: var(--dark-s1)
    }
    .file-panel .panel-history .content-header .btn-group .kui-btn {
        background: var(--dark-s4);
        border-color: var(--dark-s3);
        color: var(--dark-s1)
    }
    body .file-panel .content-header {
        border-color: var(--dark-s3);
        box-shadow: none
    }
    body .file-panel .panel-history .content-list .file-item {
        background: var(--dark-s4);
        border-color: var(--dark-s3)
    }
    body .file-panel .panel-history .content-list .file-item:hover {
        background: var(--dark-s6);
        border-color: var(--dark-s2)
    }
    body .file-panel .panel-history .content-list .file-item .file-item-line {
        background: var(--dark-s3);
        border-color: var(--dark-s2);
    }
    body .file-panel .panel-history .content-list .file-item:hover .file-item-line {
        background: var(--dark-s7);
        border-color: var(--dark-s2);
    }
    body .file-panel .user-info,
    body .file-panel .panel-history .content-list .file-item .item.mtime {
        color: var(--dark-q1)
    }
    body .label-blue-light {
        background: var(--blue-light);
        color: var(--dark-q1)
    }
    body .file-panel .panel-history .content-list .file-item .item.detail .content.placeholder:hover {
        background: none
    }
    body .file-panel .panel-history .content-list .file-item .menu-trigger {
        background: var(--dark-s3)
    }
    body .file-panel .panel-history .content-list .file-item .menu-trigger:hover {
        background: var(--dark-s5)
    }
    body .file-panel .panel-log .content-list .list-item:before,
    body .file-panel .panel-log .content-list .list-item:after {
        background: var(--dark-s4)
    }
    body .file-panel .panel-log .content-list .list-item {
        background: var(--dark-s6);
        border-color: var(--dark-s3)
    }
    body .file-panel .panel-log .content-list .list-item:hover {
        background: var(--dark-s4);
        border-color: var(--dark-s2)
    }
    body .form-box.config-box .panel-form-body {
        background: var(--dark-s6);

}
    body .file-panel .panel-meta .dialog-form.target-form .form-box.config-box .panel-form-body > .form-row {
        background: var(--dark-s5);
        border-color: var(--dark-s4)
    }
    body .file-panel .panel-meta .dialog-form.target-form .form-box.config-box .panel-form-body > .form-row .setting-title.has-title {
        background: var(--dark-s6);
        border-color: var(--blue-border-s)
    }
    body .file-panel .panel-meta .dialog-form.target-form .form-box.config-box .panel-form-body > .form-row:hover .setting-title.has-title {
        background: var(--dark-s7);
        border-color: var(--blue-border-s)
    }
    .file-panel .panel-meta .dialog-form.target-form .form-box.config-box .panel-form-body > .form-row.form-fileSelect .setting-content .btn {
        background: var(--dark-s4);
        border-color: var(--dark-s3);
        text-shadow: none;
        color: var(--dark-q1)
    }
    /*外链分享 */
    .share-dialog-box.share-type-link.aui-state-focus .aui-dialog .aui-main {
        background: var(--dark-s6)
    }
    body .dialog-form.share-dialog-box .form-row.item-shareHeader .share-info {
        border-color: var(--dark-s4)
    }
    body .dialog-form.share-dialog-box .form-row.item-shareHeader .bg-banner-light:before {
        background-image: -webkit-linear-gradient(bottom,var(--dark-s2),var(--dark-s5));
        background-image: -moz-linear-gradient(bottom,var(--dark-s2),var(--dark-s5));
        background-image: -o-linear-gradient(bottom,var(--dark-s2),var(--dark-s5));
        background-image: -ms-linear-gradient(bottom,var(--dark-s2),var(--dark-s5));
        background-image: linear-gradient(bottom,var(--dark-s2),var(--dark-s5));
        -pie-background: linear-gradient(to bottom,var(--dark-s2),var(--dark-s5));
    }
    body .dialog-form.share-dialog-box.share-type-link .form-row.item-shareLink .setting-content input,
    .form-box .form-row .setting-content input.span-title-right {
        background: var(--dark-s6);
        color: var(--dark-s2)!important;
        border-color: var(--dark-s3)!important
    }
    body .dialog-form.share-dialog-box .form-row.item-shareLink .setting-content .btn,
    .dialog-form.share-dialog-box .form-row.item-password .input-title-right {
        background: var(--dark-s4);
        border-color: var(--dark-s2);
        color: var(--dark-s1)
    }

```

最后修改：2021 年 03 月 05 日