https://introjs.com/_next/static/chunks/pages/docs/themes/install-654dd853a607d1f5.js

1(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[3675],{75641:function(t,e,o){(window.__NEXT_P=window.__NEXT_P||[]).push(["/docs/themes/install",function(){return o(16693)}])},16693:function(t,e,o){"use strict";o.r(e),o.d(e,{__toc:function(){return l}});var r=o(85893),i=o(45167),n=o(54294),s=o(59004);o(84759);var a=o(82643);let l=[];function d(t){let e=Object.assign({h1:"h1",p:"p",strong:"strong",pre:"pre",code:"code",span:"span"},(0,a.a)(),t.components);return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(e.h1,{children:"Install themes"}),"\n",(0,r.jsx)(e.p,{children:"IntroJS provides awesome templates, and we are trying to update and add more templates for next versions. You can browse all available themes under this category."}),"\n",(0,r.jsxs)(e.p,{children:["In order to use themes, all you need to do is appending the theme stylesheet to your page, ",(0,r.jsx)(e.strong,{children:"after"})," IntroJS CSS file:"]}),"\n",(0,r.jsx)(e.pre,{"data-language":"html","data-theme":"default",hasCopyCode:!0,children:(0,r.jsxs)(e.code,{"data-language":"html","data-theme":"default",children:[(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:"<!-- Add IntroJs styles -->"})}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"<"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"link"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"href"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"../../introjs.css"'}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"rel"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"stylesheet"'}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]}),"\n",(0,r.jsx)(e.span,{className:"line",children:" "}),"\n",(0,r.jsx)(e.span,{className:"line",children:(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-comment)"},children:"<!-- Add Nazanin template -->"})}),"\n",(0,r.jsxs)(e.span,{className:"line",children:[(0,r.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:"<"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:"link"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"href"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"../../themes/introjs-nazanin.css"'}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:" "}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-function)"},children:"rel"}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"stylesheet"'}),(0,r.jsx)(e.span,{style:{color:"var(--shiki-color-text)"},children:">"})]})]})})]})}let c={MDXContent:function(){let t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:e}=Object.assign({},(0,a.a)(),t.components);return e?(0,r.jsx)(e,{...t,children:(0,r.jsx)(d,{...t})}):d(t)},pageOpts:{filePath:"pages/docs/themes/install.md",route:"/docs/themes/install",frontMatter:{title:"Install themes",description:"How to install themes in IntroJS"},timestamp:1784724577e3,pageMap:[{kind:"Meta",data:{homepage:{type:"page",title:"Homepage",href:"/"},docs:{type:"page",title:"Docs",href:"/docs",display:"hidden"},"/docs/getting-started/start":{type:"page",title:"Quick Start",href:"/docs/getting-started/start"},"docs/support":{type:"page",title:"Support",href:"/docs/support"},blog:{type:"page",title:"Blog",href:"/blog"}}},{kind:"Folder",name:"docs",route:"/docs",children:[{kind:"Meta",data:{index:"Introduction","getting-started":"Getting Started",tour:"Tour",hints:"Hints",themes:"Themes",wrappers:"Wrappers",developers:"Developers",migration:"Migration","-- More":{type:"separator",title:"More"},API:{title:"API",href:"/docs/api",newWindow:!0},community:"Community",support:"Support"}},{kind:"MdxPage",name:"community",route:"/docs/community",frontMatter:{title:"Community",description:"Get help from the community"}},{kind:"Folder",name:"developers",route:"/docs/developers",children:[{kind:"MdxPage",name:"build",route:"/docs/developers/build",frontMatter:{title:"Build Intro.js",description:"Build Intro.js from source code"}},{kind:"MdxPage",name:"changelog",route:"/docs/developers/changelog",frontMatter:{title:"Intro.js Changelog",description:"Intro.js Changelog"}},{kind:"Meta",data:{build:"Build Intro.js",changelog:"Intro.js Changelog"}}]},{kind:"Folder",name:"getting-started",route:"/docs/getting-started",children:[{kind:"Meta",data:{install:"Install Intro.js",start:"Quick Start",license:"License"}},{kind:"MdxPage",name:"install",route:"/docs/getting-started/install",frontMatter:{title:"Install Intro.js",description:"How to install Intro.js and get started"}},{kind:"MdxPage",name:"license",route:"/docs/getting-started/license",frontMatter:{title:"License",description:"Intro.js commercial and open-source License"}},{kind:"MdxPage",name:"start",route:"/docs/getting-started/start",frontMatter:{id:"start",title:"Quick Start",description:"A simple way to add a basic tours and hints to your page"}}]},{kind:"Folder",name:"hints",route:"/docs/hints",children:[{kind:"Meta",data:{examples:"Examples",api:{type:"page",title:"Hints API",href:"/docs/api/classes/packages_hint_hint.Hint.html",newWindow:!0},attributes:{type:"page",title:"Hints HTML Attributes",href:"/docs/api/modules/packages_hint_dataAttributes.html",newWindow:!0},options:{type:"page",title:"Hints Options",href:"/docs/api/interfaces/packages_hint_option.HintOptions.html",newWindow:!0}}},{kind:"MdxPage",name:"api",route:"/docs/hints/api",frontMatter:{title:"Hint API",description:"API documentation for the hint feature in Intro.js"}},{kind:"MdxPage",name:"attributes",route:"/docs/hints/attributes",frontMatter:{title:"Hints HTML Attributes",description:"HTML attributes for managing hint elements in Intro.js"}},{kind:"Folder",name:"examples",route:"/docs/hints/examples",children:[{kind:"MdxPage",name:"hello-world",route:"/docs/hints/examples/hello-world",frontMatter:{title:"Hints Hello World",description:"Add hints to your page using HTML attributes",keywords:["javascript","tour","guide"]}},{kind:"Meta",data:{"hello-world":"Hints Hello World"}}]},{kind:"MdxPage",name:"options",route:"/docs/hints/options",frontMatter:{title:"Hints options",description:"Options for managing hint elements in Intro.js"}}]},{kind:"MdxPage",name:"index",route:"/docs",frontMatter:{title:"Intro.js Documentation",description:"Intro.js is a lightweight library for creating step-by-step introductions for your products.",slug:"/"}},{kind:"Folder",name:"migration",route:"/docs/migration",children:[{kind:"MdxPage",name:"introjs-v8-migration",route:"/docs/migration/introjs-v8-migration",frontMatter:{title:"Migration Guide",description:"Migration Guide Intro.js v8"}},{kind:"Meta",data:{"introjs-v8-migration":"Migration Guide"}}]},{kind:"MdxPage",name:"support",route:"/docs/support",frontMatter:{title:"Support",description:"Get support for Intro.js"}},{kind:"Folder",name:"themes",route:"/docs/themes",children:[{kind:"MdxPage",name:"install",route:"/docs/themes/install",frontMatter:{title:"Install themes",description:"How to install themes in IntroJS"}},{kind:"MdxPage",name:"list",route:"/docs/themes/list",frontMatter:{title:"Intro.js Themes",description:"A list of awesome custom templates available for Intro.js"}},{kind:"Meta",data:{install:"Install themes",list:"Intro.js Themes"}}]},{kind:"Folder",name:"tour",route:"/docs/tour",children:[{kind:"Meta",data:{examples:"Examples",api:{title:"Tour API",href:"/docs/api/classes/packages_tour_tour.Tour.html",type:"page",newWindow:!0},attributes:{title:"Tour HTML Attributes",href:"/docs/api/modules/packages_tour_dataAttributes.html",type:"page",newWindow:!0},options:{title:"Tour Options",href:"/docs/api/interfaces/packages_tour_option.TourOptions.html",type:"page",newWindow:!0}}},{kind:"MdxPage",name:"api",route:"/docs/tour/api",frontMatter:{title:"Tour API",description:"API documentation for the tour feature in Intro.js"}},{kind:"MdxPage",name:"attributes",route:"/docs/tour/attributes",frontMatter:{title:"Tour HTML Attributes",description:"HTML attributes for managing tour elements in Intro.js"}},{kind:"Folder",name:"examples",route:"/docs/tour/examples",children:[{kind:"MdxPage",name:"async-await",route:"/docs/tour/examples/async-await",frontMatter:{title:"Async/Await callbacks",de

1scription:"Using async/await callbacks in Intro.js",keywords:["javascript","tour","guide","async","await","promise"]}},{kind:"MdxPage",name:"confirm-before-exit",route:"/docs/tour/examples/confirm-before-exit",frontMatter:{title:"Confirm before exit",description:"Get a confirmation before closing the tour",keywords:["javascript","tour","guide"]}},{kind:"MdxPage",name:"css-class",route:"/docs/tour/examples/css-class",frontMatter:{title:"CSS ClassName",description:"Customize your product tour using the `tooltipClass` option",keywords:["javascript","tour","guide"]}},{kind:"MdxPage",name:"disable-interaction",route:"/docs/tour/examples/disable-interaction",frontMatter:{title:"Disable element interaction",description:"Disable interactions with elements inside the highlighted box",keywords:["javascript","tour","guide"]}},{kind:"MdxPage",name:"dont-show-again",route:"/docs/tour/examples/dont-show-again",frontMatter:{title:"Don't Show Again",description:'Display the "Don\'t Show Again" checkbox in your product tour',keywords:["javascript","tour","guide","dont-show-again"]}},{kind:"MdxPage",name:"floating-tooltip",route:"/docs/tour/examples/floating-tooltip",frontMatter:{title:"Floating tooltip",description:"Create floating tooltips that don't highlight a specific element",keywords:["javascript","tour","guide"]}},{kind:"MdxPage",name:"hello-world",route:"/docs/tour/examples/hello-world",frontMatter:{title:"Tour Hello World",description:"Create your product tour using data-intro and data-title HTML attributes",keywords:["javascript","tour","guide"]}},{kind:"MdxPage",name:"html-tooltip",route:"/docs/tour/examples/html-tooltip",frontMatter:{title:"HTML in tooltip",description:"Use HTML tags in the tooltip content",keywords:["javascript","tour","guide"]}},{kind:"MdxPage",name:"json-config",route:"/docs/tour/examples/json-config",frontMatter:{title:"JSON configuration",description:"Define your tour settings using JSON",keywords:["javascript","tour","guide"]}},{kind:"MdxPage",name:"localization",route:"/docs/tour/examples/localization",frontMatter:{title:"Localization (i18n)",description:"Use the `language` option to localize your product tour with built-in language support",keywords:["javascript","tour","guide","localization","i18n","internationalization","language"]}},{kind:"MdxPage",name:"progress-bar",route:"/docs/tour/examples/progress-bar",frontMatter:{title:"Progress bar",description:"Show a progress bar at the top of the page",keywords:["javascript","tour","guide"]}},{kind:"MdxPage",name:"rtl",route:"/docs/tour/examples/rtl",frontMatter:{title:"Right-to-left tour",description:"Intro.js supports RTL by default. Simply include `introjs-rtl.css` and customize buttons.",keywords:["javascript","tour","guide"]}},{kind:"MdxPage",name:"scrollable-element",route:"/docs/tour/examples/scrollable-element",frontMatter:{title:"Scrollable element",description:"Highlight elements inside a scrollable element",keywords:["javascript","tour","guide"]}},{kind:"MdxPage",name:"svg",route:"/docs/tour/examples/svg",frontMatter:{title:"Tour for SVG elements",description:"Create a product tour using SVG elements",keywords:["javascript","tour","guide"]}},{kind:"MdxPage",name:"tooltip-positions",route:"/docs/tour/examples/tooltip-positions",frontMatter:{title:"Tooltip positions",description:"Define the position of the tooltip",keywords:["javascript","tour","guide"]}},{kind:"MdxPage",name:"without-bullets",route:"/docs/tour/examples/without-bullets",frontMatter:{title:"Tour without bullets",description:"Use the `showBullets` flag to show/hide the bullets in your product tour",keywords:["javascript","tour","guide"]}},{kind:"MdxPage",name:"without-buttons",route:"/docs/tour/examples/without-buttons",frontMatter:{title:"Tour without buttons",description:"Use the `showButtons` flag to show/hide all buttons in your product tour",keywords:["javascript","tour","guide"]}},{kind:"Meta",data:{"async-await":"Async/Await callbacks","confirm-before-exit":"Confirm before exit","css-class":"CSS ClassName","disable-interaction":"Disable element interaction","dont-show-again":"Don't Show Again","floating-tooltip":"Floating tooltip","html-tooltip":"HTML in tooltip","json-config":"JSON configuration",localization:"Localization (i18n)","progress-bar":"Progress bar",rtl:"Right-to-left tour","scrollable-element":"Scrollable element","tooltip-positions":"Tooltip positions",svg:"Tour for SVG elements","hello-world":"Tour Hello World","without-bullets":"Tour without bullets","without-buttons":"Tour without buttons"}}]},{kind:"MdxPage",name:"options",route:"/docs/tour/options",frontMatter:{title:"Tour options",description:"Options for managing tour elements in Intro.js"}}]},{kind:"Folder",name:"wrappers",route:"/docs/wrappers",children:[{kind:"MdxPage",name:"R",route:"/docs/wrappers/R",frontMatter:{title:"Intro.js R",description:"R wrapper for Intro.js"}},{kind:"MdxPage",name:"add",route:"/docs/wrappers/add",frontMatter:{title:"Add your Intro.js wrapper",description:"Add your Intro.js wrapper to this list"}},{kind:"MdxPage",name:"angularjs",route:"/docs/wrappers/angularjs",frontMatter:{title:"Intro.js Angular",description:"AngularJS service and directives for Intro.js"}},{kind:"MdxPage",name:"dart",route:"/docs/wrappers/dart",frontMatter:{title:"Intro.js Dart",description:"Dart wrapper for Intro.js"}},{kind:"MdxPage",name:"drupal",route:"/docs/wrappers/drupal",frontMatter:{title:"Intro.js Drupal",description:"Drupal wrapper for Intro.js"}},{kind:"MdxPage",name:"ember",route:"/docs/wrappers/ember",frontMatter:{title:"Intro.js Ember",description:"Ember wrapper for Intro.js"}},{kind:"MdxPage",name:"gwt",route:"/docs/wrappers/gwt",frontMatter:{title:"Intro.js GWT",description:"GWT wrapper on top of Intro.js"}},{kind:"MdxPage",name:"magento",route:"/docs/wrappers/magento",frontMatter:{title:"Intro.js Magento",description:"Magento wrapper for Intro.js"}},{kind:"MdxPage",name:"rails",route:"/docs/wrappers/rails",frontMatter:{title:"Intro.js Rails",description:"Rails wrapper for Intro.js"}},{kind:"MdxPage",name:"react",route:"/docs/wrappers/react",frontMatter:{title:"Intro.js React",description:"React wrapper for Intro.js"}},{kind:"MdxPage",name:"wordpress",route:"/docs/wrappers/wordpress",frontMatter:{title:"Intro.js Wordpress",description:"Wordpress wrapper for Intro.js"}},{kind:"MdxPage",name:"yii",route:"/docs/wrappers/yii",frontMatter:{title:"Intro.js Yii",description:"Yii wrapper for Intro.js"}},{kind:"MdxPage",name:"yii2",route:"/docs/wrappers/yii2",frontMatter:{title:"Intro.js Yii2",description:"Yii2 wrapper for Intro.js"}},{kind:"Meta",data:{add:"Add your Intro.js wrapper",angularjs:"Intro.js Angular",dart:"Intro.js Dart",drupal:"Intro.js Drupal",ember:"Intro.js Ember",gwt:"Intro.js GWT",magento:"Intro.js Magento",R:"Intro.js R",rails:"Intro.js Rails",react:"Intro.js React",wordpress:"Intro.js Wordpress",yii:"Intro.js Yii",yii2:"Intro.js Yii2"}}]}]}],flexsearch:{codeblocks:!0},title:"Install themes",headings:l},pageNextRoute:"/docs/themes/install",nextraLayout:n.ZP,themeConfig:s.Z};e.default=(0,i.j)(c)},59004:function(t,e,o){"use strict";var r=o(85893),i=o(11163),n=o(54294);e.Z={logo:(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)("img",{src:"/img/logo.svg",width:"37px",height:"32px",style:{marginRight:"5px"}}),(0,r.jsxs)("span",{children:[(0,r.jsx)("b",{children:"Intro.js"})," documentation"]})]}),primaryHue:220,primarySaturation:65,docsRepositoryBase:"https://github.com/usablica/intro.js",editLink:{component:null},project:{link:"https://github.com/usablica/intro.js"},useNextSeoProps(){let{route:t,asPath:e}=(0,i.useRouter)(),{frontMatter:o}=(0,n.ZR)(),r=o.description||"Create step-by-step product tours, user onboarding guides easily. Intro.js is a lightweight, open-source user onboarding library. Get started for free!",s=o.title?o.title+" – Intro.js":"Intro.js",a="https://introjs.com"+e,l="/"!==t&&s?"https://introjs.com/api/og?title=".concat(s):"https://introjs.com/img/social.png";return{titleTemplate:"%s – Intro.js Docs",description:o.description,canonical:a,themeColor:"#0070f3",openGraph:{type:"website",url:a,title:s,description:r,locale:"en_US",site:"introjs.com",images:[{url:l,alt:s,type:"image/jpeg"}],siteName:"introjs.com"},twitter:{handle:"@usablica",title:s,description:r,site:"introjs.com",url:a,cardType:"summary_large_image",image:l}}},sidebar:{titleComponent(t){let{title:e,type:o}=t;return"separator"===o?(0,r.jsx)("span",{className:"cursor-default",children:e}):(0,r.jsx)(r.Fragment,{children:e})},defaultMenuCollapseLevel:1,toggleButton:!0},footer:{text:(0,r.jsxs)("span",{children:[new Date().getFullYear()," \xa9"," ",(0,r.jsx)("a",{href:"https://introjs.com",target:"_blank",children:"Intro.js"}),"."]})},toc:{backToTop:!0},head:function(){let{route:t,asPath:e}=(0,i.useRouter)(),{frontMatter:o}=(0,n.ZR)(),s=o.description||"Create step-by-step product tours, user onboarding guides easily. Intro.js is a lightweight, open-source user onboarding library. Get started for free!",a=o.title?o.title+" – Intro.js":"Intro.js",l="/"!==t&&a?"https://introjs.com/api/og?title=".concat(a):"https://introjs.com/img/social.png";return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)("meta",{name:"viewport",content:"width=device-width, initial-scale=1.0"}

1),(0,r.jsx)("meta",{httpEquiv:"Content-Language",content:"en"}),(0,r.jsx)("meta",{name:"apple-mobile-web-app-title",content:"Intro.js"}),(0,r.jsx)("link",{rel:"shortcut icon",href:"/img/favicon.ico"}),(0,r.jsx)("link",{rel:"icon",type:"image/png",href:"/img/favicon.ico"}),(0,r.jsx)("link",{rel:"apple-touch-icon",href:"/img/favicon.ico"}),(0,r.jsx)("meta",{name:"twitter:title",content:a}),(0,r.jsx)("meta",{name:"twitter:description",content:s}),(0,r.jsx)("meta",{name:"twitter:image",content:l}),(0,r.jsx)("meta",{name:"twitter:url",content:"https://introjs.com"+e}),(0,r.jsx)("script",{src:"https://cdn.jsdelivr.net/npm/[email protected]/intro.min.js",defer:!0}),(0,r.jsx)("link",{rel:"stylesheet",href:"https://cdn.jsdelivr.net/npm/[email protected]/introjs.css"})]})}}},15789:function(){}},function(t){t.O(0,[3996,5675,5098,2888,9774,179],function(){return t(t.s=75641)}),_N_E=t.O()}]);