[{"data":1,"prerenderedAt":512},["ShallowReactive",2],{"doc-content/docs/developer/widget-presets":3,"doc-surroundings/docs/developer/widget-presets":419,"docs-navigation":428},{"path":4,"draft":5,"date":6,"dateUpdated":7,"title":8,"body":9,"description":418,"image":6,"imageAlt":6},"/docs/developer/widget-presets",false,null,"2025-05-15","Creating Widget Presets",{"type":10,"value":11,"toc":415},"minimark",[12,16,20,28,279,286,291,302,411],[13,14,8],"h1",{"id":15},"creating-widget-presets",[17,18,19],"p",{},"You can optionally create user-selectable theme presets. Any setting available in the Hologram UI can be specified as a preset.",[17,21,22,23,27],{},"Presets are defined in the ",[24,25,26],"code",{},"presets[]"," array in your widget.config file.",[29,30,35],"pre",{"className":31,"code":32,"language":33,"meta":34,"style":34},"language-json shiki shiki-themes github-dark github-dark","\"presets\": [\n    {\n        \"label\": \"Auto\",\n        \"name\": \"auto\",\n        \"resetOtherSettings\": true,\n        \"settings\": {\n            \"backgroundColor\": \"muted\",\n            \"borderColor\": \"vibrant\",\n            \"textColor\": \"lightvibrant\",\n            \"shadowColor\": \"darkmuted\"\n        }\n    },\n    {\n        \"label\": \"Black & White\",\n        \"name\": \"blackWhite\",\n        \"resetOtherSettings\": true,\n        \"settings\": {\n            \"backgroundColor\": \"#000000\",\n            \"borderColor\": \"#666666\",\n            \"textColor\": \"#ffffff\",\n            \"shadowColor\": \"00000033\"\n        }\n    }\n]\n","json","",[24,36,37,50,56,72,85,98,107,120,133,146,157,163,169,174,186,198,209,216,228,240,252,262,267,273],{"__ignoreMap":34},[38,39,42,46],"span",{"class":40,"line":41},"line",1,[38,43,45],{"class":44},"s4wv1","\"presets\"",[38,47,49],{"class":48},"suv1-",": [\n",[38,51,53],{"class":40,"line":52},2,[38,54,55],{"class":48},"    {\n",[38,57,59,63,66,69],{"class":40,"line":58},3,[38,60,62],{"class":61},"s8ozJ","        \"label\"",[38,64,65],{"class":48},": ",[38,67,68],{"class":44},"\"Auto\"",[38,70,71],{"class":48},",\n",[38,73,75,78,80,83],{"class":40,"line":74},4,[38,76,77],{"class":61},"        \"name\"",[38,79,65],{"class":48},[38,81,82],{"class":44},"\"auto\"",[38,84,71],{"class":48},[38,86,88,91,93,96],{"class":40,"line":87},5,[38,89,90],{"class":61},"        \"resetOtherSettings\"",[38,92,65],{"class":48},[38,94,95],{"class":61},"true",[38,97,71],{"class":48},[38,99,101,104],{"class":40,"line":100},6,[38,102,103],{"class":61},"        \"settings\"",[38,105,106],{"class":48},": {\n",[38,108,110,113,115,118],{"class":40,"line":109},7,[38,111,112],{"class":61},"            \"backgroundColor\"",[38,114,65],{"class":48},[38,116,117],{"class":44},"\"muted\"",[38,119,71],{"class":48},[38,121,123,126,128,131],{"class":40,"line":122},8,[38,124,125],{"class":61},"            \"borderColor\"",[38,127,65],{"class":48},[38,129,130],{"class":44},"\"vibrant\"",[38,132,71],{"class":48},[38,134,136,139,141,144],{"class":40,"line":135},9,[38,137,138],{"class":61},"            \"textColor\"",[38,140,65],{"class":48},[38,142,143],{"class":44},"\"lightvibrant\"",[38,145,71],{"class":48},[38,147,149,152,154],{"class":40,"line":148},10,[38,150,151],{"class":61},"            \"shadowColor\"",[38,153,65],{"class":48},[38,155,156],{"class":44},"\"darkmuted\"\n",[38,158,160],{"class":40,"line":159},11,[38,161,162],{"class":48},"        }\n",[38,164,166],{"class":40,"line":165},12,[38,167,168],{"class":48},"    },\n",[38,170,172],{"class":40,"line":171},13,[38,173,55],{"class":48},[38,175,177,179,181,184],{"class":40,"line":176},14,[38,178,62],{"class":61},[38,180,65],{"class":48},[38,182,183],{"class":44},"\"Black & White\"",[38,185,71],{"class":48},[38,187,189,191,193,196],{"class":40,"line":188},15,[38,190,77],{"class":61},[38,192,65],{"class":48},[38,194,195],{"class":44},"\"blackWhite\"",[38,197,71],{"class":48},[38,199,201,203,205,207],{"class":40,"line":200},16,[38,202,90],{"class":61},[38,204,65],{"class":48},[38,206,95],{"class":61},[38,208,71],{"class":48},[38,210,212,214],{"class":40,"line":211},17,[38,213,103],{"class":61},[38,215,106],{"class":48},[38,217,219,221,223,226],{"class":40,"line":218},18,[38,220,112],{"class":61},[38,222,65],{"class":48},[38,224,225],{"class":44},"\"#000000\"",[38,227,71],{"class":48},[38,229,231,233,235,238],{"class":40,"line":230},19,[38,232,125],{"class":61},[38,234,65],{"class":48},[38,236,237],{"class":44},"\"#666666\"",[38,239,71],{"class":48},[38,241,243,245,247,250],{"class":40,"line":242},20,[38,244,138],{"class":61},[38,246,65],{"class":48},[38,248,249],{"class":44},"\"#ffffff\"",[38,251,71],{"class":48},[38,253,255,257,259],{"class":40,"line":254},21,[38,256,151],{"class":61},[38,258,65],{"class":48},[38,260,261],{"class":44},"\"00000033\"\n",[38,263,265],{"class":40,"line":264},22,[38,266,162],{"class":48},[38,268,270],{"class":40,"line":269},23,[38,271,272],{"class":48},"    }\n",[38,274,276],{"class":40,"line":275},24,[38,277,278],{"class":48},"]\n",[280,281,283],"alert",{"type":282},"info",[17,284,285],{},"Notes: The \"resetOtherSettings\" boolean instructs Hologram whether or not to reset other settings, such as shadow, etc. when selecting that preset.",[287,288,290],"h2",{"id":289},"default-preset","Default Preset",[17,292,293,294,297,298,301],{},"If you want a particular preset to be called when the widget is loaded you can add the ",[24,295,296],{},"defaultPreset"," object to the root of the ",[24,299,300],{},"widget.json"," file:",[29,303,305],{"className":31,"code":304,"language":33,"meta":34,"style":34},"{\n    \"name\": \"My Widget\",\n    \"id\": \"my-widget\",\n    \"author\": \"Your Name\",\n    \"version\": \"1.0.0\",\n    \"description\": \"\",\n    \"aspectRatio\": \"auto-height\",\n    \"defaultPreset\": \"presetName\"\n\n    // etc....\n}\n",[24,306,307,312,324,336,348,360,372,384,394,400,406],{"__ignoreMap":34},[38,308,309],{"class":40,"line":41},[38,310,311],{"class":48},"{\n",[38,313,314,317,319,322],{"class":40,"line":52},[38,315,316],{"class":61},"    \"name\"",[38,318,65],{"class":48},[38,320,321],{"class":44},"\"My Widget\"",[38,323,71],{"class":48},[38,325,326,329,331,334],{"class":40,"line":58},[38,327,328],{"class":61},"    \"id\"",[38,330,65],{"class":48},[38,332,333],{"class":44},"\"my-widget\"",[38,335,71],{"class":48},[38,337,338,341,343,346],{"class":40,"line":74},[38,339,340],{"class":61},"    \"author\"",[38,342,65],{"class":48},[38,344,345],{"class":44},"\"Your Name\"",[38,347,71],{"class":48},[38,349,350,353,355,358],{"class":40,"line":87},[38,351,352],{"class":61},"    \"version\"",[38,354,65],{"class":48},[38,356,357],{"class":44},"\"1.0.0\"",[38,359,71],{"class":48},[38,361,362,365,367,370],{"class":40,"line":100},[38,363,364],{"class":61},"    \"description\"",[38,366,65],{"class":48},[38,368,369],{"class":44},"\"\"",[38,371,71],{"class":48},[38,373,374,377,379,382],{"class":40,"line":109},[38,375,376],{"class":61},"    \"aspectRatio\"",[38,378,65],{"class":48},[38,380,381],{"class":44},"\"auto-height\"",[38,383,71],{"class":48},[38,385,386,389,391],{"class":40,"line":122},[38,387,388],{"class":61},"    \"defaultPreset\"",[38,390,65],{"class":48},[38,392,393],{"class":44},"\"presetName\"\n",[38,395,396],{"class":40,"line":135},[38,397,399],{"emptyLinePlaceholder":398},true,"\n",[38,401,402],{"class":40,"line":148},[38,403,405],{"class":404},"sJ8bj","    // etc....\n",[38,407,408],{"class":40,"line":159},[38,409,410],{"class":48},"}\n",[412,413,414],"style",{},"html pre.shiki code .s4wv1, html code.shiki .s4wv1{--shiki-default:#9ECBFF;--shiki-dark:#9ECBFF}html pre.shiki code .suv1-, html code.shiki .suv1-{--shiki-default:#E1E4E8;--shiki-dark:#E1E4E8}html pre.shiki code .s8ozJ, html code.shiki .s8ozJ{--shiki-default:#79B8FF;--shiki-dark:#79B8FF}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);}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}",{"title":34,"searchDepth":52,"depth":52,"links":416},[417],{"id":289,"depth":52,"text":290},"How to define and use widget presets in Hologram widgets.",[420,424],{"title":421,"path":422,"stem":423,"children":-1},"Widget Color Settings","/docs/developer/widget-color-settings","docs/developer/05.widget-color-settings",{"title":425,"path":426,"stem":427,"children":-1},"Making Widgets Scale","/docs/developer/making-widgets-scale","docs/developer/07.making-widgets-scale",[429],{"title":430,"path":431,"stem":432,"children":433,"navigation":398},"Welcome to Hologram","/docs","docs/0.index",[434,435,439,443,447,506],{"title":430,"path":431,"stem":432,"navigation":398},{"title":436,"path":437,"stem":438,"navigation":398},"Themes & Wallpapers","/docs/themes","docs/1.themes",{"title":440,"path":441,"stem":442,"navigation":398},"Widgets","/docs/widgets","docs/2.widgets",{"title":444,"path":445,"stem":446,"navigation":398},"Settings","/docs/settings","docs/4.settings",{"title":448,"navigation":449,"sectionTitle":450,"collapsible":398,"path":451,"stem":452,"children":453,"page":5},"Developer",{"sectionTitle":450,"collapsible":398},"Developing Widgets","/docs/developer","docs/developer",[454,458,464,468,472,473,475,476,480,484,490,494,498,502],{"title":455,"path":456,"stem":457,"navigation":398},"Widget Developer Guide","/docs/developer/guide","docs/developer/01.guide",{"title":459,"path":460,"stem":461,"navigation":462,"sectionTitle":463},"Hologram Widget Class","/docs/developer/widget-class","docs/developer/02.widget-class",{"sectionTitle":463},"Building Widgets",{"title":465,"path":466,"stem":467,"navigation":398},"Widget Config","/docs/developer/widget-config","docs/developer/03.widget-config",{"title":469,"path":470,"stem":471,"navigation":398},"Widget Settings","/docs/developer/widget-settings","docs/developer/04.widget-settings",{"title":421,"path":422,"stem":423,"navigation":398},{"title":8,"path":4,"stem":474,"navigation":398},"docs/developer/06.widget-presets",{"title":425,"path":426,"stem":427,"navigation":398},{"title":477,"path":478,"stem":479,"navigation":398},"Simple Widget Example","/docs/developer/simple-example","docs/developer/07.simple-example",{"title":481,"path":482,"stem":483,"navigation":398},"Apple Script","/docs/developer/apple-script","docs/developer/08.apple-script",{"title":485,"path":486,"stem":487,"navigation":488,"sectionTitle":489},"Hologram API","/docs/developer/api","docs/developer/10.api",{"sectionTitle":489},"API Reference",{"title":491,"path":492,"stem":493,"navigation":398},"Weather","/docs/developer/weather","docs/developer/11.weather",{"title":495,"path":496,"stem":497,"navigation":398},"Timer","/docs/developer/timer","docs/developer/12.timer",{"title":499,"path":500,"stem":501,"navigation":398},"Utility Class","/docs/developer/util","docs/developer/13.util",{"title":503,"path":504,"stem":505,"navigation":398},"Third Party Libraries","/docs/developer/third-party","docs/developer/14.third-party",{"title":507,"path":508,"stem":509,"navigation":510,"sectionTitle":511},"Frequently Asked Questions","/docs/faq","docs/faq",{"sectionTitle":511},"Help",1755585913038]