Skip to content

Simulate Android Material Design color themes in your browser and export XML

License

Notifications You must be signed in to change notification settings

mettyw/MaterialColorSimulator

Repository files navigation

MaterialColorSimulator

MaterialColorSimulator is a simulator for the Android Material Design color system. It lets you edit, preview and export a Material Design color theme for Android.

Note: Currently work in progress: results are usable but not fully accurate.

Usage

https://mettyw.github.io/MaterialColorSimulator/

Screenshots

Features

  • Use Randomize all button to randomize all colors
  • Or click a color swatch to select a color
  • Color picker
    • Press Locate color button to make corresponding UI components flash
    • Press Random color button on each color
    • Press Reset color button to revert change
    • Use the Picker to select a color
    • Use Tonal Palette as reference
    • Click an item on the Tonal Palette to assign that color
  • Main section
    • Use Device Mockups tab to preview color theme on mobile app mockups
    • Use Components tab to preview color theme on components
    • Click on UI component to make corresponding color swatch flash
    • Use Export tab to obtain android colors.xml and themes.xml file content
    • Use Import tab to load a theme from android colors.xml and themes.xml file content

How does it work?

See DESIGN.md.

Feedback & Contributions

Very welcome!

License

AGPL-3.0 license