• Stars
    star
    409
  • Rank 105,709 (Top 3 %)
  • Language
  • License
    Apache License 2.0
  • Created about 3 years ago
  • Updated 3 months ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Visualize dynamic color and create a custom Material Theme.

cover

Material Theme Builder

The Material Theme builder is built to assist in exploring the possibilities of dynamic color, harmonizing brand colors, and providing a type scale. All with implementation in mind to bridge designer and developer workflows. With built-in code export, Material Theme Builder makes it easy migrate to the M3 color system and take advantage of dynamic color.

Visualize dynamic and create a custom theme

Material Design’s Dynamic color brings user personalization to apps by generating accessible light and dark color schemes from a user’s device wallpaper. Build a custom Material Theme, allowing you to migrate to Material Design 3’s new color system, and export it to code.

Material Theme Builder: https://m3.material.io/theme-builder/

Material Theme Builder for Figma: https://goo.gle/material-theme-builder-figma

What's New

⚠ The latest update introduces Surfaces based on tone values, these are no longer read-only overlays. Surfaces 1–5 will remain in the builder for current users, but we recommend migrating to new surface tokens as soon as possible. Fixed accents add a new set of colors that will remain consistent across light and dark themes.

  • Repair: If using a previously generated color scheme, Repair your theme or Create a new theme to get the new color tokens.
  • JSON import, this will update the theme values with the same name, allowing to move themes across files and between web and figma.
  • Color style properties will now export. Meaning exact color values can be set in style properties and then exported in theme files.

Previous release:

  • New UI for custom colors for easier to read labels and descriptive subtitles.
  • Extended color with harmonization is now on both the Web version and Figma plugin! Your extended colors will carry between Dynamic and Custom scheme. (Harmonization is only to visualize with dynamic color).
  • Speaking of extended colors, you can now rename and delete from within the plugin.
  • The new HCT color picker allows to update colors using Hue, Chroma, and Tone. Plus the color picker allows to copy/paste hex code values.
  • The Figma plugin includes setup settings and a settings modal to toggle certain features off if not needed and even try out Beta features!

How to use - Figma plugin

how to get started with theme builder

Setup

  1. Run by searching for Material Theme Builder within Figma plugin search or Try it Out from the Community page (will create a new file).
  2. With the plugin open click Create Theme to generate a theme (material-theme) and Material Design tokens as Figma styles.
  3. Using design kit components? Turn on State Layers within settings, this will generate needed state layers when customizing the theme.
  4. Select and Swap to update the theme used in the components.
  5. Assign MD tokens (Figma styles) to custom elements and components, then swap to the currently selected theme.

settings_statelayers

Dynamic Color

  1. With Dynamic selected, drop an image in or click to choose an image to derive key colors into a scheme from an image. Below the image the source color will update based on the image. The theme’s colors and any elements or components using the theme will update based on the image.
  2. Or enter a source color manually to emulate inputting an image.
  3. Don’t want to choose an image or color? Randomize the source color with Shuffle.

dynamic

Create a custom theme

Your brand’s colors can still take advantage of the Material You color story without dynamic color controlling the UI with the help of some resources. Colors will be shifted to generate accessible colors within the same color space as dynamic colors.

  1. With Custom selected, select the color input for Primary.
  2. A full scheme can be generated from Primary or input your available brand colors into the rest of the color inputs in their appropriate color assignments.

custom

Extended Colors**

  1. To extend out past user-generated dynamic colors or the baseline schemes. In Custom, click Add a color. A color input will appear and update the color schematic.
  2. Click on the color well to prompt a color picker to update the color.
  3. To rename a custom color, with the modal closed. Find the source group and update the Custom style name. The color name will be updated next time the plugin is open.
  4. Delete by deleting the custom color source (in Figma styles).

extended

Add theme and presets

You can change the current theme, add a new theme, and reset the current theme within the Theme menu (dropdown at top).

add a theme

Selecting a different theme changes the current theme to edit. Swap with will update whatever is selected to the current theme in the dropdown.

Presets are available in the menu to reset the current theme back to the Material baseline theme.

Export

Ready to implement your theme? Click Export and select your desired code format. Learn about themes and migrating to M3 or try out implementation with Adding dynamic color to your app codelab.

How to use - Web

web_mtb

Dynamic Color

  1. With Dynamic selected, explore how dynamic color can affect an app’s color scheme.
  2. Either by selecting a wallpaper to update the UI example with colors generated from the selected wallpaper.
  3. Select Shuffle to randomize the source color to update the color scheme.
  4. Add your wallpaper will generate a color scheme for the app example using your chosen image. The wallpaper will not be uploaded or previewed.

Create a custom theme

Your brand’s colors can still take advantage of the Material You color story without dynamic color controlling the UI with the help of some resources. Colors will be shifted to generate accessible colors within the same color space as dynamic colors.

  1. With Custom selected, select the color input for Primary.
  2. A full scheme can be generated from Primary or input your available brand colors into the rest of the color inputs in their appropriate color assignments.

