HTML后台

darki — HTML 后台模板

作者 zizlfz

Darki 是一个深色主题的桌面端 HTML 仪表盘模板，README 说明它最初为 Phoenix 全栈项目后台管理界面而构建，包含元素、表单、页面模式和 CSS 辅助类，不包含图表与图标集合。

打开源站下载源码 ZIP

看看你的网站会是什么样

浏览真实页面截图，比较内容排版与手机效果。点击下方缩略图切换，放大查看整页细节。

3 个预览视图

桌面端首页1 / 3

访问演示网站在新标签页打开

桌面端截图首屏预览

由服务器浏览器实际访问页面后截取。

全部页面与视图 3

截图用于了解视觉与布局，交互效果请以实际项目为准。

采集于 2026-10-14查看来源

值得关注的模板亮点

从已有项目资料中，快速了解它的特点。

深色主题的桌面端 HTML 仪表盘模板，README 标注为非响应式

最初为 Phoenix 全栈项目的后台管理仪表盘构建

提供元素、表单、页面模式和 CSS 辅助类四类内容

明确不包含图表和图标集合，README 推荐 ApexCharts 与 Heroicons

通过复制 darki.css 和 main.js 并在页面中引入即可使用

模板详细介绍

Darki 是一个深色主题的 HTML 仪表盘 UI 模板，README 明确标注为面向桌面端、非响应式。它最初是作为 Phoenix 全栈项目后台管理仪表盘而构建的模板，作者将其公开供他人使用。

模板内容分为四类：元素（提示框、文章/内容、卡片、下拉菜单、徽章、列表、按钮、模态框、面包屑、表格）、表单（输入框、选择框、复选框、单选框、输入组、selectbox、selectrow、日期选择器、日期范围选择器）、模式/页面（认证页面如登录、注册、忘记密码，以及卡片列表、表格列表、用户资料、单表单、键值表单）和 CSS 辅助类（颜色、间距、排版、可见性、布局等）。README 明确说明不包含图表和图标集合，并推荐使用 ApexCharts 和 Heroicons 作为替代库。

使用方式是把 dist-assets 目录下的 darki.css 和 main.js 复制到项目资源目录，在 head 中引入 CSS、在 body 末尾引入 JS。开发命令包括 npm install、npm run dev（本地开发服务器运行在 localhost:4321）和 npm run build（构建产物输出到 ./dist/）。README 的 TODO 中列出尚未完成的布局 CSS 辅助类文档（grid、container、level）。README 未提供浏览器兼容性、无障碍支持或生产环境适用性的说明。

HTML后台

适合你的项目吗？

适用场景

为 Phoenix 全栈项目搭建后台管理仪表盘界面
构建桌面端深色主题的管理后台页面原型
复用模板中的表单控件、表格、卡片、模态框等界面元素
参考登录、注册、忘记密码等认证页面布局

适合人群

需要桌面端深色后台界面的 Phoenix 项目开发者
希望直接使用现成 HTML/CSS 组件搭建管理后台的开发者
接受非响应式布局、面向桌面端使用的项目

上手与定制指南

结合仓库当前版本的说明，按下面的资料检查内容、配置与运行要求。

1
将 dist-assets/darki.css 和 dist-assets/main.js 复制到项目资源目录
2
在 head 中通过 link 标签引入 darki.css
3
在 body 结束前通过 script 标签引入 main.js
4
开发时运行 npm install 安装依赖，npm run dev 启动本地服务器（localhost:4321），npm run build 构建到 ./dist/
5
README 的 TODO 指出布局 CSS 辅助类（grid、container、level）文档尚未完成

查看仓库使用说明

授权与来源资料

使用条件与限制

免费使用 · 保留许可声明

本次收录的是公开仓库中采用 MIT 许可的免费版本；免费范围为该版本代码，不代表外部服务或第三方素材免费。

使用时需要遵守

