<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>
<h4><img src="https/api.aesirx.io/images/sidebar.png" alt="Docs_1_img_10.png" width="1200" height="848" /></h4>
<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="https/api.aesirx.io/images/bar.png" alt="Docs_1_img_8.png" width="1200" height="582" /></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="https/api.aesirx.io/images/list.png" alt="Docs_1_img_7.png" width="1200" height="598" /></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>6. Button</h4>
<p><img src="https/api.aesirx.io/images/btn.png" alt="Docs_1_img_3.png" width="1200" height="350" /></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>9. Input</h4>
<p><img src="https/api.aesirx.io/images/input.png" alt="Docs_1_img_2.png" width="598" height="260" /></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

How to customize your theme on AesirX DAM will include simple, easy-to-understand steps with lots of detail images to set up the tool efficiently

How to customize your theme

Want to read more about AesirX DAM