web_custom

Extended and harmonized colors

  1. To extend out past user-generated dynamic colors or the baseline schemes. In Custom, click Add a color. A color input will appear and update the color schematic.
  2. Click on the color well to prompt a color picker to update the color.
  3. To rename a custom color, hover over the color and click the edit (pencil) icon.
  4. Delete by clicking the trash icon.
  5. Extended colors can be harmonized (color shifted to) with the dynamic colors. Checking Harmonize will show the harmonized versions under Dynamic.

web_extended

Export

Ready to implement your theme? Click Export and select your desired code format. Learn about themes and migrating to M3 or try out implementation with Adding dynamic color to your app codelab.

More Repositories

1

material-color-utilities

Color libraries for Material You
Swift
1,637
star
2

material-remixer

A set of cross-platform libraries and protocols to allow the sharing of design values and live refinement of apps during the development process.
1,249
star
3

flutter-packages

A collection of useful Material Design packages
Dart
827
star
4

material-remixer-android

Remixer for Android. Live adjustment of app variables.
Java
776
star
5

material-tokens

Material Design DSP
CSS
234
star
6

material-components-flutter-adaptive

Now lives at https://github.com/material-foundation/flutter-packages/tree/main/packages
Dart
162
star
7

material-remixer-ios

Remixer for iOS: Live adjustment of app variables.
Objective-C
102
star
8

material-remixer-js

Remixer for JavaScript. Live adjustment of app variables.
TypeScript
97
star
9

pesto_flutter

Learn how to build the basil material study in Flutter with advanced theming techniques that support multiple device contexts. This file is a companion to the live workshop at Flutter Forward 2022
Dart
72
star
10

material-dynamic-color-flutter

Now lives at https://github.com/material-foundation/flutter-packages/tree/main/packages/dynamic_color
JavaScript
59
star
11

material-text-accessibility-ios

MDFTextAccessibility assists in selecting text colors that meet the W3C standards for accessibility.
Objective-C
58
star
12

material-internationalization-ios

MDFInternationalization assists in internationalizing your IOS app or components.
Objective-C
41
star
13

material-remixer-remote-web

A hosted remote controller for a Remixer target app.
TypeScript
26
star
14

material-sprited-animation-view-ios

UIView subclass that uses a spritesheet to animate between two image states
Objective-C
25
star
15

material-roboto-font-loader-ios

Objective-C
23
star
16

material-scrollview-delegate-multiplexer-ios

MDFScrollViewDelegateMultiplexer acts as a proxy object for UIScrollViewDelegate events and forwards all received events to an ordered list of registered observers.
Objective-C
21
star
17

material-font-disk-loader-ios

Objective-C
20
star
18

cocoapods-catalog-by-convention

Build a Catalog application using conventions and CocoaPods
Objective-C
19
star
19

material-automation

A Swift backend connected to our Github App for automation
Swift
15
star
20

github-squash-and-merge-pr-descriptions

A Chrome extension that populates GitHub squash-and-merge commit messages with the PR description.
JavaScript
13
star
21

material-symbols-and-variable-fonts

Learning Material Symbols and Variable Fonts
TypeScript
11
star
22

bazel-apple-framework-relative-headers

Bazel support for framework header imports
Python
9
star
23

arc-tslint

tslint linter for phabricator's arc command line tool
PHP
8
star
24

clang-format-ci

Run clang-format from your CI to automatically suggest style changes in PRs as in-line comments.
Shell
8
star
25

github-comment

A command line tool for posting pull request comments to GitHub
Swift
7
star
26

material-arc-tools

arcanist linters, unit tests, and hooks.
6
star
27

arc-hook-github-issues

An arc-hook for updating GitHub issues after running arc diff.
PHP
5
star
28

bazel_ios_warnings

Warnings we use for bazel iOS targets.
Python
5
star
29

SettingsKit

Easily generate a settings screen using a modular MVVM architecture.
Objective-C
5
star
30

clang-format

Pre-build clang-format binaries
Shell
4
star
31

bazel-workspace-apple

The Material Foundation's common Bazel workspaces dependencies for Apple targets
Python
4
star
32

bazel-test-host-apple

A generic Bazel test host for Apple targets.
Python
4
star
33

kokoro-ios-runner

A build and test runner for kokoro iOS.
Shell
4
star
34

arc-hook-conphig

Hookable configuration for phabricator's arc command line tool
PHP
4
star
35

arc-tsclint

PHP
3
star
36

material-testing-ios

This repository extends XCTest framework with testing helper additions.
Python
3
star
37

swatchie

1
star
38

graphite-oss-daemon

node.js graphite daemon for open source analytics.
JavaScript
1
star
39

compute-oss-dashboard

Google Compute Engine cluster configuration scripts for our open source analytics dashboard
Shell
1
star