luci-theme-argon Documentation

Technical Documentation: jerrykuku/luci-theme-argon

ℹ️ Provenance: Multi-Tier Ingestion · CodeWiki Reference

Overview (`README.md`) Copy Section

What's new in 3.0 Copy Chapter

• Built-in Argon Config. Manage the theme without a separate plugin.
• Broad third-party app support. Refined layouts, forms and tables for most third-party LuCI apps, with desktop/mobile and light/dark adaptations.
• Two login layouts. Choose the classic sidebar or centered card.
• Light and dark. Switch from the header or follow your system, with customizable accent colors.
• Your own look. Adjust login glass effects, set image or video backgrounds, and upload a browser icon and login logo.
• Desktop and mobile. Responsive layouts across screen sizes.

Install Copy Chapter

In 3.0, the theme and configuration features are one package: luci-theme-argon. Fresh installations need only this package. Download the format matching your firmware's native package manager from Releases. If the old standalone configuration plugin is installed, follow the migration steps below first.

Run opkg update or apk update first. APK v2 cannot read these APK packages; keep your firmware's native package manager.

For translations, install the matching luci-i18n-argon-config-<language> package from the same release and in the same format.

Select Argon under System → System → Language and Style → Design.

Already have the old luci-app-argon-config? Migrate to 3.0

This applies only when the old standalone configuration plugin is installed. Otherwise, skip this section.

The settings page, colors, backgrounds and branding are all included in the theme. The release's luci-app-argon-config is an empty migration package using the old package name. It preserves existing settings and hands its files over to the theme.

1. Download both luci-app-argon-config and luci-theme-argon from the same 3.0 release in the theme repository, in the same format.
2. Put both files in one directory on the router and open a terminal there. Do not uninstall the old plugin first. Choose the command pair for your firmware; run the second command only after the first succeeds.

# opkg
opkg install ./luci-app-argon-config_*.ipk
opkg install ./luci-theme-argon_*.ipk

# APK v3
apk add --allow-untrusted ./luci-app-argon-config-*.apk
apk add --allow-untrusted ./luci-theme-argon-*.apk

The first command replaces the old plugin with the empty migration package. The second installs the integrated theme and restores your settings. Continue configuring it under System → Argon Config.

Customize Copy Chapter

Open System → Argon Config for login layouts, colors, glass effects, wallpapers and branding. The header's appearance button switches between Light mode, Dark mode and Follow system; the choice also applies to the login page.

Local image and video backgrounds are supported, along with Bing, Unsplash and Wallhaven wallpapers. Unsplash requires an API access key. Browser icons and login logos accept PNG files, 16–1024 pixels per side, up to 1 MiB; browser icons must be square.

Under Theme updates, check the latest stable release, read its release notes and download the package matching your firmware's package manager. Checks use the router's connection to GitHub and cache successful results for five minutes.

When a newer version is available, choose Update now and confirm to install the theme using the firmware’s native APK or OPKG package manager, preserving your Argon configuration. The page shows download, verification and installation status plus installation logs, and resumes monitoring after a page refresh. Reload the page after installation. Automatic installation requires a matching release package and SHA256 digest and does not perform downgrades. It updates the main theme package; separate translation packages remain managed by the system package manager.

Screenshots Copy Chapter

Light and dark views of the overview and both login layouts, on desktop and mobile.

Contributors Copy Chapter

Made with contrib.rocks.

Development Copy Chapter

See the development guide for source builds, LESS, templates, icons and checks.

Releases · Version history · Contributors · Report an issue

Licensed under Apache-2.0. Thanks to luci-theme-material.

Overview (`htdocs/luci-static/argon/background/README.md`) Copy Section

Drop background here!
accept jpg jpeg png gif webp mp4 webm

Overview (`htdocs/luci-static/argon/icon/README.md`) Copy Section

Argon SVG icons / SVG 图标

copy.svg 和 download.svg 是文件管理操作使用的补充图标，采用24×24画布、2px描边，并通过CSS mask跟随控件颜色；不属于原字体导出清单。

原 argon.woff2 中全部 28 个可见图标已按原始矢量轮廓导出，字体文件已从主题移除。文件名使用实际服务或功能名称，例如 status.svg、services.svg、docker.svg；Unicode 编码仅保留在对照表中。SVG 使用透明背景和 viewBox，可用于 CSS mask 或内联 SVG。

