<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

Documentation DAM

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 | AesirX DAM

AESIRX DAM BROCHURE

Want to read more about AesirX DAM

UI Blog DAM

All your documentation and user guides needed to get  set up with AesirX Digital Asset Management Platform

Documentation

UI Documentation DAM

Docs Banner

Documentation and user guides | AesirX DAM

Documentation

How to customize your theme

Want to read more about AesirX DAM