{"id":24044,"date":"2021-03-24T18:00:00","date_gmt":"2021-03-25T01:00:00","guid":{"rendered":"https:\/\/www.uxpin.com\/studio\/?p=24044"},"modified":"2024-06-12T20:50:26","modified_gmt":"2024-06-13T03:50:26","slug":"theme-switching-merge","status":"publish","type":"post","link":"https:\/\/www.uxpin.com\/studio\/blog\/theme-switching-merge\/","title":{"rendered":"Make Theme Switching Easy with UXPin Merge"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\" id=\"h-\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/lh5.googleusercontent.com\/vUyu7FSezFgVnqRvixDdeohctdl3JX1RMWNqBeSZ3oybIiFVu3tXKLakGIVh9_CgoCNfZ98L_dP_-b4VTg_BljglIwuGbGNGkzdoTHozMzlE4K3SndMqPgOcYljT6hjurq_NFbz_\" width=\"624\" height=\"312\"><\/h2>\n\n\n\n<p>Theme switching is an essential part of designing prototypes. Whether that be changing between a simple light and dark mode or testing several client\u2019s themes on a single prototype, it is something that all designers need to consider and have a well-thought-out process for. <\/p>\n\n\n\n<p>Furthermore, this need has become increasingly important with the adoption of open-source <a href=\"https:\/\/www.uxpin.com\/create-design-system-guide\/\" target=\"_blank\" rel=\"noreferrer noopener\">Design Systems<\/a>, such as <a href=\"https:\/\/material-ui.com\/customization\/theming\/\" target=\"_blank\" rel=\"noreferrer noopener\">Material-UI<\/a>, which have become a valid choice for projects. <\/p>\n\n\n\n<p>So, theme switching functionality \u2013 such an integral part of the design process, enables to dynamically test themes on-the-fly without using multiple design systems or layouts. It is an amazingly efficient and powerful feature to have at your disposal.<\/p>\n\n\n\n<p>With the importance of this feature, we want to show how this can be done in UXPin, thanks to the power of Merge and <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/design-with-code-tutorial\/\" target=\"_blank\" rel=\"noreferrer noopener\">designing with code<\/a>. <\/p>\n\n\n\n<p>Want to use the power of Merge yourself? &#8211; <a href=\"https:\/\/www.uxpin.com\/merge\" target=\"_blank\" rel=\"noreferrer noopener\">Get access to UXPin Merge.<\/a> <\/p>\n\n\n\n<section class=\"discover-merge\">\n    <div class=\"discover-merge__container\">\n        <div class=\"discover-merge__left\">\n            <p class=\"discover-merge__heading\">Reach a new level of prototyping<\/p>\n            <p class=\"discover-merge__text\">Design with interactive components coming from your team&#8217;s design system.<\/p>\n            <a href=\"https:\/\/www.uxpin.com\/merge\" target=\"_blank\" rel=\"noopener\">\n                <button class=\"discover-merge__button\">Discover UXPin Merge<\/button>\n            <\/a>\n        <\/div>\n        <div>\n            <img decoding=\"async\" src=\"https:\/\/uxpin.com\/studio\/wp-content\/themes\/uxpin-juggernaut\/img\/cta-banner-merge.png\" class=\"discover-merge__image\" alt=\"\">\n        <\/div>\n    <\/div>\n<\/section>\n\n<style>\n.discover-merge {\n    margin: 40px 8px;\n}\n\n.discover-merge__container {\n    display: flex;\n    max-width: 690px;\n    height: 200px;\n    padding: 20px;\n    padding-left: 24px;\n    border-radius: 4px;\n    background-color: black;\n    box-shadow: 10px 10px #9999ff;\n    align-items: center;\n    justify-content: space-between;\n}\n\n.discover-merge__left {\n    width: 50%;\n}\n\n.discover-merge__left p {\n    margin: 10px 0px !important;\n    color: white !important;\n    font-size: 18px !important;\n}\n\n.discover-merge__heading {\n    font-weight: bold !important;\n    color: white !important;\n    font-size: 18px !important;\n}\n\n.discover-merge__text {\n    margin: 0 !important;\n    line-height: 22px !important;\n}\n\n.discover-merge__button {\n    width: 174px;\n    height: 44px;\n    margin: 10px 0px;\n    border: none;\n    border-radius: 2px;\n    background: white;\n    color: black;\n    font-size: 16px;\n    text-align: center;\n}\n\n.discover-merge__button:hover {\n    cursor: pointer;\n}\n\n.discover-merge__image {\n    max-width: 320px !important;\n    height: 200px;\n    margin-right: -19px;\n}\n\n@media (max-width: 760px) {\n    .discover-merge__container {\n        height: auto;\n        margin: 10px;\n        align-items: left;\n    }\n}\n\n@media (max-width: 500px) {\n    .discover-merge__container {\n        flex-direction: column;\n    }\n\n    .discover-merge__left {\n        width: 100%;\n        align-items: normal;\n    }\n}\n\n<\/style>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-why-do-we-need-a-theme-switcher\">Why do we need a Theme Switcher?<\/h2>\n\n\n\n<p>You don\u2019t have to be a white labeling web design agency or a large-scale company with several brands to make use of a theme switcher, you could be a sole developer wanting to quickly test a new color scheme. But, switching themes is sometimes no easy task. <\/p>\n\n\n\n<p>You don\u2019t want to be making multiple layouts of a single prototype just with different themes &#8211; that&#8217;s an incredibly tedious process just so you can test something.&nbsp;<\/p>\n\n\n\n<p>Using the <a href=\"https:\/\/material-ui.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">Material UI library<\/a>, we can explain this limitation. Material UI has themes already built into their components but UXPin (and many other prototyping tools) don&#8217;t have a unified dynamic way to switch between themes that can be used by both developers and designers.<\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-the-power-of-merge-designing-with-code-solution\">The power of Merge &#8211; designing with code solution<\/h2>\n\n\n\n<p>Merge gives you the freedom to design with \u2018real\u2019 production React code and vector-based tools together, breaking free of previous limitations. That\u2019s why Merge is powerful.<\/p>\n\n\n\n<p>You can make use of <a href=\"https:\/\/styled-components.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">Styled-components<\/a>. Styled components are the perfect solution to our problem as you can inject Javascript into the CSS to create editable theming capabilities.<\/p>\n\n\n\n<p>So, creating themes is easy.<\/p>\n\n\n\n<p>For each theme, create a file containing css values you want to inject into your styled components as properties. Then, from the list of imported themes, you can simply select the one you want and the styling of that theme will be passed as props to the html elements.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/UnizX-fc9WQleoNDTraALkwTiblkOXGZGmDpHtskcLeqWK80DgWvkaOQiBvu_1Jl7AKGNN0NbWOBQYbMfGPA_Z7K9gdQX1-rKbFhfccj2iVJlep0snd3k4LvV4iBttJi6mFqTQGa\" alt=\"\"\/><\/figure>\n\n\n\n<p>So, what if you just created files for each theme you wanted, import them into a wrapping theme switcher styled-component, and then pass those values down into each nested child component. Then, all you need to do is change the theme at the top-level component using the Javascript props injected into the Styled Components CSS.<\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-creating-a-theme-switcher-component\">Creating a Theme Switcher Component<\/h2>\n\n\n\n<p>First, we create a component named ThemeSwitcher, that functions as a top-level wrapper component, passing a selected theme\u2019s styles to all nested components. When components are nested in the ThemeSwitcher, you can dynamically switch between any imported themes &#8211; themes, which can completely change the look and feel of components, while keeping all their functionality.<\/p>\n\n\n\n<p>The code below shows the simplified structure of ThemeSwitcher and a breakdown of how it works will follow.<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\nimport blue from &quot;.\/themes\/blue&quot;;\nimport red from &quot;.\/themes\/red&quot;;\nimport dark from &quot;.\/themes\/dark&quot;;\nimport light from &quot;.\/themes\/light&quot;;\n \n \nfunction ThemeSwitcher(props) {\n let selectedTheme;\n \n function getTheme(themeProfile) {\n   switch (themeProfile) {\n     ...\n   }\n   return selectedTheme;\n }\n \n function makeCustomTheme() {\n   const customTheme = createMuiTheme({\n     ...\n   });\n   return customTheme;\n }\n \n return (\n   &lt;MuiThemeProvider theme={getTheme(props.themeProfile)}&gt;\n     {props.children}\n   &lt;\/MuiThemeProvider&gt;\n );\n}\n\n<\/pre><\/div>\n\n\n<p>As you can see, it\u2019s a simple React component using the Material UI\u2019s imported hooks, only two functions, and a return statement to pass the theme down as props.<\/p>\n\n\n\n<p>Inside the return statement, we have the <strong>MuiThemeProvider<\/strong> component. This is used as a wrapper component that passes the selected <strong>theme<\/strong> as props down to the child components.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-gettheme\">getTheme()<\/h3>\n\n\n\n<p>We created themes using <a href=\"https:\/\/material-ui.com\/customization\/theming\/#createmuitheme-options-args-theme\" target=\"_blank\" rel=\"noreferrer noopener\">Material UI\u2019s styling<\/a> guidelines, then imported them into the Theme Switcher component.<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\nimport blue from &quot;.\/themes\/blue&quot;;\nimport red from &quot;.\/themes\/red&quot;;\nimport dark from &quot;.\/themes\/dark&quot;;\nimport light from &quot;.\/themes\/light&quot;;\n\n<\/pre><\/div>\n\n\n<p>To keep track of which theme is selected, we pass a drop-down target value into the getTheme function and pass the result as a theme<strong> <\/strong>prop in the MuiThemeProvider component in the return statement.<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\nfunction getTheme(themeProfile) {\n   switch (themeProfile) {\n    \/\/ _.merge combines two themes together\n     case &quot;light&quot;:\n       selectedTheme = _.merge({}, igloo, light);\n       break;\n     case &quot;red&quot;:\n       selectedTheme = _.merge({}, igloo, red);\n       break;\n     case &quot;dark&quot;:\n     selectedTheme = dark;\n     break;\n     case &quot;custom&quot;:\n       selectedTheme = makeCustomTheme();\n       break;\n     case &quot;blue&quot;:\n       selectedTheme = selectedTheme;\n       break;\n     default:\n       selectedTheme = selectedTheme;\n   }\n   console.log(selectedTheme)\n   return selectedTheme;\n }\n\n<\/pre><\/div>\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\nreturn (\n   &lt;MuiThemeProvider theme={getTheme(props.themeProfile)}&gt;\n\n<\/pre><\/div>\n\n\n<p>When in the&nbsp; UXPin editor, this is what the theme selector menu populated from the getTheme function would look like.<\/p>\n\n\n\n<p><img loading=\"lazy\" decoding=\"async\" width=\"624\" height=\"249\" src=\"https:\/\/lh4.googleusercontent.com\/TyG_rXdiacqKoSev_glTS7PeFrLLK1A7p8z-SVSwzq9OVZxLTmZr8ujOTA6jsu1S58UwYZl4XP-gvBVQyEGsTxnKEghV2qtEG4DMT_0EIT-8vXCy5AYQaLi0j6oHaI2_Q2fqd0UJ\"><\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-makecustomtheme\">makeCustomTheme()<\/h3>\n\n\n\n<p>Not only do you have the option to import completed themes, but you can also create custom temporary themes within the UXPin editor. We\u2019ve only included a few properties such as primary and secondary colors for simplicity but you go into as much detail as you need.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh5.googleusercontent.com\/0Wq_fDWrSmhnMlkF2Dnlv06I3BgxkXqNKcTfVTnHHeizq_RAZAf501onwPhOHYf_aeQUQuzRJZg-zDr1Kh0nt0fXZP_RKYYf_WiVKFkLWq9m7b_51MZ2lkydK7ZXMiK_KAZ-goFd\" alt=\"\"\/><\/figure>\n\n\n\n<p>Below is the code of the makeCustomTheme function. This makes use of Material UI\u2019s built-in core function of createMuiTheme, which creates a theme based on options received.&nbsp;<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\nfunction makeCustomTheme() {\n   const customTheme = createMuiTheme({\n     ...selectedTheme,\n     palette: {\n       primary: {\n         main: props.primaryColor\n           ? props.primaryColor\n           : selectedTheme.palette.primary.main,\n       },\n       secondary: {\n         main: props.secondaryColor\n           ? props.secondaryColor\n           : selectedTheme.palette.secondary.main,\n       },\n       decoration: {\n         main: props.decorationColor\n           ? props.decorationColor\n           : selectedTheme.palette.decoration.main,\n       },\n       headerBadges: {\n         main: props.headerBadgesColor\n           ? props.headerBadgesColor\n           : selectedTheme.palette.headerBadges.main,\n       },\n     },\n   });\n   return customTheme;\n }\n\n<\/pre><\/div>\n\n\n<p>That concludes one way to include a dynamic Theme Switcher in your design system. Just a wrapper component (Theme Switcher) passing properties to nested child components, allowing you to dynamically change the theme without creating a new design system, page or layout.<\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-try-theme-switching-in-uxpin-merge\">Try Theme Switching in UXPin Merge<\/h2>\n\n\n\n<p>Using UXPin Merge gives you so much flexibility and creativity when comparing it with other design tools on the market.<\/p>\n\n\n\n<p>Focusing on a code-based, single source of truth for styling and functionality creates an interconnected system, bridging the gap between designer developer handoffs. Anything you can create in a React component, you can bring to life in your design system. You don\u2019t have to rely on 3rd party plugins or APIs to add important features to your design system. You\u2019re free to create dynamic and interactive prototypes while changing styles with a single command.\u00a0<\/p>\n\n\n\n<p>Want to find out more about Merge or would like to try it for yourself?<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"326\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2021\/03\/MergeAccess_wide_Blog-1024x326.png\" alt=\"\" class=\"wp-image-23833\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2021\/03\/MergeAccess_wide_Blog-1024x326.png 1024w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2021\/03\/MergeAccess_wide_Blog-700x223.png 700w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2021\/03\/MergeAccess_wide_Blog-768x244.png 768w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2021\/03\/MergeAccess_wide_Blog.png 1401w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<div class=\"wp-block-buttons\"><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Theme switching is an essential part of designing prototypes. Whether that be changing between a simple light and dark mode or testing several client\u2019s themes on a single prototype, it is something that all designers need to consider and have a well-thought-out process for. Furthermore, this need has become increasingly important with the adoption of<\/p>\n","protected":false},"author":3,"featured_media":24053,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3,440],"tags":[242,365,364,366],"class_list":["post-24044","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","category-merge","tag-merge","tag-theme-switcher","tag-theme-switching","tag-uxpin-merge"],"yoast_title":"%%title%% %%page%%: A Walk-Through","yoast_metadesc":"Theme switcher cuts down the time to test different themes and change the styles of your design. See how to switch themes quickly with Merge!","acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.4 (Yoast SEO v27.4) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Make Theme Switching Easy with UXPin Merge : A Walk-Through<\/title>\n<meta name=\"description\" content=\"Theme switcher cuts down the time to test different themes and change the styles of your design. See how to switch themes quickly with Merge!\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.uxpin.com\/studio\/blog\/theme-switching-merge\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Make Theme Switching Easy with UXPin Merge\" \/>\n<meta property=\"og:description\" content=\"Theme switcher cuts down the time to test different themes and change the styles of your design. See how to switch themes quickly with Merge!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.uxpin.com\/studio\/blog\/theme-switching-merge\/\" \/>\n<meta property=\"og:site_name\" content=\"Studio by UXPin\" \/>\n<meta property=\"article:published_time\" content=\"2021-03-25T01:00:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-06-13T03:50:26+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2021\/03\/1200x600_MergeThemeSwitcher.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"600\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"UXPin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@uxpin\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"UXPin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"10 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/theme-switching-merge\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/theme-switching-merge\\\/\"},\"author\":{\"name\":\"UXPin\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/e0326509b38ce2a3ce62e40ddde9cf8e\"},\"headline\":\"Make Theme Switching Easy with UXPin Merge\",\"datePublished\":\"2021-03-25T01:00:00+00:00\",\"dateModified\":\"2024-06-13T03:50:26+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/theme-switching-merge\\\/\"},\"wordCount\":909,\"image\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/theme-switching-merge\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2021\\\/03\\\/1200x600_MergeThemeSwitcher.png\",\"keywords\":[\"merge\",\"theme switcher\",\"theme switching\",\"uxpin merge\"],\"articleSection\":[\"Blog\",\"Merge by UXPin\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/theme-switching-merge\\\/\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/theme-switching-merge\\\/\",\"name\":\"Make Theme Switching Easy with UXPin Merge : A Walk-Through\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/theme-switching-merge\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/theme-switching-merge\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2021\\\/03\\\/1200x600_MergeThemeSwitcher.png\",\"datePublished\":\"2021-03-25T01:00:00+00:00\",\"dateModified\":\"2024-06-13T03:50:26+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/e0326509b38ce2a3ce62e40ddde9cf8e\"},\"description\":\"Theme switcher cuts down the time to test different themes and change the styles of your design. See how to switch themes quickly with Merge!\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/theme-switching-merge\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/theme-switching-merge\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/theme-switching-merge\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2021\\\/03\\\/1200x600_MergeThemeSwitcher.png\",\"contentUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2021\\\/03\\\/1200x600_MergeThemeSwitcher.png\",\"width\":1200,\"height\":600,\"caption\":\"MergeThemeSwitcher\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/theme-switching-merge\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Make Theme Switching Easy with UXPin Merge\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#website\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/\",\"name\":\"Studio by UXPin\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/e0326509b38ce2a3ce62e40ddde9cf8e\",\"name\":\"UXPin\",\"description\":\"UXPin is a web-based design collaboration tool. We\u2019re pleased to share our knowledge here.\",\"sameAs\":[\"http:\\\/\\\/www.uxpin.com\",\"https:\\\/\\\/x.com\\\/@uxpin\"],\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/author\\\/hello\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Make Theme Switching Easy with UXPin Merge : A Walk-Through","description":"Theme switcher cuts down the time to test different themes and change the styles of your design. See how to switch themes quickly with Merge!","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.uxpin.com\/studio\/blog\/theme-switching-merge\/","og_locale":"en_US","og_type":"article","og_title":"Make Theme Switching Easy with UXPin Merge","og_description":"Theme switcher cuts down the time to test different themes and change the styles of your design. See how to switch themes quickly with Merge!","og_url":"https:\/\/www.uxpin.com\/studio\/blog\/theme-switching-merge\/","og_site_name":"Studio by UXPin","article_published_time":"2021-03-25T01:00:00+00:00","article_modified_time":"2024-06-13T03:50:26+00:00","og_image":[{"width":1200,"height":600,"url":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2021\/03\/1200x600_MergeThemeSwitcher.png","type":"image\/png"}],"author":"UXPin","twitter_card":"summary_large_image","twitter_creator":"@uxpin","twitter_misc":{"Written by":"UXPin","Est. reading time":"10 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.uxpin.com\/studio\/blog\/theme-switching-merge\/#article","isPartOf":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/theme-switching-merge\/"},"author":{"name":"UXPin","@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/e0326509b38ce2a3ce62e40ddde9cf8e"},"headline":"Make Theme Switching Easy with UXPin Merge","datePublished":"2021-03-25T01:00:00+00:00","dateModified":"2024-06-13T03:50:26+00:00","mainEntityOfPage":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/theme-switching-merge\/"},"wordCount":909,"image":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/theme-switching-merge\/#primaryimage"},"thumbnailUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2021\/03\/1200x600_MergeThemeSwitcher.png","keywords":["merge","theme switcher","theme switching","uxpin merge"],"articleSection":["Blog","Merge by UXPin"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.uxpin.com\/studio\/blog\/theme-switching-merge\/","url":"https:\/\/www.uxpin.com\/studio\/blog\/theme-switching-merge\/","name":"Make Theme Switching Easy with UXPin Merge : A Walk-Through","isPartOf":{"@id":"https:\/\/www.uxpin.com\/studio\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/theme-switching-merge\/#primaryimage"},"image":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/theme-switching-merge\/#primaryimage"},"thumbnailUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2021\/03\/1200x600_MergeThemeSwitcher.png","datePublished":"2021-03-25T01:00:00+00:00","dateModified":"2024-06-13T03:50:26+00:00","author":{"@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/e0326509b38ce2a3ce62e40ddde9cf8e"},"description":"Theme switcher cuts down the time to test different themes and change the styles of your design. See how to switch themes quickly with Merge!","breadcrumb":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/theme-switching-merge\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.uxpin.com\/studio\/blog\/theme-switching-merge\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.uxpin.com\/studio\/blog\/theme-switching-merge\/#primaryimage","url":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2021\/03\/1200x600_MergeThemeSwitcher.png","contentUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2021\/03\/1200x600_MergeThemeSwitcher.png","width":1200,"height":600,"caption":"MergeThemeSwitcher"},{"@type":"BreadcrumbList","@id":"https:\/\/www.uxpin.com\/studio\/blog\/theme-switching-merge\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.uxpin.com\/studio\/"},{"@type":"ListItem","position":2,"name":"Make Theme Switching Easy with UXPin Merge"}]},{"@type":"WebSite","@id":"https:\/\/www.uxpin.com\/studio\/#website","url":"https:\/\/www.uxpin.com\/studio\/","name":"Studio by UXPin","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.uxpin.com\/studio\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/e0326509b38ce2a3ce62e40ddde9cf8e","name":"UXPin","description":"UXPin is a web-based design collaboration tool. We\u2019re pleased to share our knowledge here.","sameAs":["http:\/\/www.uxpin.com","https:\/\/x.com\/@uxpin"],"url":"https:\/\/www.uxpin.com\/studio\/author\/hello\/"}]}},"_links":{"self":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/24044","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/comments?post=24044"}],"version-history":[{"count":8,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/24044\/revisions"}],"predecessor-version":[{"id":53499,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/24044\/revisions\/53499"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/media\/24053"}],"wp:attachment":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/media?parent=24044"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/categories?post=24044"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/tags?post=24044"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}