All 28 visible icons from the former argon.woff2 font are exported with their original vector outlines; the font files have been removed from the theme. Filenames use service or function names, such as status.svg, services.svg, and docker.svg; Unicode code points are kept in the mapping. SVGs have transparent backgrounds and view boxes, suitable for CSS masks or inline SVG.

chevron-down.svg 和 chevron-right.svg 在导出后统一重绘为 24×24、2px 描边、圆端点和圆连接。两者互为旋转，保留原字体编码作为功能对照。CSS mask 跟随控件颜色；作为原生 select 或排序按钮的背景图时，使用 SVG 的中性默认颜色。其余 26 个图标保留字体轮廓。对照表中的 sourceViewBox 与 designOverride 标记这两处设计替换。

The two chevrons are redesigned on a shared 24×24 grid with a 2px stroke, round caps and joins, preserving their original code point mappings. CSS masks inherit the control color; native select and sorting backgrounds use the SVG's neutral default color. The other 26 icons keep their font outlines. Mapping entries record sourceViewBox and designOverride for these exceptions.

字体共有 33 个字形；.notdef、uni0000、nonmarkingreturn、uni0001、space 没有可见轮廓，无需生成空 SVG。font-icons.json 记录完整的编码、字形名、文件名、画布尺寸和源字体 SHA-256。画布保留字体坐标与留白，并扩展至包含越界轮廓，避免裁切。

The font contains 33 glyphs. The five invisible glyphs listed above have no SVG output. font-icons.json records code points, glyph names, filenames, canvas sizes, and the source font SHA-256. View boxes preserve font spacing and expand where an outline exceeds the original em square.

一级菜单按节点名称直接匹配 SVG，例如状态 → status.svg、系统 → system.svg、服务 → services.svg、网络 → network.svg、Docker → docker.svg。缺失时使用 default.svg（原字体的软件包图标）。登录输入框使用 user.svg、password.svg，移动菜单按钮使用 menu.svg。主题不再依赖图标字体；对照表中的源文件名与 SHA-256 仅作为导出来源记录，sourceIncluded: false 表示源字体不随主题分发。

Top-level menus match their node names directly, for example status.svg, system.svg, services.svg, network.svg, and docker.svg. Missing icons use default.svg, the original package glyph. Login fields use user.svg and password.svg; the mobile menu toggle uses menu.svg. The theme no longer depends on an icon font. The source filename and SHA-256 remain as export provenance; sourceIncluded: false records that the original font is not distributed.

DEVELOPMENT (`docs/DEVELOPMENT.md`) Copy Section

Developing Argon 3.0

简体中文 · README

Build with OpenWrt Copy Chapter

From an OpenWrt build tree:

cd package
git clone https://github.com/jerrykuku/luci-theme-argon.git
cd ..
make menuconfig
# LuCI → Themes → luci-theme-argon
make package/luci-theme-argon/compile V=s

Theme settings are included. Select the nested compat/luci-app-argon-config package under LuCI applications only when building the migration package. Existing translation names remain luci-i18n-argon-config-*.

Release CI builds IPK with the OpenWrt 23.05.5 SDK and APK v3 with the 25.12.5 SDK. Ucode templates ship as source to avoid tying packages to one runtime's bytecode format.

Translations use PKG_PO_VERSION to follow the theme release, including -r<revision> for APK. IPK translations retain a v prefix (for example, v3.0.1) so ordinary installation upgrades the broken v3.0.0 unknown version. Keep that prefix in future IPK releases. CI reads each translation's internal package metadata and blocks artifact upload and publication if the version is wrong.

Source map Copy Chapter

Styles Copy Chapter

Edit LESS sources, then regenerate the committed stylesheet with LESS 4.1.3:

npm install [email protected]
lessc less/cascade.less htdocs/luci-static/argon/css/cascade.css

Light and dark modes share this one stylesheet. Each @theme-palette row in theme.less defines role: light, dark;; one value means both modes share it. Use semantic tokens for text, surfaces, borders and states. Legacy variable aliases exist for LuCI compatibility.

