Skip to content
CodeForWings MDT
Search
K
Main Navigation
Demo
Try Me
MTB
CFW
GitHub
Appearance
GitHub
Menu
Return to top
On this page
Table of Contents for current page
Demo Playground
Import Export Vue Component
{"primary":"#CBA642","secondary":"#8B90A5","tertiary":"#426CBA","neutral":"#959088"}
{ "title": "themeM3-#CBA642-#8B90A5-#426CBA-#959088.json", "steps": [ { "type": "navigate", "url": "https://m3.material.io/theme-builder#/custom", "assertedEvents": [ { "type": "navigation", "url": "https://m3.material.io/theme-builder#/custom", "title": "Material Design" } ] }, { "type": "waitForElement", "selectors": [ [ "body > mio-root > mio-theme-builder > theme-builder ", " main > root-page > custom-base ", " main > section.options > article > div:nth-child(2) > core-colors ", " section > div.colors > div:nth-child(1) > core-color-input ", " #root > color-input ", " #source-color" ] ], "timeout": 5000, "visible": true }, { "type": "click", "target": "main", "selectors": [ [ "body > mio-root > mio-theme-builder > theme-builder ", " main > root-page > custom-base ", " main > section.options > article > div:nth-child(2) > core-colors ", " section > div.colors > div:nth-child(1) > core-color-input ", " #root > color-input ", " #source-color" ] ], "offsetY": 10, "offsetX": 10, "duration": 300, "timeout": 5000 }, { "type": "waitForElement", "selectors": [ [ "body > mio-root > mio-theme-builder > theme-builder ", " main > root-page > custom-base ", " main > section.options > article > div:nth-child(2) > core-colors ", " section > div.colors > div:nth-child(1) > core-color-input ", " #root > color-input ", " #source-hex" ] ], "timeout": 5000, "visible": true }, { "type": "change", "target": "main", "value": "#CBA642", "selectors": [ [ "body > mio-root > mio-theme-builder > theme-builder ", " main > root-page > custom-base ", " main > section.options > article > div:nth-child(2) > core-colors ", " section > div.colors > div:nth-child(1) > core-color-input ", " #root > color-input ", " #source-hex" ] ] }, { "type": "keyDown", "key": "Enter" }, { "type": "keyUp", "key": "Enter" }, { "type": "waitForElement", "selectors": [ [ "body > mio-root > mio-theme-builder > theme-builder ", " main > root-page > custom-base ", " main > section.options > article > div:nth-child(2) > core-colors ", " section > div.colors > div:nth-child(1) > core-color-input ", " #root > color-input ", " #modal-dialog > div.actions > button" ] ], "timeout": 5000, "visible": true }, { "type": "click", "target": "main", "selectors": [ [ "body > mio-root > mio-theme-builder > theme-builder ", " main > root-page > custom-base ", " main > section.options > article > div:nth-child(2) > core-colors ", " section > div.colors > div:nth-child(1) > core-color-input ", " #root > color-input ", " #modal-dialog > div.actions > button" ] ], "offsetY": 10, "offsetX": 10, "duration": 300, "timeout": 5000 }, { "type": "waitForElement", "selectors": [ [ "body > mio-root > mio-theme-builder > theme-builder ", " main > root-page > custom-base ", " main > section.options > article > div:nth-child(2) > core-colors ", " section > div.colors > div:nth-child(2) > core-color-input ", " #root > color-input ", " #source-color" ] ], "timeout": 5000, "visible": true }, { "type": "click", "target": "main", "selectors": [ [ "body > mio-root > mio-theme-builder > theme-builder ", " main > root-page > custom-base ", " main > section.options > article > div:nth-child(2) > core-colors ", " section > div.colors > div:nth-child(2) > core-color-input ", " #root > color-input ", " #source-color" ] ], "offsetY": 10, "offsetX": 10, "duration": 300, "timeout": 5000 }, { "type": "waitForElement", "selectors": [ [ "body > mio-root > mio-theme-builder > theme-builder ", " main > root-page > custom-base ", " main > section.options > article > div:nth-child(2) > core-colors ", " section > div.colors > div:nth-child(2) > core-color-input ", " #root > color-input ", " #source-hex" ] ], "timeout": 5000, "visible": true }, { "type": "change", "target": "main", "value": "#8B90A5", "selectors": [ [ "body > mio-root > mio-theme-builder > theme-builder ", " main > root-page > custom-base ", " main > section.options > article > div:nth-child(2) > core-colors ", " section > div.colors > div:nth-child(2) > core-color-input ", " #root > color-input ", " #source-hex" ] ] }, { "type": "keyDown", "key": "Enter" }, { "type": "keyUp", "key": "Enter" }, { "type": "waitForElement", "selectors": [ [ "body > mio-root > mio-theme-builder > theme-builder ", " main > root-page > custom-base ", " main > section.options > article > div:nth-child(2) > core-colors ", " section > div.colors > div:nth-child(2) > core-color-input ", " #root > color-input ", " #modal-dialog > div.actions > button" ] ], "timeout": 5000, "visible": true }, { "type": "click", "target": "main", "selectors": [ [ "body > mio-root > mio-theme-builder > theme-builder ", " main > root-page > custom-base ", " main > section.options > article > div:nth-child(2) > core-colors ", " section > div.colors > div:nth-child(2) > core-color-input ", " #root > color-input ", " #modal-dialog > div.actions > button" ] ], "offsetY": 10, "offsetX": 10, "duration": 300, "timeout": 5000 }, { "type": "waitForElement", "selectors": [ [ "body > mio-root > mio-theme-builder > theme-builder ", " main > root-page > custom-base ", " main > section.options > article > div:nth-child(2) > core-colors ", " section > div.colors > div:nth-child(3) > core-color-input ", " #root > color-input ", " #source-color" ] ], "timeout": 5000, "visible": true }, { "type": "click", "target": "main", "selectors": [ [ "body > mio-root > mio-theme-builder > theme-builder ", " main > root-page > custom-base ", " main > section.options > article > div:nth-child(2) > core-colors ", " section > div.colors > div:nth-child(3) > core-color-input ", " #root > color-input ", " #source-color" ] ], "offsetY": 10, "offsetX": 10, "duration": 300, "timeout": 5000 }, { "type": "waitForElement", "selectors": [ [ "body > mio-root > mio-theme-builder > theme-builder ", " main > root-page > custom-base ", " main > section.options > article > div:nth-child(2) > core-colors ", " section > div.colors > div:nth-child(3) > core-color-input ", " #root > color-input ", " #source-hex" ] ], "timeout": 5000, "visible": true }, { "type": "change", "target": "main", "value": "#426CBA", "selectors": [ [ "body > mio-root > mio-theme-builder > theme-builder ", " main > root-page > custom-base ", " main > section.options > article > div:nth-child(2) > core-colors ", " section > div.colors > div:nth-child(3) > core-color-input ", " #root > color-input ", " #source-hex" ] ] }, { "type": "keyDown", "key": "Enter" }, { "type": "keyUp", "key": "Enter" }, { "type": "waitForElement", "selectors": [ [ "body > mio-root > mio-theme-builder > theme-builder ", " main > root-page > custom-base ", " main > section.options > article > div:nth-child(2) > core-colors ", " section > div.colors > div:nth-child(3) > core-color-input ", " #root > color-input ", " #modal-dialog > div.actions > button" ] ], "timeout": 5000, "visible": true }, { "type": "click", "target": "main", "selectors": [ [ "body > mio-root > mio-theme-builder > theme-builder ", " main > root-page > custom-base ", " main > section.options > article > div:nth-child(2) > core-colors ", " section > div.colors > div:nth-child(3) > core-color-input ", " #root > color-input ", " #modal-dialog > div.actions > button" ] ], "offsetY": 10, "offsetX": 10, "duration": 300, "timeout": 5000 } ] }
Download JSON - themeM3-#CBA642-#8B90A5-#426CBA-#959088.json
Steps
Import
JSON
Download
Misc
StackBlitz
Theme / Vuetify