mirror of
https://github.com/Lissy93/dashy.git
synced 2026-03-24 13:43:41 +01:00
150 lines
No EOL
52 KiB
HTML
150 lines
No EOL
52 KiB
HTML
<!doctype html>
|
||
<html lang="en" dir="ltr" class="docs-wrapper plugin-docs plugin-id-default docs-version-current docs-doc-page docs-doc-id-theming" data-has-hydrated="false">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="generator" content="Docusaurus v3.9.2">
|
||
<title data-rh="true">Theming | Dashy</title><meta data-rh="true" name="viewport" content="width=device-width,initial-scale=1"><meta data-rh="true" property="og:locale" content="en"><meta data-rh="true" name="docusaurus_locale" content="en"><meta data-rh="true" name="docsearch:language" content="en"><meta data-rh="true" name="keywords" content="dashy, dashboard, homelab, self-hosted, docker, homepage"><meta data-rh="true" property="og:type" content="website"><meta data-rh="true" property="og:url" content="https://dashy.to"><meta data-rh="true" property="og:image" content="https://dashy.to/img/dashy.png"><meta data-rh="true" name="twitter:card" content="summary_large_image"><meta data-rh="true" name="twitter:title" content="Dashy — The Ultimate Homepage for your Homelab"><meta data-rh="true" name="twitter:description" content="Dashy is a self-hosted dashboard app for your homelab. Manage all your services, with status checks, widgets, themes and more."><meta data-rh="true" name="twitter:image" content="https://dashy.to/img/dashy.png"><meta data-rh="true" name="docusaurus_version" content="current"><meta data-rh="true" name="docusaurus_tag" content="docs-default-current"><meta data-rh="true" name="docsearch:version" content="current"><meta data-rh="true" name="docsearch:docusaurus_tag" content="docs-default-current"><meta data-rh="true" property="og:title" content="Theming | Dashy"><meta data-rh="true" name="description" content="By default Dashy comes with 25+ built-in themes, which can be applied from the dropdown menu in the UI."><meta data-rh="true" property="og:description" content="By default Dashy comes with 25+ built-in themes, which can be applied from the dropdown menu in the UI."><link data-rh="true" rel="icon" href="/img/favicon.ico"><link data-rh="true" rel="canonical" href="https://dashy.to/docs/theming"><link data-rh="true" rel="alternate" href="https://dashy.to/docs/theming" hreflang="en"><link data-rh="true" rel="alternate" href="https://dashy.to/docs/theming" hreflang="x-default"><script data-rh="true" type="application/ld+json">{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Theming","item":"https://dashy.to/docs/theming"}]}</script><link rel="preconnect" href="https://pixelflare.cc">
|
||
<link rel="preconnect" href="https://cdn.as93.net">
|
||
<link rel="dns-prefetch" href="https://api.github.com">
|
||
<link rel="dns-prefetch" href="https://no-track.as93.net">
|
||
<script type="application/ld+json">{"@context":"https://schema.org","@type":"WebSite","name":"Dashy","url":"https://dashy.to","description":"The Ultimate Homepage for your Homelab","publisher":{"@type":"Person","name":"Alicia Sykes","url":"https://aliciasykes.com"}}</script>
|
||
<link rel="manifest" href="/manifest.json">
|
||
<meta name="theme-color" content="#54bff7">
|
||
<script src="https://no-track.as93.net/js/script.js" defer="defer" data-domain="dashy.to"></script><link rel="stylesheet" href="/assets/css/styles.643115f2.css">
|
||
<script src="/assets/js/runtime~main.e7aa91cf.js" defer="defer"></script>
|
||
<script src="/assets/js/main.c9f7c5e0.js" defer="defer"></script>
|
||
</head>
|
||
<body class="navigation-with-keyboard">
|
||
<svg style="display: none;"><defs>
|
||
<symbol id="theme-svg-external-link" viewBox="0 0 24 24"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"/></symbol>
|
||
</defs></svg>
|
||
<script>!function(){var t=function(){try{return new URLSearchParams(window.location.search).get("docusaurus-theme")}catch(t){}}()||function(){try{return window.localStorage.getItem("theme")}catch(t){}}();document.documentElement.setAttribute("data-theme",t||"dark"),document.documentElement.setAttribute("data-theme-choice",t||"dark")}(),function(){try{const c=new URLSearchParams(window.location.search).entries();for(var[t,e]of c)if(t.startsWith("docusaurus-data-")){var a=t.replace("docusaurus-data-","data-");document.documentElement.setAttribute(a,e)}}catch(t){}}()</script><div id="__docusaurus"><div class="banner_woPo"><a class="link_ecgS" title="View the changelog, to see what's new!" href="/updates">Dashy <!-- -->V3.1.9<!-- --> is now live 🚀</a><a class="link2_y3x6" title="View the changelog, to see what's new!" href="/updates">See what's new…</a><button class="closeBtn_fC0A" title="Dismiss update, and don't show again" aria-label="Dismiss update, and don't show again">×</button></div><div role="region" aria-label="Skip to main content"><a class="skipToContent_fXgn" href="#__docusaurus_skipToContent_fallback">Skip to main content</a></div><nav aria-label="Main" class="theme-layout-navbar navbar navbar--fixed-top"><div class="navbar__inner"><div class="theme-layout-navbar-left navbar__items"><button aria-label="Toggle navigation bar" aria-expanded="false" class="navbar__toggle clean-btn" type="button"><svg width="30" height="30" viewBox="0 0 30 30" aria-hidden="true"><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><a class="navbar__brand" href="/"><div class="navbar__logo"><img src="/img/dashy.png" alt="Dashy Logo" class="themedComponent_mlkZ themedComponent--light_NVdE"><img src="/img/dashy.png" alt="Dashy Logo" class="themedComponent_mlkZ themedComponent--dark_xIcU"></div><b class="navbar__title text--truncate">Dashy</b></a><a href="https://github.com/lissy93/dashy" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub<svg width="13.5" height="13.5" aria-label="(opens in new tab)" class="iconExternalLink_nPIU"><use href="#theme-svg-external-link"></use></svg></a><a href="https://demo.dashy.to" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Live Demo<svg width="13.5" height="13.5" aria-label="(opens in new tab)" class="iconExternalLink_nPIU"><use href="#theme-svg-external-link"></use></svg></a><a class="navbar__item navbar__link" href="/docs/quick-start">Quick Start</a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/docs">Documentation</a></div><div class="theme-layout-navbar-right navbar__items navbar__items--right"><div class="toggle_vylO colorModeToggle_DEke"><button class="clean-btn toggleButton_gllP toggleButtonDisabled_aARS" type="button" disabled="" title="system mode" aria-label="Switch between dark and light mode (currently system mode)"><svg viewBox="0 0 24 24" width="24" height="24" aria-hidden="true" class="toggleIcon_g3eP lightToggleIcon_pyhR"><path fill="currentColor" d="M12,9c1.65,0,3,1.35,3,3s-1.35,3-3,3s-3-1.35-3-3S10.35,9,12,9 M12,7c-2.76,0-5,2.24-5,5s2.24,5,5,5s5-2.24,5-5 S14.76,7,12,7L12,7z M2,13l2,0c0.55,0,1-0.45,1-1s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S1.45,13,2,13z M20,13l2,0c0.55,0,1-0.45,1-1 s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S19.45,13,20,13z M11,2v2c0,0.55,0.45,1,1,1s1-0.45,1-1V2c0-0.55-0.45-1-1-1S11,1.45,11,2z M11,20v2c0,0.55,0.45,1,1,1s1-0.45,1-1v-2c0-0.55-0.45-1-1-1C11.45,19,11,19.45,11,20z M5.99,4.58c-0.39-0.39-1.03-0.39-1.41,0 c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0s0.39-1.03,0-1.41L5.99,4.58z M18.36,16.95 c-0.39-0.39-1.03-0.39-1.41,0c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0c0.39-0.39,0.39-1.03,0-1.41 L18.36,16.95z M19.42,5.99c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06c-0.39,0.39-0.39,1.03,0,1.41 s1.03,0.39,1.41,0L19.42,5.99z M7.05,18.36c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06 c-0.39,0.39-0.39,1.03,0,1.41s1.03,0.39,1.41,0L7.05,18.36z"></path></svg><svg viewBox="0 0 24 24" width="24" height="24" aria-hidden="true" class="toggleIcon_g3eP darkToggleIcon_wfgR"><path fill="currentColor" d="M9.37,5.51C9.19,6.15,9.1,6.82,9.1,7.5c0,4.08,3.32,7.4,7.4,7.4c0.68,0,1.35-0.09,1.99-0.27C17.45,17.19,14.93,19,12,19 c-3.86,0-7-3.14-7-7C5,9.07,6.81,6.55,9.37,5.51z M12,3c-4.97,0-9,4.03-9,9s4.03,9,9,9s9-4.03,9-9c0-0.46-0.04-0.92-0.1-1.36 c-0.98,1.37-2.58,2.26-4.4,2.26c-2.98,0-5.4-2.42-5.4-5.4c0-1.81,0.89-3.42,2.26-4.4C12.92,3.04,12.46,3,12,3L12,3z"></path></svg><svg viewBox="0 0 24 24" width="24" height="24" aria-hidden="true" class="toggleIcon_g3eP systemToggleIcon_QzmC"><path fill="currentColor" d="m12 21c4.971 0 9-4.029 9-9s-4.029-9-9-9-9 4.029-9 9 4.029 9 9 9zm4.95-13.95c1.313 1.313 2.05 3.093 2.05 4.95s-0.738 3.637-2.05 4.95c-1.313 1.313-3.093 2.05-4.95 2.05v-14c1.857 0 3.637 0.737 4.95 2.05z"></path></svg></button></div><div class="navbarSearchContainer_Bca1"><div class="navbar__search searchBarContainer_NW3z" dir="ltr"><input placeholder="Search" aria-label="Search" class="navbar__search-input searchInput_YFbd" value=""><div class="loadingRing_RJI3 searchBarLoadingRing_YnHq"><div></div><div></div><div></div><div></div></div></div></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div></nav><div id="__docusaurus_skipToContent_fallback" class="theme-layout-main main-wrapper mainWrapper_z2l0"><div class="docsWrapper_hBAB"><button aria-label="Scroll back to top" class="clean-btn theme-back-to-top-button backToTopButton_sjWU" type="button"></button><div class="docRoot_UBD9"><aside class="theme-doc-sidebar-container docSidebarContainer_YfHR"><div class="sidebarViewport_aRkj"><div class="sidebar_njMd"><nav aria-label="Docs sidebar" class="menu thin-scrollbar menu_SIkG"><ul class="theme-doc-sidebar-menu menu__list"><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="categoryLink_byQd menu__link menu__link--sublist menu__link--sublist-caret" role="button" aria-expanded="false" href="/docs/quick-start"><span title="Running Dashy" class="categoryLinkLabel_W154">Running Dashy</span></a></div></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item"><div class="menu__list-item-collapsible"><a class="categoryLink_byQd menu__link menu__link--sublist menu__link--sublist-caret menu__link--active" role="button" aria-expanded="true" href="/docs/icons"><span title="Feature Docs" class="categoryLinkLabel_W154">Feature Docs</span></a></div><ul class="menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/docs/icons"><span title="Icons" class="linkLabel_WmDU">Icons</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/docs/widgets"><span title="Widgets" class="linkLabel_WmDU">Widgets</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link menu__link--active" aria-current="page" tabindex="0" href="/docs/theming"><span title="Theming" class="linkLabel_WmDU">Theming</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/docs/status-indicators"><span title="Status Indicators" class="linkLabel_WmDU">Status Indicators</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/docs/authentication"><span title="Authentication" class="linkLabel_WmDU">Authentication</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/docs/searching"><span title="Keyboard Shortcuts" class="linkLabel_WmDU">Keyboard Shortcuts</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/docs/alternate-views"><span title="Alternate Views & Opening Methods" class="linkLabel_WmDU">Alternate Views & Opening Methods</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/docs/multi-language-support"><span title="Internationalization" class="linkLabel_WmDU">Internationalization</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/docs/backup-restore"><span title="Cloud Backup and Restore" class="linkLabel_WmDU">Cloud Backup and Restore</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/docs/pages-and-sections"><span title="Pages and Sections" class="linkLabel_WmDU">Pages and Sections</span></a></li></ul></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="categoryLink_byQd menu__link menu__link--sublist menu__link--sublist-caret" role="button" aria-expanded="false" href="/docs/showcase"><span title="Community" class="categoryLinkLabel_W154">Community</span></a></div></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="categoryLink_byQd menu__link menu__link--sublist menu__link--sublist-caret" role="button" aria-expanded="false" href="/docs/privacy"><span title="Misc" class="categoryLinkLabel_W154">Misc</span></a></div></li></ul></nav></div><div class="sidebar-ad"><script async="" src="//cdn.carbonads.com/carbon.js?serve=CWYIC53L&placement=dashyto" id="_carbonads_js"></script></div></div></aside><main class="docMainContainer_TBSr"><div class="container padding-top--md padding-bottom--lg"><div class="row"><div class="col docItemCol_VOVn"><div class="docItemContainer_Djhp"><article><nav class="theme-doc-breadcrumbs breadcrumbsContainer_Z_bl" aria-label="Breadcrumbs"><ul class="breadcrumbs"><li class="breadcrumbs__item"><a aria-label="Home page" class="breadcrumbs__link" href="/"><svg viewBox="0 0 24 24" class="breadcrumbHomeIcon_YNFT"><path d="M10 19v-5h4v5c0 .55.45 1 1 1h3c.55 0 1-.45 1-1v-7h1.7c.46 0 .68-.57.33-.87L12.67 3.6c-.38-.34-.96-.34-1.34 0l-8.36 7.53c-.34.3-.13.87.33.87H5v7c0 .55.45 1 1 1h3c.55 0 1-.45 1-1z" fill="currentColor"></path></svg></a></li><li class="breadcrumbs__item"><span class="breadcrumbs__link">Feature Docs</span></li><li class="breadcrumbs__item breadcrumbs__item--active"><span class="breadcrumbs__link">Theming</span></li></ul></nav><div class="tocCollapsible_ETCw theme-doc-toc-mobile tocMobile_ITEo"><button type="button" class="clean-btn tocCollapsibleButton_TO0P">On this page</button></div><div class="theme-doc-markdown markdown"><header><h1>Theming</h1></header>
|
||
<p>By default Dashy comes with 25+ built-in themes, which can be applied from the dropdown menu in the UI.</p>
|
||
<p><img decoding="async" loading="lazy" src="https://i.ibb.co/GV3wRss/Dashy-Themes.png" alt="Built-in Themes" class="img_ev3q"></p>
|
||
<p>You can also add your own themes, apply custom styles, and modify colors.</p>
|
||
<p>You can customize Dashy by writing your own CSS, which can be loaded either as an external stylesheet, set directly through the UI, or specified in the config file. Most styling options can be set through CSS variables, which are outlined below.</p>
|
||
<p>The following content requires that you have a basic understanding of CSS. If you're just beginning, you may find <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/First_steps" target="_blank" rel="noopener noreferrer" class="">this article</a> helpful.</p>
|
||
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="how-theme-switching-works">How Theme-Switching Works<a href="#how-theme-switching-works" class="hash-link" aria-label="Direct link to How Theme-Switching Works" title="Direct link to How Theme-Switching Works" translate="no"></a></h2>
|
||
<p>The theme switching is done by simply changing the <code>data-theme</code> attribute on the root DOM element, which can then be targeted by CSS. First off, in order for the theme to show up in the theme switcher, it needs to be added to the config file, under <code>appConfig.cssThemes</code>, either as a string, or an array of strings for multiple themes. For example:</p>
|
||
<div class="language-yaml codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#F8F8F2;--prism-background-color:#282A36"><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-yaml codeBlock_bY9V thin-scrollbar" style="color:#F8F8F2;background-color:#282A36"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#F8F8F2"><span class="token key atrule">appConfig</span><span class="token punctuation" style="color:rgb(248, 248, 242)">:</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"> </span><span class="token key atrule">cssThemes</span><span class="token punctuation" style="color:rgb(248, 248, 242)">:</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">[</span><span class="token string" style="color:rgb(255, 121, 198)">'tiger'</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> </span><span class="token string" style="color:rgb(255, 121, 198)">'another-theme'</span><span class="token punctuation" style="color:rgb(248, 248, 242)">]</span><br></span></code></pre></div></div>
|
||
<p>You can now create a block to target you're theme with <code>html[data-theme='my-theme']{}</code> and set some styles. The easiest method is by setting CSS variables, but you can also directly override elements by their selector. As an example, see the <a href="https://github.com/Lissy93/dashy/blob/master/src/styles/color-themes.scss" target="_blank" rel="noopener noreferrer" class="">built-in CSS themes</a>.</p>
|
||
<div class="language-css codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#F8F8F2;--prism-background-color:#282A36"><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-css codeBlock_bY9V thin-scrollbar" style="color:#F8F8F2;background-color:#282A36"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#F8F8F2"><span class="token selector" style="color:rgb(255, 121, 198)">html</span><span class="token selector attribute punctuation" style="color:rgb(248, 248, 242)">[</span><span class="token selector attribute attr-name" style="color:rgb(241, 250, 140)">data-theme</span><span class="token selector attribute operator" style="color:rgb(255, 121, 198)">=</span><span class="token selector attribute attr-value" style="color:rgb(255, 121, 198)">'tiger'</span><span class="token selector attribute punctuation" style="color:rgb(248, 248, 242)">]</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"> </span><span class="token variable" style="color:rgb(189, 147, 249);font-style:italic">--primary</span><span class="token punctuation" style="color:rgb(248, 248, 242)">:</span><span class="token plain"> </span><span class="token hexcode color">#f58233</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"> </span><span class="token variable" style="color:rgb(189, 147, 249);font-style:italic">--background</span><span class="token punctuation" style="color:rgb(248, 248, 242)">:</span><span class="token plain"> </span><span class="token hexcode color">#0b1021</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"></span><span class="token punctuation" style="color:rgb(248, 248, 242)">}</span><br></span></code></pre></div></div>
|
||
<p>Finally, from the UI use the theme dropdown menu to select your new theme, and your styles will be applied.</p>
|
||
<p>You can also set <code>appConfig.theme</code> to pre-select a default theme, which will be applied immediately after deployment.</p>
|
||
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="modifying-theme-colors">Modifying Theme Colors<a href="#modifying-theme-colors" class="hash-link" aria-label="Direct link to Modifying Theme Colors" title="Direct link to Modifying Theme Colors" translate="no"></a></h2>
|
||
<p>Themes can be modified either through the UI, using the color picker menu (to the right of the theme dropdown), or directly in the config file, under <code>appConfig.customColors</code>. Here you can specify the value for any of the <a href="#css-variables" class="">available CSS variables</a>.</p>
|
||
<a href="https://i.ibb.co/cLDXj1R/dashy-theme-configurator.gif" target="_blank" rel="noopener noreferrer" class="">
|
||
<img decoding="async" loading="lazy" alt="Example Themes" src="https://raw.githubusercontent.com/Lissy93/dashy/master/docs/assets/theme-config-demo.gif" width="400" class="img_ev3q">
|
||
</a>
|
||
<p>By default, any color modifications made to the current theme through the UI will only be applied locally. If you need these settings to be set globally, then click the 'Export' button, to get the color codes and variable names, which can then be backed up, or saved in your config file.</p>
|
||
<p>Custom colors are saved relative the the base theme selected. So if you switch themes after setting custom colors, then you're settings will no longer be applied. You're changes are not lost though, and switching back to the original theme will see your styles reapplied.</p>
|
||
<p>If these values are specified in your <code>conf.yml</code> file, then it will look something like the below example. Note that in YAML, values or keys which contain special characters, must be wrapped in quotes.</p>
|
||
<div class="language-yaml codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#F8F8F2;--prism-background-color:#282A36"><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-yaml codeBlock_bY9V thin-scrollbar" style="color:#F8F8F2;background-color:#282A36"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#F8F8F2"><span class="token key atrule">appConfig</span><span class="token punctuation" style="color:rgb(248, 248, 242)">:</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"> </span><span class="token key atrule">customColors</span><span class="token punctuation" style="color:rgb(248, 248, 242)">:</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"> </span><span class="token key atrule">oblivion</span><span class="token punctuation" style="color:rgb(248, 248, 242)">:</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"> </span><span class="token key atrule">primary</span><span class="token punctuation" style="color:rgb(248, 248, 242)">:</span><span class="token plain"> </span><span class="token string" style="color:rgb(255, 121, 198)">'#75efff'</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"> </span><span class="token key atrule">background</span><span class="token punctuation" style="color:rgb(248, 248, 242)">:</span><span class="token plain"> </span><span class="token string" style="color:rgb(255, 121, 198)">'#2a3647'</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"> </span><span class="token key atrule">dracula</span><span class="token punctuation" style="color:rgb(248, 248, 242)">:</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"> </span><span class="token key atrule">primary</span><span class="token punctuation" style="color:rgb(248, 248, 242)">:</span><span class="token plain"> </span><span class="token string" style="color:rgb(255, 121, 198)">'#8be9fd'</span><br></span></code></pre></div></div>
|
||
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="adding-your-own-theme">Adding your own Theme<a href="#adding-your-own-theme" class="hash-link" aria-label="Direct link to Adding your own Theme" title="Direct link to Adding your own Theme" translate="no"></a></h2>
|
||
<p>User-defined styles and custom themes should be defined in <code>./src/styles/user-defined-themes.scss</code>. If you're using Docker, you can pass your own stylesheet in using the <code>--volume</code> flag. E.g. <code>v ./my-themes.scss:/app/src/styles/user-defined-themes.scss</code>. Don't forget to pass your theme name into <code>appConfig.cssThemes</code> so that it shows up on the theme-switcher dropdown.</p>
|
||
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="setting-custom-css-in-the-ui">Setting Custom CSS in the UI<a href="#setting-custom-css-in-the-ui" class="hash-link" aria-label="Direct link to Setting Custom CSS in the UI" title="Direct link to Setting Custom CSS in the UI" translate="no"></a></h2>
|
||
<p>Custom CSS can be developed, tested and applied directly through the UI. Although you will need to make note of your changes to apply them across instances.</p>
|
||
<p>This can be done from the Config menu (spanner icon in the top-right), under the Custom Styles tab. This is then associated with <code>appConfig.customCss</code> in local storage. Styles can also be directly applied to this attribute in the config file, but this may get messy very quickly if you have a lot of CSS.</p>
|
||
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="page-specific-styles">Page-Specific Styles<a href="#page-specific-styles" class="hash-link" aria-label="Direct link to Page-Specific Styles" title="Direct link to Page-Specific Styles" translate="no"></a></h2>
|
||
<p>If you've got multiple pages within your dashboard, you can choose to target certain styles to specific pages. The top-most element within <code><body></code> will have a class name specific to the current sub-page. This is usually the page's name, all lowercase, with dashes instead of spaces, but you can easily check this yourself within the dev tools.</p>
|
||
<p>For example, if the pages name was "CFT Toolbox", and you wanted to target <code>.item</code>s, you would do:</p>
|
||
<div class="language-css codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#F8F8F2;--prism-background-color:#282A36"><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-css codeBlock_bY9V thin-scrollbar" style="color:#F8F8F2;background-color:#282A36"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#F8F8F2"><span class="token selector class" style="color:rgb(255, 121, 198)">.cft-toolbox</span><span class="token selector" style="color:rgb(255, 121, 198)"> </span><span class="token selector class" style="color:rgb(255, 121, 198)">.item</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">{</span><span class="token plain"> </span><span class="token property">border</span><span class="token punctuation" style="color:rgb(248, 248, 242)">:</span><span class="token plain"> </span><span class="token number">4</span><span class="token unit">px</span><span class="token plain"> solid </span><span class="token color">yellow</span><span class="token punctuation" style="color:rgb(248, 248, 242)">;</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">}</span><br></span></code></pre></div></div>
|
||
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="loading-external-stylesheets">Loading External Stylesheets<a href="#loading-external-stylesheets" class="hash-link" aria-label="Direct link to Loading External Stylesheets" title="Direct link to Loading External Stylesheets" translate="no"></a></h2>
|
||
<p>The URI of a stylesheet, either local or hosted on a remote CDN can be passed into the config file. The attribute <code>appConfig.externalStyleSheet</code> accepts either a string, or an array of strings. You can also pass custom font stylesheets here, they must be in a CSS format (for example, <code>https://fonts.googleapis.com/css2?family=Cutive+Mono</code>).
|
||
This is handled in <a href="https://github.com/Lissy93/dashy/blob/master/src/utils/ThemeHelper.js" target="_blank" rel="noopener noreferrer" class=""><code>ThemeHelper.js</code></a>.</p>
|
||
<p>For example:</p>
|
||
<div class="language-yaml codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#F8F8F2;--prism-background-color:#282A36"><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-yaml codeBlock_bY9V thin-scrollbar" style="color:#F8F8F2;background-color:#282A36"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#F8F8F2"><span class="token key atrule">appConfig</span><span class="token punctuation" style="color:rgb(248, 248, 242)">:</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"> </span><span class="token key atrule">externalStyleSheet</span><span class="token punctuation" style="color:rgb(248, 248, 242)">:</span><span class="token plain"> </span><span class="token string" style="color:rgb(255, 121, 198)">'https://example.com/my-stylesheet.css'</span><br></span></code></pre></div></div>
|
||
<div class="language-yaml codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#F8F8F2;--prism-background-color:#282A36"><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-yaml codeBlock_bY9V thin-scrollbar" style="color:#F8F8F2;background-color:#282A36"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#F8F8F2"><span class="token key atrule">appConfig</span><span class="token punctuation" style="color:rgb(248, 248, 242)">:</span><span class="token plain"></span><br></span><span class="token-line" style="color:#F8F8F2"><span class="token plain"> </span><span class="token key atrule">externalStyleSheet</span><span class="token punctuation" style="color:rgb(248, 248, 242)">:</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(248, 248, 242)">[</span><span class="token string" style="color:rgb(255, 121, 198)">'/themes/my-theme-1.css'</span><span class="token punctuation" style="color:rgb(248, 248, 242)">,</span><span class="token plain"> </span><span class="token string" style="color:rgb(255, 121, 198)">'/themes/my-theme-2.css'</span><span class="token punctuation" style="color:rgb(248, 248, 242)">]</span><br></span></code></pre></div></div>
|
||
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="hard-coding-section-or-item-colors">Hard-Coding Section or Item Colors<a href="#hard-coding-section-or-item-colors" class="hash-link" aria-label="Direct link to Hard-Coding Section or Item Colors" title="Direct link to Hard-Coding Section or Item Colors" translate="no"></a></h2>
|
||
<p>Some UI components have a color option, that can be set in the config file, to force the color of a given item or section no matter what theme is selected. These colors should be expressed as hex codes (e.g. <code>#fff</code>) or HTML colors (e.g. <code>red</code>). The following attributes are supported:</p>
|
||
<ul>
|
||
<li class=""><code>section.color</code> - Custom color for a given section</li>
|
||
<li class=""><code>item.color</code> - Font and icon color for a given item</li>
|
||
<li class=""><code>item.backgroundColor</code> - Background color for a given icon</li>
|
||
</ul>
|
||
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="typography">Typography<a href="#typography" class="hash-link" aria-label="Direct link to Typography" title="Direct link to Typography" translate="no"></a></h2>
|
||
<p>Essential fonts bundled within the app are located within <code>./src/assets/fonts/</code>. All optional fonts that are used by themes are stored in <code>./public/fonts/</code>, if you want to add your own font, this is where you should put it. As with assets, if you're using Docker then using a volume to link a directory on your host system with this path within the container will make management much easier.</p>
|
||
<p>Fonts which are not being used by the current theme are <strong>not</strong> fetched on page load. They are instead only loaded into the application if and when they are required. So having multiple themes with various typefaces shouldn't have any negative impact on performance.</p>
|
||
<p>Full credit to the typographers behind each of the included fonts. Specifically: Matt McInerney, Christian Robertson, Haley Fiege, Peter Hull, Cyreal and the legendary Vernon Adams</p>
|
||
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="css-variables">CSS Variables<a href="#css-variables" class="hash-link" aria-label="Direct link to CSS Variables" title="Direct link to CSS Variables" translate="no"></a></h2>
|
||
<p>All colors as well as other variable values (such as borders, border-radius, shadows) are specified as CSS variables. This makes theming the application easy, as you only need to change a given color or value in one place. You can find all variables in <a href="https://github.com/Lissy93/dashy/blob/master/src/styles/color-palette.scss" target="_blank" rel="noopener noreferrer" class=""><code>color-palette.scss</code></a> and the themes which make use of these color variables are specified in <a href="https://github.com/Lissy93/dashy/blob/master/src/styles/color-themes.scss" target="_blank" rel="noopener noreferrer" class=""><code>color-themes.scss</code></a></p>
|
||
<p>CSS variables are simple to use. You define them like: <code>--background: #fff;</code> and use them like: <code>body { background-color: var(--background); }</code>. For more information, see this guide on using <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties" target="_blank" rel="noopener noreferrer" class="">CSS Variables</a>.</p>
|
||
<p>You can determine the variable used by any given element, and visualize changes using the browser developer tools (Usually opened with <code>F12</code>, or Options --> More --> Developer Tools). Under the elements tab, click the Element Selector icon (usually top-left corner), you will then be able to select any DOM element on the page by hovering and clicking it. In the CSS panel you will see all styles assigned to that given element, including CSS variables. Click a variable to see it's parent value, and for color attributes, click the color square to modify the color. For more information, see this <a href="https://developer.mozilla.org/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools" target="_blank" rel="noopener noreferrer" class="">getting started guide</a>, and these articles on <a href="https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Select_an_element" target="_blank" rel="noopener noreferrer" class="">selecting elements</a> and <a href="https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Inspect_and_select_colors" target="_blank" rel="noopener noreferrer" class="">inspecting and modifying colors</a>.</p>
|
||
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id="top-level-variables">Top-Level Variables<a href="#top-level-variables" class="hash-link" aria-label="Direct link to Top-Level Variables" title="Direct link to Top-Level Variables" translate="no"></a></h3>
|
||
<p>These are all that are required to create a theme. All other variables inherit their values from these variables, and can optionally be overridden.</p>
|
||
<ul>
|
||
<li class=""><code>--primary</code> - Application primary color. Used for title, text, accents, and other features</li>
|
||
<li class=""><code>--background</code> - Application background color</li>
|
||
<li class=""><code>--background-darker</code> - Secondary background color (usually darker), used for navigation bar, section fill, footer etc</li>
|
||
<li class=""><code>--curve-factor</code> - The border radius used globally throughout the application. Specified in <code>px</code>, defaults to <code>5px</code></li>
|
||
<li class=""><code>--dimming-factor</code> - Inactive elements have slight transparency. This can be between <code>0</code> (invisible) and <code>1</code> (normal), defaults to <code>0.7</code></li>
|
||
</ul>
|
||
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id="targeted-color-variables">Targeted Color Variables<a href="#targeted-color-variables" class="hash-link" aria-label="Direct link to Targeted Color Variables" title="Direct link to Targeted Color Variables" translate="no"></a></h3>
|
||
<p>You can target specific elements on the UI with these variables. All are optional, since by default, they inherit their values from above</p>
|
||
<ul>
|
||
<li class=""><code>--heading-text-color</code> - Text color for web page heading and sub-heading. Defaults to <code>--primary</code></li>
|
||
<li class=""><code>--nav-link-text-color</code> - The text color for links displayed in the navigation bar. Defaults to <code>--primary</code></li>
|
||
<li class=""><code>--nav-link-background-color</code> - The background color for links displayed in the navigation bar</li>
|
||
<li class=""><code>--nav-link-text-color-hover</code> - The text color when a navigation bar link is hovered over. Defaults to <code>--primary</code></li>
|
||
<li class=""><code>--nav-link-background-color-hover</code> - The background color for nav bar links when hovered over</li>
|
||
<li class=""><code>--nav-link-border-color</code> - The border color for nav bar links. Defaults to <code>transparent</code></li>
|
||
<li class=""><code>--nav-link-border-color-hover</code> - The border color for nav bar links when hovered over. Defaults to <code>--primary</code></li>
|
||
<li class=""><code>--search-container-background</code> - Background for the container containing the search bar. Defaults to <code>--background-darker</code></li>
|
||
<li class=""><code>--search-field-background</code> - Fill color for the search bar. Defaults to <code>--background</code></li>
|
||
<li class=""><code>--settings-background</code> - The background for the quick settings. Defaults to <code>--background</code></li>
|
||
<li class=""><code>--settings-text-color</code> - The text and icon color for quick settings. Defaults to <code>--primary</code></li>
|
||
<li class=""><code>--footer-text-color</code> - Color for text within the footer. Defaults to <code>--medium-grey</code></li>
|
||
<li class=""><code>--footer-text-color-link</code> - Color for any hyperlinks within the footer. Defaults to <code>--primary</code></li>
|
||
<li class=""><code>--item-text-color</code> - The text and icon color for items. Defaults to <code>--primary</code></li>
|
||
<li class=""><code>--item-group-outer-background</code> - The background color for the outer part of a section (including section head). Defaults to <code>--primary</code></li>
|
||
<li class=""><code>--item-group-background</code> - The background color for the inner part of item groups. Defaults to <code>#0b1021cc</code> (semi-transparent black)</li>
|
||
<li class=""><code>--item-group-heading-text-color</code> - The text color for section headings. Defaults to <code>--item-group-background</code>;</li>
|
||
<li class=""><code>--item-group-heading-text-color-hover</code> - The text color for section headings, when hovered. Defaults to <code>--background</code></li>
|
||
<li class=""><code>--config-code-background</code> - Background color for the JSON editor in the config menu. Defaults to <code>#fff</code> (white)</li>
|
||
<li class=""><code>--config-code-color</code> - Text color for the non-highlighted code within the JSON editor. Defaults to <code>--background</code></li>
|
||
<li class=""><code>--config-settings-color</code> - The background for the config/ settings pop-up modal. Defaults to <code>--primary</code></li>
|
||
<li class=""><code>--config-settings-background</code> - The text color for text within the settings container. Defaults to <code>--background-darker</code></li>
|
||
<li class=""><code>--scroll-bar-color</code> - Color of the scroll bar thumb. Defaults to <code>--primary</code></li>
|
||
<li class=""><code>--scroll-bar-background</code> Color of the scroll bar blank space. Defaults to <code>--background-darker</code></li>
|
||
<li class=""><code>--highlight-background</code> Fill color for text highlighting. Defaults to <code>--primary</code></li>
|
||
<li class=""><code>--highlight-color</code> Text color for selected/ highlighted text. Defaults to <code>--background</code></li>
|
||
<li class=""><code>--toast-background</code> - Background color for the toast info popup. Defaults to <code>--primary</code></li>
|
||
<li class=""><code>--toast-color</code> - Text, icon and border color in the toast info popup. Defaults to <code>--background</code></li>
|
||
<li class=""><code>--welcome-popup-background</code> - Background for the info pop-up shown on first load. Defaults to <code>--background-darker</code></li>
|
||
<li class=""><code>--welcome-popup-text-color</code> - Text color for the welcome pop-up. Defaults to <code>--primary</code></li>
|
||
<li class=""><code>--side-bar-background</code> - Background color of the sidebar used in the workspace view. Defaults to <code>--background-darker</code></li>
|
||
<li class=""><code>--side-bar-color</code> - Color of icons and text within the sidebar. Defaults to <code>--primary</code></li>
|
||
<li class=""><code>--status-check-tooltip-background</code> - Background color for status check tooltips. Defaults to <code>--background-darker</code></li>
|
||
<li class=""><code>--status-check-tooltip-color</code> - Text color for the status check tooltips. Defaults to <code>--primary</code></li>
|
||
<li class=""><code>--code-editor-color</code> - Text color used within raw code editors. Defaults to <code>--black</code></li>
|
||
<li class=""><code>--code-editor-background</code> - Background color for raw code editors. Defaults to <code>--white</code></li>
|
||
<li class=""><code>--context-menu-color</code> - Text color for right-click context menu over items. Defaults to <code>--primary</code></li>
|
||
<li class=""><code>--context-menu-background</code> - Background color of right-click context menu. Defaults to <code>--background</code></li>
|
||
<li class=""><code>--context-menu-secondary-color</code> - Border and outline color for context menu. Defaults to <code>--background-darker</code></li>
|
||
</ul>
|
||
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id="non-color-variables">Non-Color Variables<a href="#non-color-variables" class="hash-link" aria-label="Direct link to Non-Color Variables" title="Direct link to Non-Color Variables" translate="no"></a></h3>
|
||
<ul>
|
||
<li class=""><code>--outline-color</code> - Used to outline focused or selected elements</li>
|
||
<li class=""><code>--curve-factor-navbar</code> - The border radius of the navbar. Usually this is greater than <code>--curve-factor</code></li>
|
||
<li class=""><code>--scroll-bar-width</code> - Width of horizontal and vertical scroll bars. E.g. <code>8px</code></li>
|
||
<li class=""><code>--item-group-padding</code> - Inner padding of sections, determines the width of outline. E.g. <code>5px</code></li>
|
||
<li class=""><code>--item-shadow</code> - Shadow for items. E.g. <code>1px 1px 2px #130f23</code></li>
|
||
<li class=""><code>--item-hover-shadow</code> - Shadow for items when hovered over. E.g. <code>1px 2px 4px #373737</code></li>
|
||
<li class=""><code>--item-icon-transform</code> - A <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/transform" target="_blank" rel="noopener noreferrer" class="">transform</a> property, to modify item icons. E.g. <code>drop-shadow(2px 4px 6px var(--transparent-50)) saturate(0.65)</code></li>
|
||
<li class=""><code>--item-icon-transform-hover</code> - Same as above, but applied when an item is hovered over. E.g. <code>drop-shadow(4px 8px 3px var(--transparent-50)) saturate(2)</code></li>
|
||
<li class=""><code>--item-group-shadow</code> - The shadow for an item group/ section. Defaults to <code>--item-shadow</code></li>
|
||
<li class=""><code>--settings-container-shadow</code> - A shadow property for the settings container. E.g. <code>none</code></li>
|
||
</ul>
|
||
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id="action-colors">Action Colors<a href="#action-colors" class="hash-link" aria-label="Direct link to Action Colors" title="Direct link to Action Colors" translate="no"></a></h3>
|
||
<p>These colors represent intent, and so are not often changed, but you can do so if you wish</p>
|
||
<ul>
|
||
<li class=""><code>--info</code> - Information color, usually blue / <code>#04e4f4</code></li>
|
||
<li class=""><code>--success</code> - Success color, usually green / <code>#20e253</code></li>
|
||
<li class=""><code>--warning</code> - Warning color, usually yellow / <code>#f6f000</code></li>
|
||
<li class=""><code>--danger</code> - Error/ danger color, usually red / <code>#f80363</code></li>
|
||
<li class=""><code>--neutral</code> - Neutral color, usually grey / <code>#272f4d</code></li>
|
||
<li class=""><code>--white</code> - Just white / <code>#fff</code></li>
|
||
<li class=""><code>--black</code> - Just black / <code>#000</code></li>
|
||
</ul></div><footer class="theme-doc-footer docusaurus-mt-lg"><div class="row margin-top--sm theme-doc-footer-edit-meta-row"><div class="col noPrint_WFHX"><a href="https://github.com/Lissy93/dashy/edit/gh-pages/docs/docs/theming.md" target="_blank" rel="noopener noreferrer" class="theme-edit-this-page"><svg fill="currentColor" height="20" width="20" viewBox="0 0 40 40" class="iconEdit_Z9Sw" aria-hidden="true"><g><path d="m34.5 11.7l-3 3.1-6.3-6.3 3.1-3q0.5-0.5 1.2-0.5t1.1 0.5l3.9 3.9q0.5 0.4 0.5 1.1t-0.5 1.2z m-29.5 17.1l18.4-18.5 6.3 6.3-18.4 18.4h-6.3v-6.2z"></path></g></svg>Edit this page</a></div><div class="col lastUpdated_JAkA"><span class="theme-last-updated">Last updated<!-- --> on <b><time datetime="2026-03-13T09:25:41.000Z" itemprop="dateModified">Mar 13, 2026</time></b></span></div></div></footer></article><nav class="docusaurus-mt-lg pagination-nav" aria-label="Docs pages"><a class="pagination-nav__link pagination-nav__link--prev" href="/docs/widgets"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">Widgets</div></a><a class="pagination-nav__link pagination-nav__link--next" href="/docs/status-indicators"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Status Indicators</div></a></nav></div></div><div class="col col--3"><div class="tableOfContents_bqdL thin-scrollbar theme-doc-toc-desktop"><ul class="table-of-contents table-of-contents__left-border"><li><a href="#how-theme-switching-works" class="table-of-contents__link toc-highlight">How Theme-Switching Works</a></li><li><a href="#modifying-theme-colors" class="table-of-contents__link toc-highlight">Modifying Theme Colors</a></li><li><a href="#adding-your-own-theme" class="table-of-contents__link toc-highlight">Adding your own Theme</a></li><li><a href="#setting-custom-css-in-the-ui" class="table-of-contents__link toc-highlight">Setting Custom CSS in the UI</a></li><li><a href="#page-specific-styles" class="table-of-contents__link toc-highlight">Page-Specific Styles</a></li><li><a href="#loading-external-stylesheets" class="table-of-contents__link toc-highlight">Loading External Stylesheets</a></li><li><a href="#hard-coding-section-or-item-colors" class="table-of-contents__link toc-highlight">Hard-Coding Section or Item Colors</a></li><li><a href="#typography" class="table-of-contents__link toc-highlight">Typography</a></li><li><a href="#css-variables" class="table-of-contents__link toc-highlight">CSS Variables</a><ul><li><a href="#top-level-variables" class="table-of-contents__link toc-highlight">Top-Level Variables</a></li><li><a href="#targeted-color-variables" class="table-of-contents__link toc-highlight">Targeted Color Variables</a></li><li><a href="#non-color-variables" class="table-of-contents__link toc-highlight">Non-Color Variables</a></li><li><a href="#action-colors" class="table-of-contents__link toc-highlight">Action Colors</a></li></ul></li></ul></div></div></div></div></main></div></div></div><footer class="theme-layout-footer footer footer--dark"><div class="container container-fluid"><div class="row footer__links"><div class="theme-layout-footer-column col footer__col"><div class="footer__title">Intro</div><ul class="footer__items clean-list"><li class="footer__item"><a href="https://github.com/lissy93/dashy" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub<svg width="13.5" height="13.5" aria-label="(opens in new tab)" class="iconExternalLink_nPIU"><use href="#theme-svg-external-link"></use></svg></a></li><li class="footer__item"><a href="https://demo.dashy.to" target="_blank" rel="noopener noreferrer" class="footer__link-item">Live Demo<svg width="13.5" height="13.5" aria-label="(opens in new tab)" class="iconExternalLink_nPIU"><use href="#theme-svg-external-link"></use></svg></a></li><li class="footer__item"><a class="footer__link-item" href="/docs/quick-start">Quick Start</a></li><li class="footer__item"><a class="footer__link-item" href="/docs">Documentation</a></li></ul></div><div class="theme-layout-footer-column col footer__col"><div class="footer__title">Setup Guide</div><ul class="footer__items clean-list"><li class="footer__item"><a class="footer__link-item" href="/docs/deployment">Deploying</a></li><li class="footer__item"><a class="footer__link-item" href="/docs/configuring">Configuring</a></li><li class="footer__item"><a class="footer__link-item" href="/docs/management">Management</a></li><li class="footer__item"><a class="footer__link-item" href="/docs/troubleshooting">Troubleshooting</a></li></ul></div><div class="theme-layout-footer-column col footer__col"><div class="footer__title">Feature Docs Pt 1</div><ul class="footer__items clean-list"><li class="footer__item"><a class="footer__link-item" href="/docs/authentication">Authentication</a></li><li class="footer__item"><a class="footer__link-item" href="/docs/alternate-views">Alternate Views</a></li><li class="footer__item"><a class="footer__link-item" href="/docs/backup-restore">Backup & Restore</a></li><li class="footer__item"><a class="footer__link-item" href="/docs/icons">Icons</a></li></ul></div><div class="theme-layout-footer-column col footer__col"><div class="footer__title">Feature Docs Pt 2</div><ul class="footer__items clean-list"><li class="footer__item"><a class="footer__link-item" href="/docs/multi-language-support">Language Switching</a></li><li class="footer__item"><a class="footer__link-item" href="/docs/status-indicators">Status Indicators</a></li><li class="footer__item"><a class="footer__link-item" href="/docs/searching">Searching & Shortcuts</a></li><li class="footer__item"><a class="footer__link-item" href="/docs/theming">Theming</a></li></ul></div><div class="theme-layout-footer-column col footer__col"><div class="footer__title">Community</div><ul class="footer__items clean-list"><li class="footer__item"><a class="footer__link-item" href="/docs/developing">Developing</a></li><li class="footer__item"><a class="footer__link-item" href="/docs/development-guides">Development Guides</a></li><li class="footer__item"><a class="footer__link-item" href="/docs/contributing">Contributing</a></li><li class="footer__item"><a class="footer__link-item" href="/docs/showcase">Showcase</a></li><li class="footer__item"><a class="footer__link-item" href="/docs/credits">Credits</a></li></ul></div><div class="theme-layout-footer-column col footer__col"><div class="footer__title">Misc</div><ul class="footer__items clean-list"><li class="footer__item"><a class="footer__link-item" href="/docs/privacy">Privacy & Security</a></li><li class="footer__item"><a class="footer__link-item" href="/docs/license">License</a></li><li class="footer__item"><a href="https://github.com/Lissy93/dashy/blob/master/.github/LEGAL.md" target="_blank" rel="noopener noreferrer" class="footer__link-item">Legal<svg width="13.5" height="13.5" aria-label="(opens in new tab)" class="iconExternalLink_nPIU"><use href="#theme-svg-external-link"></use></svg></a></li><li class="footer__item"><a href="https://github.com/Lissy93/dashy/blob/master/.github/CODE_OF_CONDUCT.md" target="_blank" rel="noopener noreferrer" class="footer__link-item">Code of Conduct<svg width="13.5" height="13.5" aria-label="(opens in new tab)" class="iconExternalLink_nPIU"><use href="#theme-svg-external-link"></use></svg></a></li><li class="footer__item"><a href="https://github.com/Lissy93/dashy/blob/master/.github/CHANGELOG.md" target="_blank" rel="noopener noreferrer" class="footer__link-item">Changelog<svg width="13.5" height="13.5" aria-label="(opens in new tab)" class="iconExternalLink_nPIU"><use href="#theme-svg-external-link"></use></svg></a></li></ul></div></div><div class="footer__bottom text--center"><div class="footer__copyright"><a href="https://dashy.to">Dashy</a> - The Self-Hosted Dashboard for your Homelab<br>License under <a href="https://github.com/Lissy93/dashy/blob/master/LICENSE">MIT</a>. Copyright © 2026 <a href="https://aliciasykes.com">Alicia Sykes</a></div></div></div></footer></div>
|
||
</body>
|
||
</html> |