[{"data":1,"prerenderedAt":762},["ShallowReactive",2],{"doc-content/docs/developer/widget-color-settings":3,"doc-surroundings/docs/developer/widget-color-settings":671,"docs-navigation":680},{"path":4,"draft":5,"date":6,"dateUpdated":7,"title":8,"body":9,"description":670,"image":6,"imageAlt":6},"/docs/developer/widget-color-settings",false,null,"2025-05-15","Widget Color Settings",{"type":10,"value":11,"toc":664},"minimark",[12,16,26,34,127,138,141,146,153,161,164,170,172,176,179,186,256,259,266,345,348,385,388,431,433,438,441,475,478,660],[13,14,8],"h1",{"id":15},"widget-color-settings",[17,18,19,20,25],"p",{},"You can specify a widget's color controls in your ",[21,22,24],"a",{"href":23},"/docs/developer/widget-config","Widget Config"," file.",[17,27,28,29,33],{},"Here's an example of a color setting called ",[30,31,32],"code",{},"textColor",":",[35,36,41],"pre",{"className":37,"code":38,"language":39,"meta":40,"style":40},"language-json shiki shiki-themes github-dark github-dark","\"settings\": [\n    {\n        \"name\": \"textColor\",\n        \"type\": \"color\",\n        \"defaultValue\": \"#ff0000\",\n        \"defaultAutoColor\": \"lightvibrant\"\n    }\n]\n","json","",[30,42,43,56,62,78,91,104,115,121],{"__ignoreMap":40},[44,45,48,52],"span",{"class":46,"line":47},"line",1,[44,49,51],{"class":50},"s4wv1","\"settings\"",[44,53,55],{"class":54},"suv1-",": [\n",[44,57,59],{"class":46,"line":58},2,[44,60,61],{"class":54},"    {\n",[44,63,65,69,72,75],{"class":46,"line":64},3,[44,66,68],{"class":67},"s8ozJ","        \"name\"",[44,70,71],{"class":54},": ",[44,73,74],{"class":50},"\"textColor\"",[44,76,77],{"class":54},",\n",[44,79,81,84,86,89],{"class":46,"line":80},4,[44,82,83],{"class":67},"        \"type\"",[44,85,71],{"class":54},[44,87,88],{"class":50},"\"color\"",[44,90,77],{"class":54},[44,92,94,97,99,102],{"class":46,"line":93},5,[44,95,96],{"class":67},"        \"defaultValue\"",[44,98,71],{"class":54},[44,100,101],{"class":50},"\"#ff0000\"",[44,103,77],{"class":54},[44,105,107,110,112],{"class":46,"line":106},6,[44,108,109],{"class":67},"        \"defaultAutoColor\"",[44,111,71],{"class":54},[44,113,114],{"class":50},"\"lightvibrant\"\n",[44,116,118],{"class":46,"line":117},7,[44,119,120],{"class":54},"    }\n",[44,122,124],{"class":46,"line":123},8,[44,125,126],{"class":54},"]\n",[128,129,131],"alert",{"type":130},"info",[17,132,133,134,137],{},"Note that we've specified the setting as ",[30,135,136],{},"type: \"color\"",". Hologram will create a color control for that setting in the interface.",[139,140],"hr",{},[142,143,145],"h2",{"id":144},"interacting-with-color-settings","Interacting with color settings",[17,147,148,149,152],{},"All widget settings are injected into to the ",[30,150,151],{},"settings"," property of the Hologram object.",[35,154,159],{"className":155,"code":157,"language":158},[156],"language-text","this.settings.nameOfSetting\n","text",[30,160,157],{"__ignoreMap":40},[17,162,163],{},"For example, to access the above example in your code you'd do this:",[35,165,168],{"className":166,"code":167,"language":158},[156],"this.settings.textColor\n",[30,169,167],{"__ignoreMap":40},[139,171],{},[142,173,175],{"id":174},"css-variables","CSS Variables",[17,177,178],{},"You will typically use your color settings as CSS variables so that changes made via the color controls in the interface are instantly updated in the widget.",[17,180,181,182,185],{},"To convert your color settings into CSS variables add the following code in your ",[30,183,184],{},"index.js"," file:",[35,187,191],{"className":188,"code":189,"language":190,"meta":40,"style":40},"language-js shiki shiki-themes github-dark github-dark","// Get the user defined colors\nthis.fetchAllColors((colors) => {\n    // Convert colors to css variables so they can be used\n    // in CSS or in element style parameters in your HTML template\n    this.addCssVariables(colors)\n})\n","js",[30,192,193,199,228,233,238,251],{"__ignoreMap":40},[44,194,195],{"class":46,"line":47},[44,196,198],{"class":197},"sJ8bj","// Get the user defined colors\n",[44,200,201,204,207,211,214,218,221,225],{"class":46,"line":58},[44,202,203],{"class":67},"this",[44,205,206],{"class":54},".",[44,208,210],{"class":209},"sFR8T","fetchAllColors",[44,212,213],{"class":54},"((",[44,215,217],{"class":216},"s-3mD","colors",[44,219,220],{"class":54},") ",[44,222,224],{"class":223},"sOPea","=>",[44,226,227],{"class":54}," {\n",[44,229,230],{"class":46,"line":64},[44,231,232],{"class":197},"    // Convert colors to css variables so they can be used\n",[44,234,235],{"class":46,"line":80},[44,236,237],{"class":197},"    // in CSS or in element style parameters in your HTML template\n",[44,239,240,243,245,248],{"class":46,"line":93},[44,241,242],{"class":67},"    this",[44,244,206],{"class":54},[44,246,247],{"class":209},"addCssVariables",[44,249,250],{"class":54},"(colors)\n",[44,252,253],{"class":46,"line":106},[44,254,255],{"class":54},"})\n",[17,257,258],{},"The callback is automatically called when a user edits the colors, or when an \"auto color\" needs to be updated due to a wallpaper change.",[17,260,261,262,265],{},"This function will typically be placed into the ",[30,263,264],{},"mounted"," function in your code:",[35,267,269],{"className":188,"code":268,"language":190,"meta":40,"style":40},"export default {\n    extends: HologramWidget,\n    mounted() {\n        this.fetchAllColors((colors) => {\n            this.addCssVariables(colors)\n        })\n    },\n    // ...\n}\n",[30,270,271,281,286,294,313,324,329,334,339],{"__ignoreMap":40},[44,272,273,276,279],{"class":46,"line":47},[44,274,275],{"class":223},"export",[44,277,278],{"class":223}," default",[44,280,227],{"class":54},[44,282,283],{"class":46,"line":58},[44,284,285],{"class":54},"    extends: HologramWidget,\n",[44,287,288,291],{"class":46,"line":64},[44,289,290],{"class":209},"    mounted",[44,292,293],{"class":54},"() {\n",[44,295,296,299,301,303,305,307,309,311],{"class":46,"line":80},[44,297,298],{"class":67},"        this",[44,300,206],{"class":54},[44,302,210],{"class":209},[44,304,213],{"class":54},[44,306,217],{"class":216},[44,308,220],{"class":54},[44,310,224],{"class":223},[44,312,227],{"class":54},[44,314,315,318,320,322],{"class":46,"line":93},[44,316,317],{"class":67},"            this",[44,319,206],{"class":54},[44,321,247],{"class":209},[44,323,250],{"class":54},[44,325,326],{"class":46,"line":106},[44,327,328],{"class":54},"        })\n",[44,330,331],{"class":46,"line":117},[44,332,333],{"class":54},"    },\n",[44,335,336],{"class":46,"line":123},[44,337,338],{"class":197},"    // ...\n",[44,340,342],{"class":46,"line":341},9,[44,343,344],{"class":54},"}\n",[17,346,347],{},"The above example will be turned into a variable that you can use in your CSS:",[35,349,353],{"className":350,"code":351,"language":352,"meta":40,"style":40},"language-css shiki shiki-themes github-dark github-dark",".some-class {\n    color: var(--textColor);\n}\n","css",[30,354,355,362,381],{"__ignoreMap":40},[44,356,357,360],{"class":46,"line":47},[44,358,359],{"class":209},".some-class",[44,361,227],{"class":54},[44,363,364,367,369,372,375,378],{"class":46,"line":58},[44,365,366],{"class":67},"    color",[44,368,71],{"class":54},[44,370,371],{"class":67},"var",[44,373,374],{"class":54},"(",[44,376,377],{"class":216},"--textColor",[44,379,380],{"class":54},");\n",[44,382,383],{"class":46,"line":64},[44,384,344],{"class":54},[17,386,387],{},"Or directly in your HTML tags:",[35,389,393],{"className":390,"code":391,"language":392,"meta":40,"style":40},"language-html shiki shiki-themes github-dark github-dark","template: /*html*/ `\n\u003Cdiv style=\"color: var(--textColor)\">\u003C/div>\n`\n","html",[30,394,395,400,426],{"__ignoreMap":40},[44,396,397],{"class":46,"line":47},[44,398,399],{"class":54},"template: /*html*/ `\n",[44,401,402,405,409,412,415,418,421,423],{"class":46,"line":58},[44,403,404],{"class":54},"\u003C",[44,406,408],{"class":407},"sxg3X","div",[44,410,411],{"class":209}," style",[44,413,414],{"class":54},"=",[44,416,417],{"class":50},"\"color: var(--textColor)\"",[44,419,420],{"class":54},">\u003C/",[44,422,408],{"class":407},[44,424,425],{"class":54},">\n",[44,427,428],{"class":46,"line":64},[44,429,430],{"class":54},"`\n",[139,432],{},[434,435,437],"h3",{"id":436},"auto-colors","Auto Colors",[17,439,440],{},"There are six available automatic colors. The value of these colors is set according to the color data in a wallpaper.",[442,443,444,450,455,460,465,470],"ul",{},[445,446,447],"li",{},[30,448,449],{},"darkvibrant",[445,451,452],{},[30,453,454],{},"darkmuted",[445,456,457],{},[30,458,459],{},"muted",[445,461,462],{},[30,463,464],{},"vibrant",[445,466,467],{},[30,468,469],{},"lightvibrant",[445,471,472],{},[30,473,474],{},"lightmuted",[17,476,477],{},"Here's an example of how those variables are used:",[35,479,481],{"className":37,"code":480,"language":39,"meta":40,"style":40},"\"settings\": [\n\n    {\n        \"name\": \"backgroundColor\",\n        \"type\": \"color\",\n        \"defaultValue\": \"#000000\",\n        \"defaultAutoColor\": \"darkmuted\"\n    },\n    {\n        \"name\": \"borderColor\",\n        \"type\": \"color\",\n        \"defaultValue\": \"#666666\",\n        \"defaultAutoColor\": \"vibrant\"\n    },\n    {\n        \"name\": \"textColor\",\n        \"type\": \"color\",\n        \"defaultValue\": \"#ff0000\",\n        \"defaultAutoColor\": \"lightvibrant\"\n    }\n\n]\n",[30,482,483,489,495,499,510,520,531,540,544,548,560,571,583,593,598,603,614,625,636,645,650,655],{"__ignoreMap":40},[44,484,485,487],{"class":46,"line":47},[44,486,51],{"class":50},[44,488,55],{"class":54},[44,490,491],{"class":46,"line":58},[44,492,494],{"emptyLinePlaceholder":493},true,"\n",[44,496,497],{"class":46,"line":64},[44,498,61],{"class":54},[44,500,501,503,505,508],{"class":46,"line":80},[44,502,68],{"class":67},[44,504,71],{"class":54},[44,506,507],{"class":50},"\"backgroundColor\"",[44,509,77],{"class":54},[44,511,512,514,516,518],{"class":46,"line":93},[44,513,83],{"class":67},[44,515,71],{"class":54},[44,517,88],{"class":50},[44,519,77],{"class":54},[44,521,522,524,526,529],{"class":46,"line":106},[44,523,96],{"class":67},[44,525,71],{"class":54},[44,527,528],{"class":50},"\"#000000\"",[44,530,77],{"class":54},[44,532,533,535,537],{"class":46,"line":117},[44,534,109],{"class":67},[44,536,71],{"class":54},[44,538,539],{"class":50},"\"darkmuted\"\n",[44,541,542],{"class":46,"line":123},[44,543,333],{"class":54},[44,545,546],{"class":46,"line":341},[44,547,61],{"class":54},[44,549,551,553,555,558],{"class":46,"line":550},10,[44,552,68],{"class":67},[44,554,71],{"class":54},[44,556,557],{"class":50},"\"borderColor\"",[44,559,77],{"class":54},[44,561,563,565,567,569],{"class":46,"line":562},11,[44,564,83],{"class":67},[44,566,71],{"class":54},[44,568,88],{"class":50},[44,570,77],{"class":54},[44,572,574,576,578,581],{"class":46,"line":573},12,[44,575,96],{"class":67},[44,577,71],{"class":54},[44,579,580],{"class":50},"\"#666666\"",[44,582,77],{"class":54},[44,584,586,588,590],{"class":46,"line":585},13,[44,587,109],{"class":67},[44,589,71],{"class":54},[44,591,592],{"class":50},"\"vibrant\"\n",[44,594,596],{"class":46,"line":595},14,[44,597,333],{"class":54},[44,599,601],{"class":46,"line":600},15,[44,602,61],{"class":54},[44,604,606,608,610,612],{"class":46,"line":605},16,[44,607,68],{"class":67},[44,609,71],{"class":54},[44,611,74],{"class":50},[44,613,77],{"class":54},[44,615,617,619,621,623],{"class":46,"line":616},17,[44,618,83],{"class":67},[44,620,71],{"class":54},[44,622,88],{"class":50},[44,624,77],{"class":54},[44,626,628,630,632,634],{"class":46,"line":627},18,[44,629,96],{"class":67},[44,631,71],{"class":54},[44,633,101],{"class":50},[44,635,77],{"class":54},[44,637,639,641,643],{"class":46,"line":638},19,[44,640,109],{"class":67},[44,642,71],{"class":54},[44,644,114],{"class":50},[44,646,648],{"class":46,"line":647},20,[44,649,120],{"class":54},[44,651,653],{"class":46,"line":652},21,[44,654,494],{"emptyLinePlaceholder":493},[44,656,658],{"class":46,"line":657},22,[44,659,126],{"class":54},[661,662,663],"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}html pre.shiki code .sFR8T, html code.shiki .sFR8T{--shiki-default:#B392F0;--shiki-dark:#B392F0}html pre.shiki code .s-3mD, html code.shiki .s-3mD{--shiki-default:#FFAB70;--shiki-dark:#FFAB70}html pre.shiki code .sOPea, html code.shiki .sOPea{--shiki-default:#F97583;--shiki-dark:#F97583}html pre.shiki code .sxg3X, html code.shiki .sxg3X{--shiki-default:#85E89D;--shiki-dark:#85E89D}",{"title":40,"searchDepth":58,"depth":58,"links":665},[666,667],{"id":144,"depth":58,"text":145},{"id":174,"depth":58,"text":175,"children":668},[669],{"id":436,"depth":64,"text":437},"How to define and use color settings in Hologram widgets.",[672,676],{"title":673,"path":674,"stem":675,"children":-1},"Widget Settings","/docs/developer/widget-settings","docs/developer/04.widget-settings",{"title":677,"path":678,"stem":679,"children":-1},"Creating Widget Presets","/docs/developer/widget-presets","docs/developer/06.widget-presets",[681],{"title":682,"path":683,"stem":684,"children":685,"navigation":493},"Welcome to Hologram","/docs","docs/0.index",[686,687,691,695,699,756],{"title":682,"path":683,"stem":684,"navigation":493},{"title":688,"path":689,"stem":690,"navigation":493},"Themes & Wallpapers","/docs/themes","docs/1.themes",{"title":692,"path":693,"stem":694,"navigation":493},"Widgets","/docs/widgets","docs/2.widgets",{"title":696,"path":697,"stem":698,"navigation":493},"Settings","/docs/settings","docs/4.settings",{"title":700,"navigation":701,"sectionTitle":702,"collapsible":493,"path":703,"stem":704,"children":705,"page":5},"Developer",{"sectionTitle":702,"collapsible":493},"Developing Widgets","/docs/developer","docs/developer",[706,710,716,718,719,721,722,726,730,734,740,744,748,752],{"title":707,"path":708,"stem":709,"navigation":493},"Widget Developer Guide","/docs/developer/guide","docs/developer/01.guide",{"title":711,"path":712,"stem":713,"navigation":714,"sectionTitle":715},"Hologram Widget Class","/docs/developer/widget-class","docs/developer/02.widget-class",{"sectionTitle":715},"Building Widgets",{"title":24,"path":23,"stem":717,"navigation":493},"docs/developer/03.widget-config",{"title":673,"path":674,"stem":675,"navigation":493},{"title":8,"path":4,"stem":720,"navigation":493},"docs/developer/05.widget-color-settings",{"title":677,"path":678,"stem":679,"navigation":493},{"title":723,"path":724,"stem":725,"navigation":493},"Making Widgets Scale","/docs/developer/making-widgets-scale","docs/developer/07.making-widgets-scale",{"title":727,"path":728,"stem":729,"navigation":493},"Simple Widget Example","/docs/developer/simple-example","docs/developer/07.simple-example",{"title":731,"path":732,"stem":733,"navigation":493},"Apple Script","/docs/developer/apple-script","docs/developer/08.apple-script",{"title":735,"path":736,"stem":737,"navigation":738,"sectionTitle":739},"Hologram API","/docs/developer/api","docs/developer/10.api",{"sectionTitle":739},"API Reference",{"title":741,"path":742,"stem":743,"navigation":493},"Weather","/docs/developer/weather","docs/developer/11.weather",{"title":745,"path":746,"stem":747,"navigation":493},"Timer","/docs/developer/timer","docs/developer/12.timer",{"title":749,"path":750,"stem":751,"navigation":493},"Utility Class","/docs/developer/util","docs/developer/13.util",{"title":753,"path":754,"stem":755,"navigation":493},"Third Party Libraries","/docs/developer/third-party","docs/developer/14.third-party",{"title":757,"path":758,"stem":759,"navigation":760,"sectionTitle":761},"Frequently Asked Questions","/docs/faq","docs/faq",{"sectionTitle":761},"Help",1755585913038]