Skip to content

Latest commit

 

History

History
63 lines (46 loc) · 3.12 KB

README.md

File metadata and controls

63 lines (46 loc) · 3.12 KB
Raw

material-design-3-import-export-ext

Basic Material Design 3 Import Export Utility.

Docs

Export - One Liner

  1. Material Design Theme Builder
  2. Open Chrome Console and Copy/Paste the following code
{function o(o,e){return e.querySelector("body > mio-root > mio-theme-builder > theme-builder").shadowRoot.querySelector("main > root-page > custom-base").shadowRoot.querySelector("main > section.options > article > div:nth-child(2) > core-colors").shadowRoot.querySelector(`section > div.colors > div:nth-child(${o}) > core-color-input`).shadowRoot.querySelector("#root > color-input").shadowRoot.querySelector("div").getAttribute("style").match(/--value: (.+?);/)[1]}let e=[{key:"primary",i:1},{key:"secondary",i:2},{key:"tertiary",i:3},{key:"neutral",i:4}];var t={};for(let{key:r,i:i}of e){let l=o(i,document);t[r]=l}t;}

Preview

material_theme_design_json_2023-06-21.23-57-51.mp4
pupp_replay_run_2023-06-22.00-42-51.mp4

Background

This is a simple utility to import and export Material Design 3 color palettes. Figma has a built-in utility to import and export themes, but it's extremely slow or just hangs.

Especially when the builder doesn't allow bookmarking...

  • Assuming Chrome console
  • Using 'puppeteer-core' to automate the process
    • use 'puppeteer' instead to automate the process if you don't want to link to your profile

Related Links