🎭 Profile Themes: Unleashing the Style Sorcerer

“Color is power. Layout is language. Together, they speak the soul of a creator.” — The Style Sorcerer

🎯 Quest Objectives

• Understand the CSS custom property architecture
• Create a new theme variant
• Support light and dark modes
• Ensure accessibility compliance
• Register the theme for selection in contributor data
• Submit a PR with screenshots

📖 Background

The contributor profile system uses CSS custom properties (variables) for theming. Currently, themes are class-based (Wizard=purple, Warrior=red, etc.). This quest teaches you to create entirely new theme variants beyond class colors — seasonal themes, retro themes, minimalist themes — that any contributor can select.

🗺️ Quest Architecture

graph TD
    A[Study existing CSS variables] --> B[Design theme color palette]
    B --> C[Create theme CSS file]
    C --> D[Add light + dark variants]
    D --> E[Test accessibility contrast]
    E --> F[Register theme in system]
    F --> G[Submit PR with screenshots]

    style A fill:#6c3fc5,color:#fff
    style G fill:#f9a825,color:#000

🗺️ Quest Steps

Step 1: Study the Variable Architecture

Open assets/css/contributor-profile.css and identify the custom properties:

/* Key variables used by the profile system */
--contributor-accent: #6c3fc5;     /* Primary accent color */
--contributor-bg: #f5f5f5;         /* Card backgrounds */
--contributor-text: #333;          /* Primary text */
--contributor-muted: #666;         /* Secondary text */
--contributor-border: #e0e0e0;     /* Borders */
--contributor-card-bg: #fff;       /* Card surface */
--xp-bar-fill: <gradient>;        /* XP progress bar */

These variables control the entire visual appearance.

Step 2: Design Your Theme

Choose a theme concept. Examples:

⚠️ Accent color ≠ text color. These accent/background pairs are design concepts, not guaranteed-accessible text colors. The light pairings — arctic (#00bcd4 on #e3f2fd ≈ 2.0:1) and sunset (#ff6b35 on #fff3e0 ≈ 2.6:1) — fall short of the 3:1 minimum you’ll enforce in Step 4. When a themed accent is used for text or interactive elements, pair it with a separate, darker text-safe variant of that hue so it clears the contrast bar. Always validate your final colors against the Step 4 table before opening a PR.

Step 3: Create the Theme CSS

Create assets/css/themes/contributor-theme-YOUR_THEME.css:

/* Theme: YOUR_THEME_NAME */
/* Author: YOUR_USERNAME */
/* Description: Brief description of the visual concept */

.contributor-theme--YOUR_THEME {
  /* Light mode */
  --contributor-accent: #YOUR_ACCENT;
  --contributor-bg: #YOUR_BG;
  --contributor-text: #YOUR_TEXT;
  --contributor-muted: #YOUR_MUTED;
  --contributor-border: #YOUR_BORDER;
  --contributor-card-bg: #YOUR_CARD_BG;
}

/* Dark mode variant */
@media (prefers-color-scheme: dark) {
  .contributor-theme--YOUR_THEME {
    --contributor-accent: #YOUR_DARK_ACCENT;
    --contributor-bg: #YOUR_DARK_BG;
    --contributor-text: #YOUR_DARK_TEXT;
    --contributor-muted: #YOUR_DARK_MUTED;
    --contributor-border: #YOUR_DARK_BORDER;
    --contributor-card-bg: #YOUR_DARK_CARD_BG;
  }
}

/* XP bar override */
.contributor-theme--YOUR_THEME .xp-bar-fill {
  background: linear-gradient(90deg, #START_COLOR, #END_COLOR);
}

/* Calendar override (optional) */
.contributor-theme--YOUR_THEME .calendar-low    { background: #LEVEL1; }
.contributor-theme--YOUR_THEME .calendar-medium { background: #LEVEL2; }
.contributor-theme--YOUR_THEME .calendar-high   { background: #LEVEL3; }
.contributor-theme--YOUR_THEME .calendar-max    { background: #LEVEL4; }

Step 4: Accessibility Check

Verify your theme meets WCAG AA contrast ratios:

Use WebAIM Contrast Checker or browser DevTools accessibility panel.

• All text passes AA contrast
• Badges are distinguishable
• XP bar is visible against background

Step 5: Register the Theme

Add theme support to _data/contributors/YOUR_USERNAME.yml:

profile:
  theme: YOUR_THEME  # New field — name of the CSS theme

Update _includes/contributor/character_sheet.html to apply the theme class:

⚠️ Strip the Liquid raw/endraw wrapper tags before pasting. They only exist here so this quest page can display the Liquid tags instead of running them. Copy the code into the real .html file without the raw/endraw lines — otherwise Jekyll renders the literal {% if %}/{{ theme_class }} markup as visible text instead of applying your theme.

{% if contributor.profile.theme %}
  {% assign theme_class = "contributor-theme--" | append: contributor.profile.theme %}
{% endif %}
<div class="contributor-sheet {{ theme_class }}">

Step 6: Load the Theme CSS

In your profile page (or in character_sheet.html):

⚠️ Same as Step 5 — remove the Liquid raw/endraw wrapper tags before pasting. Paste only the Liquid between them; leaving the raw/endraw lines in produces a broken literal <link> tag (with visible {{ ... }} markup) instead of loading your theme’s stylesheet.

{% if contributor.profile.theme %}
<link rel="stylesheet" href="{{ '/assets/css/themes/contributor-theme-' | append: contributor.profile.theme | append: '.css' | relative_url }}">
{% endif %}

Step 7: Test & Screenshot

Build the site and verify:

bundle exec jekyll serve

Take screenshots in both light and dark mode for your PR.

• Theme renders correctly in light mode
• Theme renders correctly in dark mode
• No broken layouts or unreadable text
• Screenshots taken for PR

Step 8: Submit PR

git checkout -b feature/contributor-theme-YOUR_THEME
git add assets/css/themes/contributor-theme-YOUR_THEME.css
git commit -m "feat(contributor): add YOUR_THEME profile theme

New theme: YOUR_THEME_NAME
Concept: Brief description
Includes light and dark mode variants.
Passes WCAG AA contrast requirements."
git push origin feature/contributor-theme-YOUR_THEME

🏆 Reward: Style Sorcerer Badge 🎭

Once your theme PR is merged, you’ve earned the Style Sorcerer badge (+150 XP).

“You have bent the very fabric of appearance to your will. The realm is more beautiful for it.”

🕸️ Knowledge Graph

Structured wiki-links connect this quest to the IT-Journey knowledge graph. Open the Obsidian Graph View to explore connections.

Level hub: [[Level 0100 - Frontend Development & Docker]] Overworld: [[🏰 Overworld - Master Quest Map]] Prerequisites: [[Forge Your Character: Crafting Your Contributor Identity]] Recommended: [[Stats Dashboard: Enhancing Your Data Visualization]] · [[Contribution Calendar: Mapping Your Journey Through Time]] Obsidian docs: [[Obsidian Knowledge Graph and Wiki Links]]