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

本贴最后更新于 1689 天前,其中的信息可能已经斗转星移

1. File Browser 简介

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

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

2. 个性化配置

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

image.png

  • 选中 禁止外部链接 可以禁用左侧 File Browser 2.0.16 的超链接;
  • 填写 Instance name 实例名可以自定义登录页面显示的标题;
  • 设置 品牌信息文件夹路径 可以自定义页面样式和 Logo:

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

  • 分享

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

    248 引用 • 1792 回帖
  • 前端

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

    247 引用 • 1347 回帖
  • 工具

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

    286 引用 • 729 回帖
  • 开源

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

    408 引用 • 3573 回帖

相关帖子

欢迎来到这里!

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

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