https://adritian-demo-5dngu6x5m-adrianmoreno.vercel.app/tags/customization/Recent content in Customization on Demo site for Adritian - a high performance hugo theme by Adrián MorenoHugoenSat, 11 Apr 2026 09:00:00 +0000https://adritian-demo-5dngu6x5m-adrianmoreno.vercel.app/blog/color-schemes/Sat, 11 Apr 2026 09:00:00 +0000https://adritian-demo-5dngu6x5m-adrianmoreno.vercel.app/blog/color-schemes/<p>The theme ships with 7 named color schemes that replace the primary accent color across every component — links, buttons, tags, progress bars, focus rings, and skill bars — in both light and dark modes. No SCSS knowledge required.</p> <p>If you have the <a href="https://adritian-demo-5dngu6x5m-adrianmoreno.vercel.app/blog/color-schemes/#live-switcher">live switcher enabled</a>, you can try all the schemes right here in this post:</p> <div class="color-scheme-selector-shortcode my-3"> <div class="dropdown d-inline-block"> <button class="btn btn-outline-secondary dropdown-toggle d-inline-flex align-items-center gap-2" id="scheme-selector-shortcode-0" type="button" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false" aria-label='Color scheme'> <span class="current-scheme">Color scheme</span> </button> <ul class="dropdown-menu" aria-labelledby="scheme-selector-shortcode-0"> <li> <button type="button" class="dropdown-item d-flex align-items-center gap-2" data-scheme-value="default" aria-pressed="false" data-scheme-name="Default"> <span aria-hidden="true" role="presentation" style="display:inline-block;width:14px;height:14px;border-radius:50%;background-color:#478079;border:1px solid rgba(0,0,0,0.15);flex-shrink:0"></span> Default </button> </li> <li> <button type="button" class="dropdown-item d-flex align-items-center gap-2" data-scheme-value="forest" aria-pressed="false" data-scheme-name="Forest"> <span aria-hidden="true" role="presentation" style="display:inline-block;width:14px;height:14px;border-radius:50%;background-color:#2d7a3f;border:1px solid rgba(0,0,0,0.15);flex-shrink:0"></span> Forest </button> </li> <li> <button type="button" class="dropdown-item d-flex align-items-center gap-2" data-scheme-value="midnight" aria-pressed="false" data-scheme-name="Midnight"> <span aria-hidden="true" role="presentation" style="display:inline-block;width:14px;height:14px;border-radius:50%;background-color:#3f3d99;border:1px solid rgba(0,0,0,0.15);flex-shrink:0"></span> Midnight </button> </li> <li> <button type="button" class="dropdown-item d-flex align-items-center gap-2" data-scheme-value="ocean" aria-pressed="false" data-scheme-name="Ocean"> <span aria-hidden="true" role="presentation" style="display:inline-block;width:14px;height:14px;border-radius:50%;background-color:#1a6b8a;border:1px solid rgba(0,0,0,0.15);flex-shrink:0"></span> Ocean </button> </li> <li> <button type="button" class="dropdown-item d-flex align-items-center gap-2" data-scheme-value="rose" aria-pressed="false" data-scheme-name="Rose"> <span aria-hidden="true" role="presentation" style="display:inline-block;width:14px;height:14px;border-radius:50%;background-color:#b5495b;border:1px solid rgba(0,0,0,0.15);flex-shrink:0"></span> Rose </button> </li> <li> <button type="button" class="dropdown-item d-flex align-items-center gap-2" data-scheme-value="slate" aria-pressed="false" data-scheme-name="Slate"> <span aria-hidden="true" role="presentation" style="display:inline-block;width:14px;height:14px;border-radius:50%;background-color:#546e7a;border:1px solid rgba(0,0,0,0.15);flex-shrink:0"></span> Slate </button> </li> <li> <button type="button" class="dropdown-item d-flex align-items-center gap-2" data-scheme-value="warm" aria-pressed="false" data-scheme-name="Warm"> <span aria-hidden="true" role="presentation" style="display:inline-block;width:14px;height:14px;border-radius:50%;background-color:#c17817;border:1px solid rgba(0,0,0,0.15);flex-shrink:0"></span> Warm </button> </li> </ul> </div> </div> <hr> <h2 id="the-7-built-in-schemes">The 7 built-in schemes</h2> <p>Each scheme defines two hex values: a primary color for <strong>light mode</strong> and a brighter variant for <strong>dark mode</strong> (to maintain readability on dark backgrounds).</p>