skills.rest
sampaio-tech
sampaio-techOFFICIAL
Explore all skills by this author →
WebsiteGitHub

theme-system

Manage iOS design system themes with 8 color palettes and 22 typography styles for Flutter.

19|2|Updated Apr 29, 2023
Search Tags:#typography#design system#ios#theme#flutter#colors
One-click install
npx skills add https://github.com/sampaio-tech/iOS-design-system --skill theme-system-sampaio-tech
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: theme-system
Source: https://github.com/sampaio-tech/iOS-design-system/tree/main/.claude/skills/theme-system
Command: npx skills add https://github.com/sampaio-tech/iOS-design-system --skill theme-system-sampaio-tech

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill provides a comprehensive and consistent theming system for iOS-style applications built with Flutter, ensuring adherence to Apple's Human Interface Guidelines and simplifying the management of colors, typography, and visual styles.

Core Features & Use Cases

  • Centralized Theme Management: Access all design tokens (colors, typography) through a single context provider.
  • Extensive Color Palettes: Includes system colors, semantic label colors, fill colors, background variations, separator styles, and material effects.
  • Rich Typography: Offers 22 distinct text styles based on the SF Pro Text font, covering various hierarchical needs from large titles to captions.
  • Automatic Dark Mode: Seamlessly supports light and dark theme switching.
  • App-Specific Themes: Provides pre-built themes for common iOS applications like Music, Stocks, and App Store.
  • Usage: Developers can easily apply consistent styling across their Flutter app, ensuring a native iOS look and feel without hardcoding values.

Quick Start

Access the theme using IosTheme.of(context) and apply a text style with theme.typography.bodyRegular.

Frequently Asked Questions about theme-system

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I implement an iOS design system theme in Flutter?▼

You can implement an iOS design system theme in Flutter by accessing design tokens through a single context provider. It supplies 8 color palettes and 22 typography styles to ensure adherence to Apple's Human Interface Guidelines.

Does Flutter support automatic dark mode switching for iOS themes?▼

Flutter supports automatic dark mode switching for iOS themes through this architecture. It seamlessly handles light and dark theme transitions, ensuring your app's system colors, backgrounds, and materials adapt dynamically.

Can I use SF Pro Text typography styles in a Flutter application?▼

You can use SF Pro Text typography styles in a Flutter application through this system. It offers 22 distinct text styles covering hierarchical needs from large titles to captions, accessible directly via the theme provider.

What is the best way to manage iOS system colors and materials in Flutter?▼

The best way to manage iOS system colors and materials in Flutter is via a centralized design token system. It provides structured access to semantic label colors, fill colors, separator styles, and material effects.

Are there pre-built themes for iOS apps like Music or Stocks in Flutter?▼

There are pre-built themes for iOS apps like Music, Stocks, and App Store in Flutter. The system provides app-specific decorations and styling to quickly apply a native iOS look and feel.

Related Skills

Explore More Software Engineering Skills→
AdhamHashimAdhamHashim
1

pubspec-manager

Detect missing Flutter packages from Figma designs and add them to pubspec.yaml.

Community
Intermediate
zzafergokzzafergok
1

mobile-ui-ux

Generate iOS-first Flutter-ready UI components with token-driven design system aligned to iOS Human Interface Guidelines.

Community
Intermediate
hkcm91hkcm91

theming-with-tokens

Manage StickerNest UI themes with CSS custom properties and token-based architecture.

Community
Intermediate
ralphjohn29ralphjohn29
1

apple-hig-designer

Generate SwiftUI and UIKit code examples following Apple's Human Interface Guidelines.

Community
Intermediate