汎用デザイン・クリエイティブ⭐ リポ 0品質スコア 55/100

theme-system

CSSカスタムプロパティを用いた4つのテーマ（studio、earth、athlete、gradient）のテーマアーキテクチャです。data-theme属性の切り替えとテーマ対応コンポーネントで実装できます。テーマ切り替え機能の実装、カラースキームの定義、またはテーマに応じたUI要素の作成が必要な場合に活用してください。

description の原文を見る

CSS custom properties theme architecture for 4 themes (studio, earth, athlete, gradient) with data-theme attribute switching and theme-aware components. Use when implementing theme switching, defining color schemes, or creating theme-responsive UI elements.

SKILL.md 本文

注意: このスキルのライセンスは ライセンス未確認 です。本サイトでは本文プレビューのみを表示しています。利用前に GitHub の原本でライセンス条件をご確認ください。

テーマシステム

テーマ定義

/* app/globals.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    /* Default: Studio theme */
    --background: 0 0% 100%;
    --foreground: 0 0% 3.9%;
    --card: 0 0% 100%;
    --card-foreground: 0 0% 3.9%;
    --popover: 0 0% 100%;
    --popover-foreground: 0 0% 3.9%;
    --primary: 0 0% 9%;
    --primary-foreground: 0 0% 98%;
    --secondary: 0 0% 96.1%;
    --secondary-foreground: 0 0% 9%;
    --muted: 0 0% 96.1%;
    --muted-foreground: 0 0% 45.1%;
    --accent: 0 0% 96.1%;
    --accent-foreground: 0 0% 9%;
    --des

...

全文を GitHub の原本で見る →リポジトリ

詳細情報

作者: Shree0310
リポジトリ: Shree0310/Achievr
ライセンス: 不明
最終更新: 2026/4/17

GitHubで原本を見る →フィードバックを送る

Source: https://github.com/Shree0310/Achievr / ライセンス: 未指定