# Gpus Theme > Portable GPUS design system theme (Portal Grupo US). This skill should be used when applying GPUS branding to other projects, setting up shadcn/ui with Navy/Gold palette, or copying the complete light/dark theme configuration. Includes CSS variables, Tailwind v4 theme, and shadcn configuration. - Skill: `majiayu000/gpus-theme` (Agent Skill, multi-file: 2 files) - Install (CLI): `npx skillmds@latest add majiayu000/gpus-theme` - Raw SKILL.md: https://api.skillmd.com/api/skills/majiayu000/gpus-theme/raw - Safety review: pending (external: skill-scanner PASS, skillspector PASS) - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Design & Media - Author: majiayu000 (https://skillmd.com/u/majiayu000) - Updated: 2026-09-09 - Page: https://skillmd.com/skills/majiayu000/gpus-theme --- # GPUS Theme Portable design system from the Portal Grupo US project featuring a Navy/Gold color palette with complete light and dark theme support. > **Identity:** Navy backgrounds + Gold accents. Professional, premium, educational. --- ## Quick Start ### Option 1: Copy CSS Variables Copy `assets/theme-tokens.css` to your project's main CSS file. ```css @import "tailwindcss"; @import "./theme-tokens.css"; /* Copy from assets/ */ ``` ### Option 2: Use shadcn Configuration Copy `assets/components.json` to your project root: ```bash cp .agent/skills/gpus-theme/assets/components.json ./components.json ``` ### Option 3: Tailwind v3 Config Import theme tokens into `tailwind.config.ts`: ```typescript import { gpusTheme } from './.agent/skills/gpus-theme/assets/tailwind-theme'; export default { theme: { extend: { colors: gpusTheme.colors, }, }, }; ``` --- ## Theme Overview ### Color Palette | Token | Light Mode | Dark Mode | Purpose | |-------|------------|-----------|---------| | **background** | White `0 0% 100%` | Navy `211 49% 10%` | Page background | | **foreground** | Dark blue `222 47% 11%` | Gold `39 44% 65%` | Text color | | **primary** | Gold `38 60% 45%` | Gold `39 44% 65%` | Main actions | | **accent** | Light gold `38 60% 95%` | Muted `26 5% 27%` | Highlights | | **destructive** | Red `0 84% 60%` | Red `0 84% 60%` | Errors | ### Border Radius - Base: `0.625rem` (10px) - Derived: `--radius-lg`, `--radius-md`, `--radius-sm` ### Custom Utilities | Class | Effect | |-------|--------| | `.bg-mesh` | Radial gradient mesh background | | `.glass-card` | Glassmorphism with blur | | `.bg-noise` | Subtle noise texture overlay | | `.animate-ripple` | Button ripple animation | --- ## Component Configuration ### shadcn/ui Settings - **Style:** `new-york` - **Base color:** `zinc` - **CSS Variables:** Enabled - **Icon Library:** `lucide` ### Extended Registries | Registry | URL | Components | |----------|-----|------------| | @kokonutui | kokonutui.com | Premium components | | @aceternity | ui.aceternity.com | Animated components | | @magicui | magicui.design | Magic effects | | @tweakcn | tweakcn.com | Theme generator | | @shadcnui-blocks | shadcnui-blocks.com | Page blocks | | @cult-ui | cult-ui.com | Cult components | | @originui | originui.com | Origin components | | @tailark | tailark.com | Tailark components | --- ## Files Reference | File | Purpose | |------|---------| | `references/css-variables.md` | Complete CSS variable reference | | `references/shadcn-config.md` | shadcn/ui configuration details | | `assets/theme-tokens.css` | Portable CSS file | | `assets/tailwind-theme.ts` | Tailwind v3 config export | | `assets/components.json` | shadcn configuration | --- ## Usage Tips ### Dark Mode Toggle The theme uses `.dark` class on `` element: ```typescript document.documentElement.classList.toggle('dark'); ``` ### Smooth Transitions Theme includes CSS for smooth color transitions: ```css body { transition: background-color 0.3s ease, color 0.3s ease; } ``` ### View Transition API For animated theme toggle, use the View Transition API selectors in `theme-tokens.css`.