[{"data":1,"prerenderedAt":544},["ShallowReactive",2],{"footer-links":3,"content-\u002Ftheme":12},[4,9],{"path":5,"title":6,"type":7,"isExternal":8},"https:\u002F\u002Fgithub.com\u002Flife-and-dev\u002Fmdsite","GitHub Repo","link",true,{"path":10,"title":11,"type":7,"isExternal":8},"https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002F@life-and-dev\u002Fmdsite","NPM Registry",{"id":13,"title":14,"body":15,"description":537,"extension":538,"meta":539,"navigation":8,"path":540,"seo":541,"stem":542,"__hash__":543},"content\u002Ftheme.md","Theme Configuration",{"type":16,"value":17,"toc":523},"minimark",[18,22,34,39,57,165,169,193,222,233,238,241,285,289,292,296,299,303,344,348,351,383,387,413,417,420,440,444,447,519],[19,20,14],"h1",{"id":21},"theme-configuration",[23,24,25,29,30,33],"p",{},[26,27,28],"code",{},"mdsite"," allows you to define custom themes in ",[26,31,32],{},"mdsite.yml",". Themes leverage Vuetify's theme system under the hood.",[35,36,38],"h2",{"id":37},"structure","Structure",[23,40,41,42,45,46,48,49,52,53,56],{},"Themes are defined under the ",[26,43,44],{},"themes"," property in ",[26,47,32],{},". You can define multiple themes (e.g., ",[26,50,51],{},"light",", ",[26,54,55],{},"dark","), and the system will allow users to toggle between them.",[58,59,64],"pre",{"className":60,"code":61,"language":62,"meta":63,"style":63},"language-yaml shiki shiki-themes github-light github-dark","themes:\n  light:\n    colors:\n      primary: '#0969da'\n      background: '#f6f8fa'\n      # ... other colors\n  dark:\n    colors:\n      primary: '#58a6ff'\n      background: '#161b22'\n      # ... other colors\n","yaml","",[26,65,66,78,86,94,107,118,125,133,140,150,160],{"__ignoreMap":63},[67,68,71,74],"span",{"class":69,"line":70},"line",1,[67,72,44],{"class":73},"s9eBZ",[67,75,77],{"class":76},"sVt8B",":\n",[67,79,81,84],{"class":69,"line":80},2,[67,82,83],{"class":73},"  light",[67,85,77],{"class":76},[67,87,89,92],{"class":69,"line":88},3,[67,90,91],{"class":73},"    colors",[67,93,77],{"class":76},[67,95,97,100,103],{"class":69,"line":96},4,[67,98,99],{"class":73},"      primary",[67,101,102],{"class":76},": ",[67,104,106],{"class":105},"sZZnC","'#0969da'\n",[67,108,110,113,115],{"class":69,"line":109},5,[67,111,112],{"class":73},"      background",[67,114,102],{"class":76},[67,116,117],{"class":105},"'#f6f8fa'\n",[67,119,121],{"class":69,"line":120},6,[67,122,124],{"class":123},"sJ8bj","      # ... other colors\n",[67,126,128,131],{"class":69,"line":127},7,[67,129,130],{"class":73},"  dark",[67,132,77],{"class":76},[67,134,136,138],{"class":69,"line":135},8,[67,137,91],{"class":73},[67,139,77],{"class":76},[67,141,143,145,147],{"class":69,"line":142},9,[67,144,99],{"class":73},[67,146,102],{"class":76},[67,148,149],{"class":105},"'#58a6ff'\n",[67,151,153,155,157],{"class":69,"line":152},10,[67,154,112],{"class":73},[67,156,102],{"class":76},[67,158,159],{"class":105},"'#161b22'\n",[67,161,163],{"class":69,"line":162},11,[67,164,124],{"class":123},[35,166,168],{"id":167},"color-formats-hex-codes","Color Formats (HEX Codes)",[23,170,171,172,176,177,192],{},"Colors in the configuration are defined using ",[173,174,175],"strong",{},"HEX codes"," (e.g., ",[173,178,179,180,184,188],{},"#",[67,181,183],{"style":182},"color: red","09",[67,185,187],{"style":186},"color: green","69",[67,189,191],{"style":190},"color: blue","da","). This is a standard way to represent colors in web development:",[194,195,196,206,214],"ul",{},[197,198,199,200,205],"li",{},"The first two characters represent ",[67,201,202],{"style":182},[173,203,204],{},"Red",".",[197,207,208,209,205],{},"The middle two characters represent ",[67,210,211],{"style":186},[173,212,213],{},"Green",[197,215,216,217,205],{},"The last two characters represent ",[67,218,219],{"style":190},[173,220,221],{},"Blue",[23,223,224,225,228,229,232],{},"Each pair ranges from ",[26,226,227],{},"00"," (nothing) to ",[26,230,231],{},"ff"," (maximum intensity) in hexadecimal.",[234,235,237],"h3",{"id":236},"online-color-tools","Online Color Tools",[23,239,240],{},"If you need help finding the right colors or generating these codes, here are some excellent free tools:",[194,242,243,255,265,275],{},[197,244,245,254],{},[173,246,247],{},[248,249,253],"a",{"href":250,"rel":251},"https:\u002F\u002Fwww.google.com\u002Fsearch?q=color+picker",[252],"nofollow","Google Color Picker",": A simple, quick tool built directly into Google Search.",[197,256,257,264],{},[173,258,259],{},[248,260,263],{"href":261,"rel":262},"https:\u002F\u002Fcoolors.co\u002F",[252],"Coolors.co",": An extremely fast palette generator for finding colors that look great together.",[197,266,267,274],{},[173,268,269],{},[248,270,273],{"href":271,"rel":272},"https:\u002F\u002Fcolor.adobe.com\u002F",[252],"Adobe Color",": A professional tool for exploring color trends and creating harmonious schemes.",[197,276,277,284],{},[173,278,279],{},[248,280,283],{"href":281,"rel":282},"https:\u002F\u002Fcolors.muz.li\u002F",[252],"Muzli Colors",": Provides great UI-centric color inspirations and palettes.",[35,286,288],{"id":287},"dark-mode-detection","Dark Mode Detection",[23,290,291],{},"The system automatically determines if a theme is \"dark\" or \"light\" based on its name. If the theme name is**\"dark\"**, it is treated as a dark theme. Otherwise, it defaults to light.",[35,293,295],{"id":294},"color-tokens","Color Tokens",[23,297,298],{},"MD-Site uses a comprehensive set of color tokens to ensure consistent styling across the application.",[234,300,302],{"id":301},"core-colors","Core Colors",[194,304,305,311,317,323,329],{},[197,306,307,310],{},[26,308,309],{},"primary",": Main brand color (links, primary buttons).",[197,312,313,316],{},[26,314,315],{},"secondary",": Secondary brand color.",[197,318,319,322],{},[26,320,321],{},"background",": Page background color.",[197,324,325,328],{},[26,326,327],{},"surface",": Background color for cards and elevated elements.",[197,330,331,52,334,52,337,52,340,343],{},[26,332,333],{},"error",[26,335,336],{},"warning",[26,338,339],{},"info",[26,341,342],{},"success",": Status colors for alerts and feedback.",[234,345,347],{"id":346},"navigation-rail","Navigation & Rail",[23,349,350],{},"These colors are used by the sidebar navigation rail and the table of contents.",[194,352,353,359,365,371,377],{},[197,354,355,358],{},[26,356,357],{},"surface-rail",": Background color of the sidebars.",[197,360,361,364],{},[26,362,363],{},"on-surface-rail",": Color for labels and non-interactive text in the sidebar.",[197,366,367,370],{},[26,368,369],{},"on-selectable",": Text color for selectable navigation items.",[197,372,373,376],{},[26,374,375],{},"selected",": Background highlight color for the currently active item.",[197,378,379,382],{},[26,380,381],{},"on-selected",": Text\u002Ficon color for the currently active item.",[234,384,386],{"id":385},"app-bar-ui","App Bar & UI",[194,388,389,395,401,407],{},[197,390,391,394],{},[26,392,393],{},"surface-appbar",": Background color for the top navigation bar and footer.",[197,396,397,400],{},[26,398,399],{},"on-surface-appbar",": Text\u002Ficon color for the app bar and footer.",[197,402,403,406],{},[26,404,405],{},"outline",": Standard border color.",[197,408,409,412],{},[26,410,411],{},"outline-bars",": Border color specifically for bars or dividers.",[234,414,416],{"id":415},"on-colors","\"On\" Colors",[23,418,419],{},"Vuetify uses \"on\" colors to define the text color that should be used on top of a specific background.",[194,421,422,428,434],{},[197,423,424,427],{},[26,425,426],{},"on-primary",": Text on primary backgrounds.",[197,429,430,433],{},[26,431,432],{},"on-background",": Main content text color.",[197,435,436,439],{},[26,437,438],{},"on-surface",": Text on card backgrounds.",[35,441,443],{"id":442},"example-configuration","Example Configuration",[23,445,446],{},"Here is a snippet showing how navigation colors are typically configured:",[58,448,450],{"className":60,"code":449,"language":62,"meta":63,"style":63},"themes:\n  light:\n    colors:\n      surface-rail: '#edf1f5'\n      on-surface-rail: '#32302a'\n      on-selectable: '#24292f'\n      selected: '#dbe3eb'\n      on-selected: '#0969da'\n",[26,451,452,458,464,470,480,490,500,510],{"__ignoreMap":63},[67,453,454,456],{"class":69,"line":70},[67,455,44],{"class":73},[67,457,77],{"class":76},[67,459,460,462],{"class":69,"line":80},[67,461,83],{"class":73},[67,463,77],{"class":76},[67,465,466,468],{"class":69,"line":88},[67,467,91],{"class":73},[67,469,77],{"class":76},[67,471,472,475,477],{"class":69,"line":96},[67,473,474],{"class":73},"      surface-rail",[67,476,102],{"class":76},[67,478,479],{"class":105},"'#edf1f5'\n",[67,481,482,485,487],{"class":69,"line":109},[67,483,484],{"class":73},"      on-surface-rail",[67,486,102],{"class":76},[67,488,489],{"class":105},"'#32302a'\n",[67,491,492,495,497],{"class":69,"line":120},[67,493,494],{"class":73},"      on-selectable",[67,496,102],{"class":76},[67,498,499],{"class":105},"'#24292f'\n",[67,501,502,505,507],{"class":69,"line":127},[67,503,504],{"class":73},"      selected",[67,506,102],{"class":76},[67,508,509],{"class":105},"'#dbe3eb'\n",[67,511,512,515,517],{"class":69,"line":135},[67,513,514],{"class":73},"      on-selected",[67,516,102],{"class":76},[67,518,106],{"class":105},[520,521,522],"style",{},"html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":63,"searchDepth":80,"depth":80,"links":524},[525,526,529,530,536],{"id":37,"depth":80,"text":38},{"id":167,"depth":80,"text":168,"children":527},[528],{"id":236,"depth":88,"text":237},{"id":287,"depth":80,"text":288},{"id":294,"depth":80,"text":295,"children":531},[532,533,534,535],{"id":301,"depth":88,"text":302},{"id":346,"depth":88,"text":347},{"id":385,"depth":88,"text":386},{"id":415,"depth":88,"text":416},{"id":442,"depth":80,"text":443},"mdsite allows you to define custom themes in mdsite.yml. Themes leverage Vuetify's theme system under the hood.","md",{},"\u002Ftheme",{"title":14,"description":537},"theme","hx55Lwb6ON1_qs3Xeyo-yvB7Kf9grhbe8cqUi2NKt9M",1784017753076]