القائمة
Bộ theme chuyên nghiệp cho UI và tài liệu. 12 themes bao gồm OpenClaw Dark/Light.
يُحدَّد Prompt الذي يراجع المصدر أولًا بشكل افتراضي. يمكنك التبديل إلى أمر مباشر أو تنزيل نسخة محلية.
اقرأ SKILL.md وأي ملفات مرافقة يعرضها SkillsMP قبل أن تقرر التثبيت.
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
يتجاوز الأمر المباشر Prompt المخصّص للمراجعة. افحص المصدر قبل تشغيله.
npx skills add https://github.com/nclamvn/bom-control-ui --skill theme-factoryيبقى الأمر في سطر واحد. مرّر أفقيًا لمراجعته كاملًا قبل النسخ.
تفضّل نسخة محلية؟ نزّل الملفات المتاحة حاليًا لدى SkillsMP.
عرض SKILL.md
استنادا إلى تصنيف SOC المهني
| name | theme-factory |
| description | Bộ theme chuyên nghiệp cho UI và tài liệu. 12 themes bao gồm OpenClaw Dark/Light. |
| metadata | {"openclaw":{"emoji":"🎭","skillKey":"theme-factory","userInvocable":true}} |
| invocation | {"userInvocable":true,"disableModelInvocation":false} |
Áp dụng theme chuyên nghiệp cho UI components, slides, PDFs, và web apps.
| Command | Mô tả |
|---|---|
/theme-factory | Liệt kê themes có sẵn |
/theme-factory [name] | Áp dụng theme cụ thể |
/theme-factory preview | Xem preview tất cả themes |
Tema mặc định của Control UI. Dark background, red accent, teal secondary.
--bg: #121212;
--bg-elevated: #1e1e1e;
--card: #1a1a1a;
--text: #e4e4e7;
--text-strong: #fafafa;
--border: #27272a;
--accent: #ff5c5c;
--accent-2: #14b8a6;
--ok: #22c55e;
--warn: #f59e0b;
--danger: #ef4444;
--info: #3b82f6;
Fonts: Space Grotesk (body), JetBrains Mono (code) Personality: Technical, focused, compact. Red accent = urgency/action.
Light variant of the Control UI theme.
--bg: #fafafa;
--bg-elevated: #ffffff;
--card: #ffffff;
--text: #3f3f46;
--text-strong: #18181b;
--border: #e4e4e7;
--accent: #dc2626;
--accent-2: #0d9488;
Personality: Clean, professional, high-contrast for daylight use.
Deep blues with aqua highlights. Professional and calm.
Background: #0a1628 → #0f2847
Text: #e2e8f0
Accent: #22d3ee (cyan)
Secondary: #3b82f6 (blue)
Best for: Corporate dashboards, data visualization, SaaS.
Warm oranges and purples. Creative and energetic.
Background: #1a0a2e → #2d1b4e
Text: #fef3c7
Accent: #f97316 (orange)
Secondary: #a855f7 (purple)
Best for: Creative portfolios, entertainment, marketing.
Rich greens with earth tones. Natural and trustworthy.
Background: #0a1a0f → #132a1a
Text: #d4e7d0
Accent: #22c55e (green)
Secondary: #a3e635 (lime)
Best for: Sustainability, health, education, finance.
Cool whites with neon accents. Futuristic and clean.
Background: #f8fafc → #f1f5f9
Text: #1e293b
Accent: #8b5cf6 (violet)
Secondary: #06b6d4 (cyan)
Best for: Tech products, AI/ML, modern SaaS landing pages.
Dark surfaces with warm gold accents. Premium and luxurious.
Background: #0c0a09 → #1c1917
Text: #e7e5e4
Accent: #eab308 (gold)
Secondary: #d97706 (amber)
Best for: Luxury brands, financial services, premium dashboards.
Soft pinks with warm neutrals. Gentle and approachable.
Background: #fff1f2 → #ffe4e6
Text: #4c0519
Accent: #f43f5e (rose)
Secondary: #ec4899 (pink)
Best for: Consumer apps, wellness, social platforms.
Dark grays with fiery orange. Bold and industrial.
Background: #18181b → #27272a
Text: #d4d4d8
Accent: #ef4444 (red)
Secondary: #f97316 (orange)
Best for: Developer tools, gaming, bold brand statements.
Pure black with bright neon. High-contrast and striking.
Background: #000000 → #0a0a0a
Text: #00ff88
Accent: #00ff88 (neon green)
Secondary: #ff0080 (neon pink)
Best for: Terminal/hacker aesthetics, gaming, cyber-themed.
Warm beige with terracotta accents. Organic and readable.
Background: #faf7f2 → #f5f0e8
Text: #44403c
Accent: #c2410c (terracotta)
Secondary: #b45309 (amber)
Best for: Documentation, blogs, editorial, long-form content.
Nearly-black with cool purple glow. Immersive and focused.
Background: #030014 → #0a0520
Text: #c4b5fd
Accent: #7c3aed (violet)
Secondary: #6366f1 (indigo)
Best for: Creative tools, music apps, immersive experiences.
Map theme values to the existing CSS variable system:
:root {
--bg: [theme.background];
--text: [theme.text];
--accent: [theme.accent];
/* ... map all variables */
}
Only override variables — never hardcode colors in component CSS.
Create a theme object and apply via CSS custom properties or a theme provider:
const theme = {
colors: {
background: "#0a1628",
text: "#e2e8f0",
accent: "#22d3ee",
secondary: "#3b82f6",
},
fonts: {
body: "Inter, sans-serif",
code: "JetBrains Mono, monospace",
},
};
Apply theme colors to:
Use theme as the base palette, extending with lighter/darker variations as needed for depth and contrast.
A well-designed theme needs:
After applying a theme, verify: