File Browser 文件浏览器 Dark Theme 暗黑模式主题样式分享

子兮子兮 No can, but will. 本文由博客端 https://zixizixi.cn 主动推送

1. File Browser 简介

filebrowser 提供了指定目录下的文件管理界面,部署运行后相当于个人网盘。可以用来上传、删除、预览、重命名、编辑和分享文件。它允许创建多个用户,每个用户可以有自己的目录。它可以作为独立的应用程序使用,也可以作为中间件使用。

站点 链接地址
GitHub 地址 https://github.com/filebrowser/filebrowser 已存档,原开发者停止维护
官网文档 https://filebrowser.xyz/

2. 个性化配置

登录后找到 设置 / 全局设置 / 品牌

image.png

3. 自定义样式

将以下 CSS 代码保存到 custom.css 文件中并放在 品牌信息文件夹路径 的所在目录。

/** 页面字体 */
* {
  font-family: Consolas, 'Microsoft Yahei UI', 'Microsoft Yahei', 'Helvetica Neue', 'Hiragino Sans GB', Helvetica, Tahoma, FangSong, STFangsong, sans-serif; 
}

/** 加载动画 */
.spinner > div {
  background-color: #F2F2F2;
  background-color: orangered\0; /* IE 样式 */
}

/** 普通文字、字体图标颜色 */
.action, #listing h2, #search .boxes h3, .card h3, .collapsible > label *, .dashboard p label, .message {
  color: #F2F2F2;
}

/** 链接文字颜色 */
a {
  color: powderblue;
}

/** 输入框、表格标题文字颜色 */
#search.active i, #search.active input, table th {
  color: #FFFFFF;
}

/** 主体、弹窗颜色 */
#loading, #login, #search.active #input, body, header, .card, #search .boxes, .ace-chrome .ace_gutter-active-line {
  background-color: #3B3B3B;
  color: #F2F2F2;
}

/** 搜索页面、列表标题样式 */
#search #input, #search #result, .input, #listing.list .item.header, .ace-chrome .ace_gutter, .share__box__download { 
  background-color: #303030;
  color: #EEEEEE;
}

/** 列表项目、文本编辑、命令行、文件分享样式 */
#listing .item, .ace-chrome, .shell, .share__box {
  background-color: #333333;
  color: #F0F0F0;
}

/** 加载页面、登录页面信息提示 */
#loading::after, #login::after {
    position: absolute;
    bottom: 5px;
    width: 100%;
    display: block;
    font-size: 12px;
    text-align: center;
    content: '请使用 Chromium 内核浏览器或 Firefox 进行访问!';
    color: deepskyblue;
    /* IE 样式 */
    bottom: 30px\0;
    font-size: 36px\0;
    color: tomato\0;
}

/** IE 浏览器警告背景颜色 */
#loading, #login {
    background:pink\0;
}

4. 暗黑模式主题效果

4.1. 加载页面

4.1.1. IE 警告

image.png

由于代码中使用了 JavaScript 字符串模板,IE 无法解析,页面会停留在加载页面,故不支持 IE 浏览器。

4.1.2. 正常加载

image.png

4.2. 登录页面

image.png

4.3. 文件首页

image.png

4.4. 文件加载

image.png

4.5. 文件下载

image.png

4.6. 文件列表

4.6.1. 图标模式

image.png

4.6.2. 列表模式

image.png

5. 搜索页面

5.1. 搜索首页

image.png

5.2. 搜索结果

image.png

6. 图片浏览

image.png

7. 设置页面

image.png

8. 新建文件

image.png

9. 文本编辑

image.png

10. 分享页面

image.png

  • 分享

    有什么新发现就分享给大家吧!

    223 引用 • 1734 回帖 • 141 关注
  • 前端

    前端技术一般分为前端设计和前端开发,前端设计可以理解为网站的视觉设计,前端开发则是网站的前台代码实现,包括 HTML、CSS 以及 JavaScript 等。

    212 引用 • 1320 回帖 • 1 关注
  • 工具

    子曰:“工欲善其事,必先利其器。”

    178 引用 • 520 回帖
  • 开源

    Open Source, Open Mind, Open Sight, Open Future!

    317 引用 • 3168 回帖 • 710 关注

赞助商 我要投放

欢迎来到这里!

我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。

注册 关于
请输入回帖内容 ...
  • iTanken

    哈哈哈,谢谢

  • 其他回帖
  • iTanken

    6 7 月份诈尸性更新 wulian
    image.png

  • hjljy

    界面不错

    1 回复