SuperAPI AI 工具集

fineui-theming

前端与建站

查看项目

更新于 10-16 06:52

技能介绍

用途:为 FineUI 站点设置或切换已有内置主题与自定义主题,处理全局默认、PageManager 覆盖与 Cookie 偏好,覆盖 F.js、Pro、Core 三种模式及 Java。v15 起主题系统改为 CSS Variables,运行时只需加载 themes/{主题}/theme.css 覆盖颜色变量,无需 sass。

主要能力:内置 Theme 枚举含 Pure 系列(Pure_Black 默认、Pure_Green、Pure_Blue、Pure_Purple、Pure_Orange)、jQuery UI 系列(Cupertino、Start、Dark_Hive、Flick、South_Street),另有 chinese_red 等,Dark_Hive 为深色主题。

使用方式(全局默认):F.js 在 F.init({ theme: 'pure_black' }) 用小写;Pro(WebForms)在 Web.config 的 <FineUI.Pro Theme="Pure_Black" EnableAnimation="true" />;Core(MVC/RazorForms/RazorPages)在 appsettings.json 的 "FineUI": { "Theme": "Pure_Black", "EnableAnimation": true };Java(Spring Boot)在 application.properties 写 fineui.theme=pure_black 与 fineui.enable-animation=true,键名 kebab-case、主题名小写;页面级或按用户切换实现 FineUIPageManagerInitializer bean(pm.theme(...))。

限制与规则:C# 配置/枚举用帕斯卡加下划线(如 Pure_Black),F.js 与 Java 用小写;没有公开的 F.setTheme 方法,常见做法是写 Theme Cookie、刷新页面、服务端读 Cookie 设 PageManager,Java 示例的 Cookie 处理只调用 pm.theme(...),用自定义主题需扩展初始化器;自定义主题不要手改 theme.css,修改 theme.config 后在 res/themes 目录执行 node generate-theme.mjs 主题名 生成,Java 用 pm.customTheme(...) 引用,不能用 fineui.theme 或 pm.theme(...) 代替;is-dark-background = true 只控制生成时派生样式,不等同客户端 F.isDarkTheme。创建新配色使用 fineui-custom-theme,页面骨架参考 fineui-foundation。更多细节见 references/set-theme.md 与 references/custom-theme.md。