{"id":13440058,"url":"https://github.com/material-foundation/material-theme-builder","last_synced_at":"2025-05-16T01:05:03.101Z","repository":{"id":39665235,"uuid":"411377749","full_name":"material-foundation/material-theme-builder","owner":"material-foundation","description":"Visualize dynamic color and create a custom Material Theme. ","archived":false,"fork":false,"pushed_at":"2025-02-21T13:46:35.000Z","size":34088,"stargazers_count":470,"open_issues_count":86,"forks_count":37,"subscribers_count":12,"default_branch":"main","last_synced_at":"2025-05-09T08:53:12.786Z","etag":null,"topics":["android","colors","dynamic-color","google","lit","mamaterial-theme-builder","material","material-design","material-you","theme","theme-generator","typescript","web","web-components"],"latest_commit_sha":null,"homepage":"https://material-foundation.github.io/material-theme-builder/","language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/material-foundation.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-09-28T17:27:18.000Z","updated_at":"2025-04-24T17:59:07.000Z","dependencies_parsed_at":"2024-02-05T21:31:44.807Z","dependency_job_id":"17e92f12-2b1f-451f-8c4b-ebd3c26cdece","html_url":"https://github.com/material-foundation/material-theme-builder","commit_stats":{"total_commits":25,"total_committers":3,"mean_commits":8.333333333333334,"dds":0.52,"last_synced_commit":"8e4e50ba4ac5048a804479a6f068c1552175a60f"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/material-foundation%2Fmaterial-theme-builder","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/material-foundation%2Fmaterial-theme-builder/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/material-foundation%2Fmaterial-theme-builder/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/material-foundation%2Fmaterial-theme-builder/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/material-foundation","download_url":"https://codeload.github.com/material-foundation/material-theme-builder/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254448579,"owners_count":22072764,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["android","colors","dynamic-color","google","lit","mamaterial-theme-builder","material","material-design","material-you","theme","theme-generator","typescript","web","web-components"],"created_at":"2024-07-31T03:01:19.428Z","updated_at":"2025-05-16T01:05:03.024Z","avatar_url":"https://github.com/material-foundation.png","language":null,"readme":"![cover](https://user-images.githubusercontent.com/10263978/228079210-921db0c8-1573-469d-aca9-a34c23c035b4.png)\n\n# Material Theme Builder\n\nThe 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.\n\n### Visualize dynamic and create a custom theme \nMaterial 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. \n\nMaterial Theme Builder:\n[https://m3.material.io/theme-builder/](https://material-foundation.github.io/material-theme-builder/)\n\nMaterial Theme Builder for Figma:\nhttps://goo.gle/material-theme-builder-figma\n\n## What's New\n⚠ 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.\nFixed accents add a new set of colors that will remain consistent across light and dark themes. \n\n- Repair: If using a previously generated color scheme, Repair your theme or Create a new theme to get the new color tokens. \n- JSON import, this will update the theme values with the same name, allowing to move themes across files and between web and figma.\n- Color style properties will now export. Meaning exact color values can be set in style properties and then exported in theme files. \n\nPrevious release: \n- New UI for custom colors for easier to read labels and descriptive subtitles.\n- 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).\n- Speaking of extended colors, you can now rename and delete from within the plugin.\n- 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.\n- The Figma plugin includes setup settings and a settings modal to toggle certain features off if not needed and even try out Beta features!  \n\n## How to use - Figma plugin\n\u003cimg width=\"1024\" alt=\"themes-13-Material-Theme-Builder\" src=\"https://github.com/material-foundation/material-theme-builder/assets/10263978/a64a3166-b49a-484b-8416-d268fa135bd2\"\u003e\n\n\n#### Setup\n1. Run by searching for Material Theme Builder within Figma plugin search or Try it Out from the Community page (will create a new file). \n2. With the plugin open click Create Theme to generate a theme (material-theme) and Material Design tokens as Figma styles.\n3. Using design kit components? Turn on State Layers within settings, this will generate needed state layers when customizing the theme. \n4. Select and **Swap** to update the theme used in the components.\n5. Assign MD tokens (Figma styles) to custom elements and components, then **swap** to the currently selected theme.\n\n\u003cimg width=\"666\" alt=\"settings_statelayers\" src=\"https://user-images.githubusercontent.com/10263978/228084527-37974bde-1c99-4f7f-98af-17b44ad54137.png\"\u003e\n\n\nThe foundation of a color scheme is the set of key colors that individually relate to separate tonal palettes. Specific tones from each tonal palette are assigned to color roles across a UI. Start by opening Material Theme Builder. You can build a scheme through a few methods…\n#### From a Source image\nUnder Source Image, drop in an image or choose one from the file browser. Set the source of the image, Wallpaper or Content, to toggle which algorithm is used. Now select Update, the color scheme will be updated. This gives a preview of dynamic color from a user’s wallpaper or local color extraction.\nDon’t want to choose an image or color? Randomize the source color with **Shuffle**.\n\n\u003cimg width=\"1024\" alt=\"dynamic\" src=\"https://github.com/material-foundation/material-theme-builder/assets/10263978/d020351a-09b5-4e1f-96dc-29fa79cb321a\"\u003e\n\n#### From Core colors\nInstead of generating from a source image, build a more customized scheme…\nStart updating the key colors, with **Primary** first. Primary can be your main brand color, or primary accent color that is most utilized. Key colors are created from the input color’s hue by adjusting the chroma and tone.\nThe primary key color will be used for the source color, much like the source color in the dynamic setting and will override all other key colors, so set this one first. This means, there is no need to add additional colors.\n**Secondary** roles are used for less prominent components in the UI, while expanding the opportunity for color expression.\n**Tertiary** roles are used for contrasting accents that can be used to balance primary and secondary colors or bring heightened attention to an element. \nNeutral roles are used for surfaces and backgrounds, as well as high emphasis text and icons.\u2028Select Update. Your brand colors will now be included in the core color scheme adjusted to match the M3 color space, accessible, and able to export and implement within code as a theme. \n\n\u003cimg width=\"1024\" alt=\"custom\" src=\"https://github.com/material-foundation/material-theme-builder/assets/10263978/8f230233-9ec1-48d6-96a2-f2c8cb7991c9\"\u003e\n\n####  Extended Colors**\n1. To extend out past user-generated dynamic colors or the baseline schemes. Click **Add a color**. A color input will appear and update the color schematic. \n2. Click on the color well to prompt a color picker to update the color. \n3. 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.\n4. Delete by deleting the custom color source (in Figma styles).\n\n![extended](https://user-images.githubusercontent.com/10263978/228080337-4595a876-eaa1-454a-aa64-b0830b3282a2.png)\n\n\n#### Add theme and presets\nYou can change the current theme, add a new theme, and reset the current theme within the **Theme menu** (dropdown at top). \n\n\u003cimg width=\"1024\" alt=\"add a theme\" src=\"https://github.com/material-foundation/material-theme-builder/assets/10263978/9d0e00c6-555b-4b04-8254-73c26a7ab59d\"\u003e\n\nSelecting a different theme changes the current theme to edit. **Swap** with will update whatever is selected to the current theme in the dropdown. \n\nPresets are available in the menu to reset the current theme back to the Material baseline theme. \n\n#### Export\nReady to implement your theme? Click **Export** and select your desired code format. \nLearn about themes and [migrating to M3](https://material.io/blog/migrating-material-3) or try out implementation with [Adding dynamic color to your app codelab](https://codelabs.developers.google.com/codelabs/apply-dynamic-color#0). \n\n## How to use - Web\n\n\u003cimg width=\"892\" alt=\"web_mtb\" src=\"https://github.com/user-attachments/assets/45b9efa1-d129-4f44-9e0b-d51486f464df\"\u003e\n\nThe foundation of a color scheme is the set of key colors that individually relate to separate tonal palettes. Specific tones from each tonal palette are assigned to color roles across a UI. Start by opening Material Theme Builder. You can build a scheme through a few methods…\n\n#### From a Source image\nUnder Source Image, there are a few wallpapers provided to demonstrate wallpaper generated themes. The last option allows to **Add your wallpaper** from an uploaded image or link.\nDon’t want to choose an image or color? Randomize the source color with **Shuffle**.\n\n#### From Core colors\nInstead of generating from a source image, build a more customized scheme…\nStart updating the key colors, with **Primary** first. Primary can be your main brand color, or primary accent color that is most utilized. Key colors are created from the input color’s hue by adjusting the chroma and tone.\nThe primary key color will be used for the source color, much like the source color in the dynamic setting and will override all other key colors, so set this one first. This means, there is no need to add additional colors.\n**Secondary** roles are used for less prominent components in the UI, while expanding the opportunity for color expression.\n**Tertiary** roles are used for contrasting accents that can be used to balance primary and secondary colors or bring heightened attention to an element. \nNeutral roles are used for surfaces and backgrounds, as well as high emphasis text and icons.\u2028Select Update. Your brand colors will now be included in the core color scheme adjusted to match the M3 color space, accessible, and able to export and implement within code as a theme. \n**Color Match** will use the color inputs in place of _Container_ roles to provide color fidelity with your brand colors or to provide a more vibrant output.\n\n\u003cimg width=\"892\" alt=\"web_custom\" src=\"https://github.com/user-attachments/assets/55763e3b-7a5c-4bec-9488-d2dc1e38f8aa\"\u003e\n\n\n#### Extended and harmonized colors\n1. To extend out past user-generated dynamic colors or the baseline schemes. Click Add a color. A color input will appear and update the color schematic. \n2. Click on the color well to prompt a color picker to update the color. \n3. To update a custom color, open the overflow menu and select **Rename**.\n4. Delete by selected **Delete**. \n5. Extended colors can be harmonized (color shifted to) with the dynamic colors. \n\n\u003cimg width=\"892\" alt=\"web_extended\" src=\"https://github.com/user-attachments/assets/d9f92e64-1e90-4096-8b50-95393a6e7f57\"\u003e\n\n#### Type theme\nClick through to **Pick your Fonts** to add custom type to your theme. \n\n\u003cimg width=\"892\" alt=\"web_fonts\" src=\"https://github.com/user-attachments/assets/5d269a4c-8969-4e51-a252-0845f87cddc7\"\u003e\n\n\n\n#### Export\nReady to implement your theme? Open the drawer or click through to Export.\nLearn about themes and [migrating to M3](https://material.io/blog/migrating-material-3) or try out implementation with [Adding dynamic color to your app codelab](https://codelabs.developers.google.com/codelabs/apply-dynamic-color#0). \n","funding_links":[],"categories":["HarmonyOS"],"sub_categories":["Windows Manager"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmaterial-foundation%2Fmaterial-theme-builder","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmaterial-foundation%2Fmaterial-theme-builder","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmaterial-foundation%2Fmaterial-theme-builder/lists"}