Imports run from tokens and base controls through login/application layout, shared components, page adaptations, and responsive rules. Add common behavior to its component module; keep plugin selectors in pages/. The page-fix.less file is an import index.

Maintain page/card insets and section, field, control and action gaps through spacing tokens. Small screens reduce outer and card insets to 1rem. Keep long labels wrapping and let form controls shrink to their containers. Escape native CSS min() expressions when LESS would evaluate them prematurely.

Corner tokens cover labels, controls, panels, cards and dialogs. Keep the inside edges of joined controls square. Avoid clipping entire cards: dropdowns and tooltips can extend beyond them. Tables handle their own final-row corners and narrow-screen layout.

Preserve native LuCI structures and interactions. Tab bars join their following content containers; section content owns its vertical spacing. Modal actions wrap or stack as space requires, and long content scrolls through the overlay. Dropdown positioning and scrolling remain controlled by LuCI. Restrict hover effects to hover-capable devices and respect reduced motion.

Templates Copy Chapter

LuCI's header, header_login, out_header_login, sysauth and footer entry points remain available.

Pass local values through the second argument of include. Login pages do not load application LuCI modules. Only classic and centered are accepted as login_style; unknown values fall back to classic.

Configuration and branding Copy Chapter

Settings stay in /etc/config/argon; the settings route remains /admin/system/argon-config. Fresh installs use local backgrounds, classic login, 10px blur and 0.5 panel opacity. Existing options survive upgrades.

New installations derive dark colors from the primary seed. Existing explicit dark colors stay custom. Dark login glass settings can inherit the light values or keep independent overrides. Switching back to automatic/inherited settings retains custom values for later use.

The header appearance menu saves only its mode through luci.argon_appearance. The preference is device-wide and requires Argon write access. Keep this independent from pending form settings; failed saves reconcile with the stored mode.

Uploaded branding lives in /www/luci-static/argon/branding/; backgrounds live in /www/luci-static/argon/background/. Upload/reset operations apply immediately. Branding does not replace packaged images, and both directories are included in configuration-preserving upgrade backups. The browser icon also supplies the touch icon and manifest; existing home-screen shortcuts may need to be added again.

Menu icons Copy Chapter

Top-level menu nodes resolve htdocs/luci-static/argon/icon/<node-name>.svg, independently of translated titles. Filenames are case-sensitive and accept letters, digits, underscores and hyphens. Missing icons use default.svg.

Use monochrome SVGs with a viewBox and transparent background. CSS masks supply theme and interaction colors. Shared chevrons use the same 24×24 grid and 2px round strokes. See the icon index for available assets. This mechanism is separate from uploaded browser icons and login logos.

Checks Copy Chapter

Use Node.js 22+, Python 3, LESS 4.1.3 and a Ucode build matching the supported OpenWrt runtime:

UCODE_BIN=/path/to/ucode sh .github/scripts/check_theme.sh

The script checks JavaScript, shell and Ucode syntax, verifies compiled CSS against LESS, and runs the Node/Python tests. CI's Ucode build is defined in check.yml.

For UI changes, check the actual affected LuCI pages in light/dark modes and desktop/mobile widths, including keyboard focus, long text and reduced motion where relevant. Network and hardware behavior still needs a suitable OpenWrt environment.

DEVELOPMENT ZH (`docs/DEVELOPMENT_ZH.md`) Copy Section

Argon 3.0 开发说明

English · 返回 README

源码构建 Copy Chapter

在 OpenWrt 构建目录中执行：

cd package
git clone https://github.com/jerrykuku/luci-theme-argon.git
cd ..
make menuconfig
# LuCI → Themes → luci-theme-argon
make package/luci-theme-argon/compile V=s

主题设置已内置。仅在需要构建旧插件迁移包时，在 LuCI 应用中额外选择嵌套的 compat/luci-app-argon-config 包。语言包继续使用 luci-i18n-argon-config-* 名称。

发行 CI 使用 OpenWrt 23.05.5 SDK 构建 IPK、25.12.5 SDK 构建 APK v3。Ucode 模板保留源码，避免绑定某个运行时的字节码格式。

