Styling
We recommend you customize your theme styles using the user style files. You can customize the theme’s styles with the following approaches:
Webpack based workflow
<div class="border rounded-1 bg-white px-3 py-2 mb-3"><code>user.scss</code></div>
<p class="mb-0">You can add your own SCSS and override the theme style in the <code>src/scss/user.scss</code> file.</p>
<div class="border-dashed-bottom my-3"></div>
<div class="border rounded-1 bg-white px-3 py-2 mt-4 mb-3"><code>_user-variables.scss</code></div>
<p class="mb-0">To make broader changes to the design of the theme, such as changing the color scheme or font sizes, use <code>src/scss/_user-variables.scss</code>. Any variable from <code>node_modules/bootstrap/scss/variables</code> or <code>src/scss/theme/_variables.scss</code> can be overridden with your own value.</p>
<div class="border-dashed-bottom my-3"></div>
<div class="border rounded-1 bg-white px-3 py-2 mt-4 mb-3"><code>_bootstrap.scss</code></div>
<p class="mb-0">To remove bootstrap components, update<code>src/scss/_bootstrap.scss</code> file.</p>
user.scss
You can add your own SCSS and override the theme style in the src/scss/user.scss
file.
_user-variables.scss
To make broader changes to the design of the theme, such as changing the color scheme or font sizes, use src/scss/_user-variables.scss
. Any variable from node_modules/bootstrap/scss/variables
or src/scss/theme/_variables.scss
can be overridden with your own value.
_bootstrap.scss
To remove bootstrap components, updatesrc/scss/_bootstrap.scss
file.
If you are not using Webpack based workflow
<div class="border rounded-1 bg-white px-3 py-2 mb-3"><code>user.css</code></div>
<p class="mb-0">You can add your own CSS and override the theme style in the <code>public/assets/css/user.css</code> file.</p>
user.css
You can add your own CSS and override the theme style in the public/assets/css/user.css
file.