import{r as n,p as c,q as h,w as s,z as e,t as r,R as t}from"./vendor.8ed37afc.js";const d={class:"markdown-body"},u=e("strong",null,"Form Follows Function",-1),p=t(" is the guiding design principle of Directus. The minimal UI allows the platform to be easily tailored to your brand. "),m=t("Learn more about the App"),g=t("."),_=e("h2",{id:"app-themes"},[t("App Themes "),e("a",{class:"header-anchor",href:"#app-themes"},"#")],-1),y=e("p",null,"The Directus App has been developed with customization and extensibility in mind. Colors and styles referenced within the codebase all use CSS variables, and therefore it is easy to make comprehensive changes to the App styling.",-1),b=e("p",null,"There are two themes included by default: Light and Dark. You can duplicate these files to create your own themes \u2014 with no limit to customization. Below are several code resources for key SCSS files.",-1),f=e("ul",null,[e("li",null,[e("strong",null,"Themes"),t(" \u2014 See the "),e("a",{href:"https://github.com/directus/directus/blob/main/app/src/styles/themes/_light.scss",target:"_blank",rel:"noopener noreferrer"},"Light Theme"),t(" or "),e("a",{href:"https://github.com/directus/directus/blob/main/app/src/styles/themes/_dark.scss",target:"_blank",rel:"noopener noreferrer"},"Dark Theme")]),e("li",null,[e("strong",null,"Typography"),t(" \u2014 See the "),e("a",{href:"https://github.com/directus/directus/blob/main/app/src/styles/_type-styles.scss",target:"_blank",rel:"noopener noreferrer"},"Fonts"),t(" and "),e("a",{href:"https://github.com/directus/directus/blob/main/app/src/styles/mixins/type-styles.scss",target:"_blank",rel:"noopener noreferrer"},"Type Styles")]),e("li",null,[e("strong",null,"Variables"),t(" \u2014 See the "),e("a",{href:"https://github.com/directus/directus/blob/main/app/src/styles/_variables.scss",target:"_blank",rel:"noopener noreferrer"},"Global Variables")])],-1),S=e("h2",{id:"project-styling"},[t("Project Styling "),e("a",{class:"header-anchor",href:"#project-styling"},"#")],-1),v=t("See "),w=t("Adjusting Project Settings"),k=e("h2",{id:"custom-css"},[t("Custom CSS "),e("a",{class:"header-anchor",href:"#custom-css"},"#")],-1),C=e("p",null,"You can also override any core CSS directly within the App through Project Settings. This makes it easy to edit the CSS variables listed in the themes above.",-1),T=e("ol",null,[e("li",null,[t("Navigate to "),e("strong",null,"Settings Module > Project Settings")]),e("li",null,[t("Scroll to the "),e("strong",null,"Custom CSS"),t(" field")]),e("li",null,[t("Enter any "),e("strong",null,"valid CSS")]),e("li",null,[t("Click the "),e("strong",null,"Save"),t(" action button in the header")])],-1),A=e("h3",{id:"example"},[t("Example "),e("a",{class:"header-anchor",href:"#example"},"#")],-1),j=e("p",null,[t("Since App styles are inserted/removed whenever a component is rendered, you\u2019ll need to be aware of CSS priority. Using "),e("code",null,":root"),t(" or "),e("code",null,"body"),t(" likely isn\u2019t scoped enough, you\u2019ll need to define a more specific scope, such as "),e("code",null,"#app"),t(", or use "),e("code",null,"!important"),t(".")],-1),x=e("pre",null,[e("code",{class:"language-css"},[e("span",{class:"hljs-selector-tag"},"body"),t(` {
	--family-sans-serif: `),e("span",{class:"hljs-string"},"'Comic Sans MS'"),t(`;
	--primary: MediumSlateBlue `),e("span",{class:"hljs-meta"},"!important"),t(`;
}
`)])],-1),D=e("div",{class:"warning hint"},[e("div",{class:"hint-title"},"Action Styling"),e("p",null,[t("The "),e("code",null,"--primary"),t(" variable (and its shades) control call-to-actions and all other elements within the App using the \u201CDirectus Green\u201D. While it may be tempting to override this variable with your brand\u2019s color, please first review the following warnings:")]),e("ul",null,[e("li",null,"Avoid using yellow, orange, or red hues that give a sense of \u201Cdanger\u201D"),e("li",null,"Avoid low-contrast colors like yellows, grays, etc, that might not be easily visible"),e("li",null,"Avoid low-saturation colors like black, which might not properly highlight CTAs")])],-1),P={setup(B,{expose:i}){const o={title:"Themes & Styling",modularExtension:!1};return i({frontmatter:o}),(V,F)=>{const l=n("router-link"),a=n("DocsWrapper");return c(),h(a,{frontmatter:o},{default:s(()=>[e("div",d,[e("blockquote",null,[e("p",null,[u,p,r(l,{to:"/docs/app/overview/"},{default:s(()=>[m]),_:1}),g])]),_,y,b,f,S,e("p",null,[v,r(l,{to:"/docs/configuration/project-settings/"},{default:s(()=>[w]),_:1})]),k,C,T,A,j,x,D])]),_:1})}}};export{P as default};