语言包通过 PKG_PO_VERSION 跟随主题发行版本，APK 包含 -r<修订号>。IPK 语言包固定使用 v 前缀（如 v3.0.1），使已安装的 v3.0.0 unknown 语言包可以直接正常升级；后续版本须保留该前缀。发布前会逐个读取语言包内部元数据，版本不符时阻止上传和发布。

目录 Copy Chapter

样式 Copy Chapter

修改 LESS 源码后，使用 LESS 4.1.3 重新生成并一同提交 CSS：

npm install [email protected]
lessc less/cascade.less htdocs/luci-static/argon/css/cascade.css

亮暗色共用一份样式。theme.less 中 @theme-palette 每行以 角色: 亮色, 暗色; 定义颜色；单值表示两种模式共用。文字、背景、边框和状态使用各自语义 token；旧变量别名仅用于 LuCI 兼容。

导入顺序为 token、基础控件、登录与后台布局、共享组件、页面适配、响应式规则。通用行为放入对应组件模块，插件选择器放在 pages/；page-fix.less 只维护导入索引。

页面及卡片内缩、section、字段、控件与操作间距使用统一 token；小屏外边距及卡片内缩为 1rem。长文案允许换行，控件可收缩到容器宽度。LESS 会提前求值的原生 CSS min() 表达式需转义。

圆角 token 覆盖标签、控件、面板、卡片和弹窗；组合控件的内部接缝保持直角。不要裁切整个卡片，避免截断下拉菜单与提示框；表格自行处理末行圆角和窄屏布局。

保留 LuCI 原生结构和交互：标签栏与相邻内容容器衔接，section 内容负责纵向间距；弹窗操作随空间换行或堆叠，长正文通过覆盖层滚动。下拉位置和滚动继续由 LuCI 控制。悬浮效果仅用于支持 hover 的设备，并尊重减少动画偏好。

模板 Copy Chapter

保留 LuCI 的 header、header_login、out_header_login、sysauth 和页脚入口。

通过 include 的第二个参数传递局部数据。登录页不加载后台 LuCI 模块。login_style 仅接受 classic、centered，其他值回退为 classic。

配置与品牌资源 Copy Chapter

配置保存在 /etc/config/argon，设置地址仍为 /admin/system/argon-config。首次安装采用本地背景、经典登录、10px 模糊和 0.5 透明度；升级保留已有选项。

新安装根据主色自动生成暗色配色，已有独立暗色主色保留为自定义。暗色登录面板可跟随亮色或单独配置；切回自动 / 跟随时仍保留自定义值。

顶部外观菜单通过 luci.argon_appearance 单独保存模式，对整个设备生效，需要 Argon 写权限。保持与未保存表单设置独立；保存失败时核对服务端已保存值。

自定义图标位于 /www/luci-static/argon/branding/，背景位于 /www/luci-static/argon/background/。上传 / 恢复立即生效，不覆盖内置文件；两个目录均纳入保留配置升级的备份。网站图标也用于 touch icon 和 manifest，已有手机桌面快捷方式可能需要重新添加。

菜单图标 Copy Chapter

一级菜单按节点名查找 htdocs/luci-static/argon/icon/<节点名>.svg，与翻译后的标题无关。文件名区分大小写，支持字母、数字、下划线和连字符；缺失时使用 default.svg。

使用透明背景、带 viewBox 的单色 SVG，CSS mask 负责主题与交互颜色。共享箭头使用 24×24 网格、2px 圆角描边。资源见 SVG 图标索引，与用户上传的网站图标 / 登录 Logo 独立。

检查 Copy Chapter

准备 Node.js 22+、Python 3、LESS 4.1.3，以及与目标 OpenWrt 运行时匹配的 Ucode：

UCODE_BIN=/path/to/ucode sh .github/scripts/check_theme.sh

脚本检查 JavaScript、Shell、Ucode 语法，核对 LESS 与 CSS 产物，并运行 Node / Python 测试。CI 的 Ucode 构建步骤见 check.yml。

UI 改动应检查实际受影响页面的亮暗色、桌面与窄屏，以及相关的键盘焦点、长文本和减少动画场景。网络和硬件行为仍需相应 OpenWrt 环境验证。

--- METRICS ---

• Files Extracted: 5
• Estimated Token Budget: ~5733 tokens
• Canonical Reference: https://codewiki.google/github.com/jerrykuku/luci-theme-argon