<p>Use our guide to easily customize your theme to match your tastes. It’s straightforward and doesn’t require any programming experience. Just follow the step-by-step instructions.</p>
<h2>Step 1: Create a new theme</h2>
<p>Create a new file <strong>.scss in src/themes</strong></p>
<p>Note: Replace <span style="background-color: #ffff00;">[your-theme]</span> with the filename you created.</p>
<p><samp><em class="mb-0"><span style="color: #9cdcfe;">src/themes/[your-theme].scss</span></em><br />[<span style="color: #9cdcfe;">data-theme</span>=<span style="color: #ce9178;">'[your-theme]'</span>] { <br />}</samp></p>
<h2>Step 2: Import your theme</h2>
<p>Import your scss file in <strong>src/themes/index.scss.</strong></p>
<p><samp><em class="mb-0"><span style="color: #9cdcfe;">src/themes/index.scss</span></em><br /><span style="color: #c586c0;">@import</span> <span style="color: #ce9178;">'./themes.scss'</span>; <br /><span style="color: #c586c0;">@import</span> <span style="color: #ce9178;">'./dark.scss'</span>; <br /><span style="color: #6a9955;">//Import your scss file here</span> <br /><span style="color: #c586c0;">@import</span> <span style="color: #ce9178;">'./[your-theme].scss'</span>;</samp></p>
<h2>Step 3: Add your theme to list</h2>
<p>Add your theme and color in <strong>src/themes/list.scss</strong> to show in UI.</p>
<p><samp><em class="mb-0"><span style="color: #9cdcfe;">src/themes/list.scss</span></em><br /><span style="color: #9cdcfe;">$list-themes</span>: ( <br />&nbsp; <span style="color: #4ec9b0;">light</span>: <span style="color: #ce9178;">#fff</span>, <br />&nbsp; <span style="color: #4ec9b0;">dark</span>: <span style="color: #ce9178;">#000</span>, <br />&nbsp; <span style="color: #6a9955;">// Add your theme and color should be shown</span> <br />&nbsp; <span style="color: #4ec9b0;">[your-theme]</span>: <span style="color: #ce9178;">#4d3024</span>, <br />);</samp></p>
<h2>Step 4: Customize your theme</h2>
<p>Add variable and color in <strong>src/themes/[your-theme].scss</strong> to custom color.</p>
<p>Example:</p>
<p><samp><em class="mb-0"><span style="color: #9cdcfe;">src/themes/[your-theme].scss</span></em><br />[<span style="color: #9cdcfe;">data-theme</span>=<span style="color: #ce9178;">'[your-theme]'</span>] { <br /> <span style="color: #6a9955;">&nbsp; // Add variable and color to change theme <br />&nbsp; // Change navbar background color</span> <br /> <span style="color: #9cdcfe;">&nbsp; --nav-bg</span>: <span style="color: #ce9178;">#fff</span>; <span style="color: #6a9955;">// Remember to add a semicolon at the end of each line.</span> <br /> <span style="color: #6a9955;">&nbsp; // Can use hexadecimal color, hsl color, rgb color or color name <br />&nbsp; // add more variable here</span> <br />}</samp></p>
<h4>1. Sidebar</h4>
<p><img src="images/Docs_1_img_10.png" alt="Docs_1_img_10.png" width="486" height="529" /></p>
<table>
<tbody>
<tr>
<td><strong>Sidebar background</strong></td>
<td>--sidebar-bg</td>
</tr>
<tr>
<td><strong>Sidebar menu text </strong></td>
<td>--sidebar-menu-item-color</td>
</tr>
<tr>
<td><strong>Sidebar menu active background</strong></td>
<td>--sidebar-menu-item-hover-bg</td>
</tr>
</tbody>
</table>
<h4>2. Navbar &amp; shadow</h4>
<p><img src="images/Docs_1_img_8.png" alt="Docs_1_img_8.png" width="1036" height="330" /></p>
<table>
<tbody>
<tr>
<td><strong>Navbar background</strong></td>
<td>--nav-bg</td>
</tr>
<tr>
<td><strong>Shadow color</strong></td>
<td>--box-shadow-color</td>
</tr>
</tbody>
</table>
<h4>3. Text, Border, Background color default &amp; Tab view</h4>
<p><img src="images/Docs_1_img_7.png" alt="Docs_1_img_7.png" width="855" height="377" /></p>
<table>
<tbody>
<tr>
<td>
<p><strong>Default background</strong></p>
</td>
<td>--body-bg</td>
</tr>
<tr>
<td><strong>Default text </strong></td>
<td>--body-color</td>
</tr>
<tr>
<td><strong>Border default</strong></td>
<td>--border-color</td>
</tr>
<tr>
<td><strong>Title</strong></td>
<td>--text-title-color</td>
</tr>
<tr>
<td><strong>Content background </strong></td>
<td>--content-bg</td>
</tr>
<tr>
<td><strong>Active view background</strong></td>
<td>--view-active-bg</td>
</tr>
</tbody>
</table>
<h4>4. Channels Categories</h4>
<p><img src="images/Docs_1_img_1.png" alt="Docs_1_img_1.png" width="693" height="172" /></p>
<table>
<tbody>
<tr>
<td><strong>Channel item color</strong></td>
<td>--categories-channels-color</td>
</tr>
<tr>
<td><strong>Channel item active color</strong></td>
<td>--categories-channels-active-color</td>
</tr>
</tbody>
</table>
<h4>5. Calendar &amp; Event</h4>
<p><img src="images/Docs_1_img_9.png" alt="Docs_1_img_9.png" width="903" height="444" /></p>
<table>
<tbody>
<tr>
<td><strong>Calendar background</strong></td>
<td>--calendar-bg</td>
</tr>
<tr>
<td><strong>Calendar text</strong></td>
<td>--calendar-color</td>
</tr>
<tr>
<td><strong>Calendar border color</strong></td>
<td>--calendar-border-color</td>
</tr>
<tr>
<td><strong>Calendar header title</strong></td>
<td>--calendar-header-color</td>
</tr>
<tr>
<td><strong>Calendar backgroundCalendar header background</strong></td>
<td>--calendar-header-bg</td>
</tr>
<tr>
<td><strong>Calendar today background</strong></td>
<td>--calendar-today-bg</td>
</tr>
<tr>
<td><strong>Calendar out range text</strong></td>
<td>--calendar-outrange-color</td>
</tr>
<tr>
<td><strong>Calendar out range background</strong></td>
<td>--calendar-outrange-bg</td>
</tr>
<tr>
<td><strong>Event text</strong></td>
<td>--event-color</td>
</tr>
<tr>
<td><strong>Event background</strong></td>
<td>--event-bg</td>
</tr>
</tbody>
</table>
<h4>6. Button</h4>
<p><img src="images/Docs_1_img_3.png" alt="Docs_1_img_3.png" width="754" height="321" /></p>
<table>
<tbody>
<tr>
<td><strong>Button green text </strong></td>
<td>--btn-green-color</td>
</tr>
<tr>
<td><strong>Button green background</strong></td>
<td>--btn-green-bg</td>
</tr>
<tr>
<td><strong>Button white text</strong></td>
<td>--btn-action-color</td>
</tr>
<tr>
<td><strong>Button white background</strong></td>
<td>--btn-action-bg</td>
</tr>
<tr>
<td><strong>Button outline gray text</strong></td>
<td>--btn-outline-secondary-color</td>
</tr>
<tr>
<td><strong>Button outline gray background</strong></td>
<td>--btn-outline-secondary-bg</td>
</tr>
</tbody>
</table>
<h4>7. Datepicker</h4>
<p><img src="images/Docs_1_img_5.png" alt="Docs_1_img_5.png" width="776" height="471" /></p>
<table>
<tbody>
<tr>
<td><strong>Datepicker text</strong></td>
<td>--date-picker-color</td>
</tr>
<tr>
<td><strong>Datepicker background</strong></td>
<td>--date-picker-bg</td>
</tr>
<tr>
<td><strong>Datepicker header text</strong></td>
<td>--date-picker-header-color</td>
</tr>
<tr>
<td><strong>Datepicker header background</strong></td>
<td>--date-picker-header-bg</td>
</tr>
<tr>
<td><strong>Datepicker selected background</strong></td>
<td>--date-picker-selected</td>
</tr>
<tr>
<td><strong>Datepicker disabled text</strong></td>
<td>--date-picker-disabled-color</td>
</tr>
</tbody>
</table>
<h4>8. Dropdown</h4>
<p><img src="images/Docs_1_img_6.png" alt="Docs_1_img_6.png" width="332" height="317" /></p>
<table>
<tbody>
<tr>
<td><strong>Dropdown background</strong></td>
<td>&nbsp;--dropdown-bg</td>
</tr>
<tr>
<td><strong>Dropdown item text</strong></td>
<td>--dropdown-item-color</td>
</tr>
<tr>
<td><strong>Dropdown item active background</strong></td>
<td>--dropdown-item-hover-bg</td>
</tr>
</tbody>
</table>
<h4>9. Input</h4>
<p><img src="images/Docs_1_img_2.png" alt="Docs_1_img_2.png" width="467" height="221" /></p>
<table>
<tbody>
<tr>
<td><strong>Input disabled</strong></td>
<td>--input-disabled-bg</td>
</tr>
</tbody>
</table>
<p>&nbsp;</p>

How to customize your theme

Documentation DMA

With simple step-by-step instructions, customizing your theme to match your tastes will be much more straightforward

AesirX DMA | How to customize your theme

AESIRX DMA BROCHURE

Want to read more about AesirX DMA

UI Blog DMA

All your documentation and user guides needed to get  set up with AesirX Digital Marketing Automation Platform

Documentation

UI Documentation DMA

Docs Banner

AesirX DMA | Documentation and user guides

Documentation

How to customize your theme

Want to read more about AesirX DMA