允许免费使用、修改、商用和分发该版本代码。
分发代码副本或实质性部分时，保留原作者版权声明和完整 MIT 许可声明。
代码按现状提供；担保与责任限制以原许可证及适用法律为准。

额外费用与待核对事项

演示图片、字体、图标及其他第三方素材需按各自许可核对，不能仅凭代码的 MIT 许可判断。
域名、托管、数据库、支付或 AI 等外部服务可能另外收费。

查看原文依据

Permission is hereby granted, free of charge
许可证原文

https://github.com/zizlfz/darki/blob/main/LICENSE https://github.com/zizlfz/darki/blob/main/README.md

DeepSeek 根据仓库许可证和 README 整理 ·2026-10-14。结果仅覆盖已读取资料，依赖、图片、字体及后续条款变更以各自原文为准。

项目核对记录与介绍依据

模板资料

来源平台: GitHub
资料与维护参考分: 资料一般 · 65 / 100
技术栈: HTML
网站类型: 后台

这个分数如何计算

本站按许可资料（最高30分）、演示链接（12分）、预览图（10分）、Star数（15分）、记录的维护时间（15分）、描述完整度（8分）、功能记录（5分）和分类资料（5分）计算。它不是代码、安全或性能测试，也不是 Google 评分；有链接不代表已实测可用。

这个项目需要核对什么

记录的仓库更新时间: 2024-08-05
截图检查日期: 2026-10-14

已收录演示链接。请用你的内容与屏幕尺寸检查；有演示不代表表单、认证或支付已经可用。

目录记录的主要技术栈是 HTML。请通过依赖清单和锁文件核对实际版本与托管要求。这些说明基于收录资料，不代表代码审计或部署实测。

查看具体选型方法 →

介绍的制作与核对状态

介绍由 AI 辅助整理目录与仓库资料。仓库作者不等于这篇介绍的审核者。

审核声明: codex-user-requested-batch-review-20261017 · 2026-10-16

查看当时使用的来源资料

SHA-256: 17c552fb1402876be79a843b0fbf47b11ea2d189c2f50802891d7c1e68aebd91

2026-10-14T03:30:20.406Z

来源文件 / 仓库

# Darki HTML Dashboard UI Kit

A dark-themed html dashboard template for desktop (not-responsive).

## Use Darki 

To use darki, copy `dist-assets/darki.css` and `dist-assets/main.js` to your project assets directory, then:
- Include css in head element.
```html
<head>
  ...
  <link rel="stylesheet" href="/darki.css">
</head>
```

- Include js at the end of body element.
```html
  ...
  <script src="/main.js">
</body>
```

## Preview
<a href="https://darki.pages.dev" target="_blank"><img src="https://raw.githubusercontent.com/enjinil/darki/main/public/preview.png" alt="Darki preview"></a>

## Features
Darki is initially build as template for Phoenix full-stack project admin dashboard that is easy on the eye (dark theme). Sharing the template publicly for everyone to use. The template includes the following features:
- **Elements**: alerts, article/content, cards, dropdowns, badges, lists, buttons, modals, breadcrumbs, tables.
- **Forms**: input, select, checkbox, radio, input group, selectbox, selectrow, datepicker, daterangepicker.
- **Patterns/Pages**: auth (login, register, forgot password), card list, table list, user profile, single form, key-value form.
- **CSS Helpers**: color, spacing, typography, visibility, layout, etc.

The features that will not be included:
- Charts
- Icons colletion

## Recommended libraries
- Chart - https://apexcharts.com/
- Icons - https://heroicons.com/

## TODO
- [ ] Document layout css helpers - grid, container, level

## 🧞 Development

| Command                   | Action                                           |
| :------------------------ | :----------------------------------------------- |
| `npm install`             | Installs dependencies                            |
| `npm run dev`             | Starts local dev server at `localhost:4321`      |
| `npm run build`           | Build your production site to `./dist/`          |

反馈内容错误