[{"data":1,"prerenderedAt":478},["ShallowReactive",2],{"guide-\u002Fen\u002Fguides\u002Feditor\u002Ftheme":3,"guide-navigation-guides_en":297,"guide-surround-\u002Fen\u002Fguides\u002Feditor\u002Ftheme":473},{"id":4,"title":5,"body":6,"description":288,"extension":289,"meta":290,"navigation":291,"path":293,"seo":294,"stem":295,"__hash__":296},"guides_en\u002Fen\u002Fguides\u002F2.editor\u002F6.theme.md","Theme",{"type":7,"value":8,"toc":276},"minimark",[9,13,20,27,34,38,41,48,59,62,66,82,88,91,95,98,124,130,133,137,148,154,168,174,178,198,204,208,230,236,240,247,251,258],[10,11,12],"p",{},"The theme sets the colors, fonts, corners and button styles across every page of your site. You set it once, and every block and every page follows it.",[10,14,15,16,19],{},"Press the palette icon on the editor's left rail to open the ",[17,18,5],"strong",{}," panel. Every change shows up on the page next to it immediately.",[10,21,22],{},[23,24],"img",{"alt":25,"src":26},"The editor with the Theme panel open","https:\u002F\u002Fmedia.bunnyrain.com\u002Fguides\u002Fen\u002Ftheme\u002F01-theme-panel.webp",[10,28,29,30,33],{},"The panel has six sections. Each section's header shows its current value (for example ",[17,31,32],{},"Colors: Terracotta · Linen","); press the header to open the section.",[35,36,5],"h2",{"id":37},"theme",[10,39,40],{},"The quickest start is a ready-made theme. Press one and the colors, fonts and corners change together.",[10,42,43],{},[23,44],{"alt":45,"src":46,"width":47},"Ready-made themes: Mono, Signal, Cobalt, Breeze, Blossom, Orchid, Ember, Carbon, Clay, Pill, Bubblegum","https:\u002F\u002Fmedia.bunnyrain.com\u002Fguides\u002Fen\u002Ftheme\u002F02-presets.webp",560,[10,49,50],{},[51,52],"video",{"src":53,"poster":54,"controls":55,"muted":55,"playsInline":55,"preload":56,"width":57,"height":58},"https:\u002F\u002Fmedia.bunnyrain.com\u002Fguides\u002Fen\u002Ftheme\u002Fpresets.mp4","https:\u002F\u002Fmedia.bunnyrain.com\u002Fguides\u002Fen\u002Ftheme\u002Fpresets-poster.webp",true,"metadata",1600,1000,[10,60,61],{},"Try the themes one by one; once you find one you like, you can change any setting in the sections below. Even if you switch to another theme later, the settings you changed yourself are kept.",[35,63,65],{"id":64},"colors","Colors",[67,68,69,76],"ul",{},[70,71,72,75],"li",{},[17,73,74],{},"Primary:"," Used for buttons, links and highlights. It's the color people remember your site by; pick one that goes with your logo or sign.",[70,77,78,81],{},[17,79,80],{},"Base color:"," The neutral color used for backgrounds and text. Warm (cream, sand) or cool (gray, slate) tones set the mood of the site.",[10,83,84],{},[23,85],{"alt":86,"src":87,"width":47},"Colors: Primary and Base color swatches","https:\u002F\u002Fmedia.bunnyrain.com\u002Fguides\u002Fen\u002Ftheme\u002F03-colors.webp",[10,89,90],{},"The colors you give text with the formatting toolbar come from here too; when you change the colors, that text changes with them.",[35,92,94],{"id":93},"color-mode","Color mode",[10,96,97],{},"Choose whether your site looks light or dark:",[67,99,100,118],{},[70,101,102,105,106,109,110,113,114,117],{},[17,103,104],{},"What visitors see:"," ",[17,107,108],{},"Light",", ",[17,111,112],{},"Dark"," or ",[17,115,116],{},"Match device",". With Match device, a visitor whose phone is in dark mode sees your site in dark.",[70,119,120,123],{},[17,121,122],{},"Let visitors switch:"," When on, a light \u002F dark button is added to the header; the visitor's choice is remembered in their browser.",[10,125,126],{},[23,127],{"alt":128,"src":129,"width":47},"Color mode: What visitors see and Let visitors switch","https:\u002F\u002Fmedia.bunnyrain.com\u002Fguides\u002Fen\u002Ftheme\u002F04-colorMode.webp",[10,131,132],{},"You don't pick dark colors separately; they come from your theme. Check how your site looks in dark mode with the sun \u002F moon buttons at the top of the editor.",[35,134,136],{"id":135},"fonts","Fonts",[10,138,139,140,143,144,147],{},"You can pick separate fonts for ",[17,141,142],{},"Headings"," and ",[17,145,146],{},"Text",". The list opens with a few hand-picked fonts; as you type in the box, it searches all Google Fonts.",[10,149,150],{},[23,151],{"alt":152,"src":153,"width":47},"Fonts: Headings Source Serif 4, Text DM Sans","https:\u002F\u002Fmedia.bunnyrain.com\u002Fguides\u002Fen\u002Ftheme\u002F05-fonts.webp",[67,155,156,162],{},[70,157,158,161],{},[17,159,160],{},"Uppercase headings:"," Shows headings in capital letters. Appearance only; the text you typed doesn't change.",[70,163,164,167],{},[17,165,166],{},"Fine-tune:"," Details such as font weights, letter spacing and line height.",[169,170,171],"tip",{},[10,172,173],{},"If you pick two different fonts, make one a serif (like Source Serif or Lora) and the other a sans serif (like DM Sans or Inter). Choose a readable, simple font for body text and keep the showy ones for headings.",[35,175,177],{"id":176},"corners-and-width","Corners and width",[67,179,180,186,192],{},[70,181,182,185],{},[17,183,184],{},"Corners:"," How rounded the corners of buttons, cards and images are. Square corners look serious; rounded ones look friendly.",[70,187,188,191],{},[17,189,190],{},"Content width:"," How wide the content can spread on large screens.",[70,193,194,197],{},[17,195,196],{},"Size:"," The size of buttons and form fields.",[10,199,200],{},[23,201],{"alt":202,"src":203,"width":47},"Corners and width: corner options, content width and size","https:\u002F\u002Fmedia.bunnyrain.com\u002Fguides\u002Fen\u002Ftheme\u002F06-shape.webp",[35,205,207],{"id":206},"buttons-and-cards","Buttons and cards",[10,209,210,211,109,214,109,217,109,220,109,223,113,226,229],{},"Choose the style of buttons, cards and form fields: ",[17,212,213],{},"Solid",[17,215,216],{},"Outline",[17,218,219],{},"Soft",[17,221,222],{},"Soft + outline",[17,224,225],{},"Plain",[17,227,228],{},"Link",". Each option has a small preview.",[10,231,232],{},[23,233],{"alt":234,"src":235,"width":47},"Buttons and cards: button and card styles","https:\u002F\u002Fmedia.bunnyrain.com\u002Fguides\u002Fen\u002Ftheme\u002F07-components.webp",[35,237,239],{"id":238},"go-back-to-the-theme","Go back to the theme",[10,241,242,243,246],{},"If you changed settings away from the ready-made theme's values, the top of the panel says how many settings differ, and the changed section's header shows a dot. Press ",[17,244,245],{},"Back to theme"," to remove these changes and bring back the theme's own values. This can't be undone with the undo button, but it only affects the draft.",[35,248,250],{"id":249},"the-theme-changes-when-you-publish","The theme changes when you publish",[10,252,253,254,257],{},"Theme changes go into the draft just like pages; visitors see the old theme until you press ",[17,255,256],{},"Publish",". So feel free to experiment with colors.",[10,259,260,262,263,265,266,269,270,275],{},[17,261,256],{}," publishes the theme and all pages together. To publish only the theme, open the arrow next to Publish and press ",[17,264,256],{}," on the ",[17,267,268],{},"Site appearance"," row. See ",[271,272,274],"a",{"href":273},"\u002Fen\u002Fguides\u002Feditor\u002Fpublishing","Publishing and publish history",".",{"title":277,"searchDepth":278,"depth":278,"links":279},"",2,[280,281,282,283,284,285,286,287],{"id":37,"depth":278,"text":5},{"id":64,"depth":278,"text":65},{"id":93,"depth":278,"text":94},{"id":135,"depth":278,"text":136},{"id":176,"depth":278,"text":177},{"id":206,"depth":278,"text":207},{"id":238,"depth":278,"text":239},{"id":249,"depth":278,"text":250},"Pick a ready-made theme, then fine-tune colors, light and dark mode, fonts, corners, buttons and cards to suit your site.","md",{},{"icon":292},"i-ph-palette","\u002Fen\u002Fguides\u002Feditor\u002Ftheme",{"title":5,"description":288},"en\u002Fguides\u002F2.editor\u002F6.theme","pUfm_UUyh-RWzqsaQZl6KTNbcyZu8TYQQa0zwlziXZA",[298],{"title":299,"path":300,"stem":301,"children":302,"page":330},"En","\u002Fen","en",[303],{"title":304,"icon":305,"path":306,"stem":307,"children":308,"page":330},"User guide","i-ph-book-open","\u002Fen\u002Fguides","en\u002Fguides",[309,331,376,397,418,443,459],{"title":310,"icon":311,"path":312,"stem":313,"children":314,"page":330},"Getting started","i-ph-rocket-launch","\u002Fen\u002Fguides\u002Fgetting-started","en\u002Fguides\u002F1.getting-started",[315,320,325],{"title":316,"path":317,"stem":318,"icon":319},"Create your first site","\u002Fen\u002Fguides\u002Fgetting-started\u002Fcreate-your-site","en\u002Fguides\u002F1.getting-started\u002F1.create-your-site","i-ph-globe",{"title":321,"path":322,"stem":323,"icon":324},"Dashboard tour","\u002Fen\u002Fguides\u002Fgetting-started\u002Fpanel-tour","en\u002Fguides\u002F1.getting-started\u002F2.panel-tour","i-ph-compass",{"title":326,"path":327,"stem":328,"icon":329},"Your account","\u002Fen\u002Fguides\u002Fgetting-started\u002Faccount","en\u002Fguides\u002F1.getting-started\u002F3.account","i-ph-user-circle",false,{"title":332,"icon":333,"path":334,"stem":335,"children":336,"page":330},"Editor","i-ph-pencil-simple","\u002Fen\u002Fguides\u002Feditor","en\u002Fguides\u002F2.editor",[337,342,347,352,357,362,363,368,371],{"title":338,"path":339,"stem":340,"icon":341},"Editor tour","\u002Fen\u002Fguides\u002Feditor\u002Feditor-tour","en\u002Fguides\u002F2.editor\u002F1.editor-tour","i-ph-layout",{"title":343,"path":344,"stem":345,"icon":346},"Blocks and layouts","\u002Fen\u002Fguides\u002Feditor\u002Fsections","en\u002Fguides\u002F2.editor\u002F2.sections","i-ph-stack-plus",{"title":348,"path":349,"stem":350,"icon":351},"Editing text and images","\u002Fen\u002Fguides\u002Feditor\u002Ftext-and-images","en\u002Fguides\u002F2.editor\u002F3.text-and-images","i-ph-text-aa",{"title":353,"path":354,"stem":355,"icon":356},"Pages","\u002Fen\u002Fguides\u002Feditor\u002Fpages","en\u002Fguides\u002F2.editor\u002F4.pages","i-ph-files",{"title":358,"path":359,"stem":360,"icon":361},"AI assistant","\u002Fen\u002Fguides\u002Feditor\u002Fai-assistant","en\u002Fguides\u002F2.editor\u002F5.ai-assistant","i-ph-sparkle",{"title":5,"path":293,"stem":295,"icon":292},{"title":364,"path":365,"stem":366,"icon":367},"Header and footer","\u002Fen\u002Fguides\u002Feditor\u002Fheader-and-footer","en\u002Fguides\u002F2.editor\u002F7.header-and-footer","i-ph-browser",{"title":274,"path":273,"stem":369,"icon":370},"en\u002Fguides\u002F2.editor\u002F8.publishing","i-ph-rocket",{"title":372,"path":373,"stem":374,"icon":375},"Multiple languages","\u002Fen\u002Fguides\u002Feditor\u002Flanguages","en\u002Fguides\u002F2.editor\u002F9.languages","i-ph-translate",{"title":377,"icon":378,"path":379,"stem":380,"children":381,"page":330},"Content","i-ph-stack","\u002Fen\u002Fguides\u002Fcontent","en\u002Fguides\u002F3.content",[382,387,392],{"title":383,"path":384,"stem":385,"icon":386},"Collections","\u002Fen\u002Fguides\u002Fcontent\u002Fcollections","en\u002Fguides\u002F3.content\u002F1.collections","i-ph-squares-four",{"title":388,"path":389,"stem":390,"icon":391},"Blog","\u002Fen\u002Fguides\u002Fcontent\u002Fblog","en\u002Fguides\u002F3.content\u002F2.blog","i-ph-article",{"title":393,"path":394,"stem":395,"icon":396},"Media","\u002Fen\u002Fguides\u002Fcontent\u002Fmedia","en\u002Fguides\u002F3.content\u002F3.media","i-ph-images",{"title":398,"icon":399,"path":400,"stem":401,"children":402,"page":330},"Customers","i-ph-users-three","\u002Fen\u002Fguides\u002Fcustomers","en\u002Fguides\u002F4.customers",[403,408,413],{"title":404,"path":405,"stem":406,"icon":407},"Inbox","\u002Fen\u002Fguides\u002Fcustomers\u002Finbox","en\u002Fguides\u002F4.customers\u002F1.inbox","i-ph-tray",{"title":409,"path":410,"stem":411,"icon":412},"Appointments","\u002Fen\u002Fguides\u002Fcustomers\u002Fappointments","en\u002Fguides\u002F4.customers\u002F2.appointments","i-ph-calendar-check",{"title":414,"path":415,"stem":416,"icon":417},"Google business","\u002Fen\u002Fguides\u002Fcustomers\u002Fgoogle-business","en\u002Fguides\u002F4.customers\u002F3.google-business","i-ph-google-logo",{"title":419,"icon":420,"path":421,"stem":422,"children":423,"page":330},"Site management","i-ph-gear-six","\u002Fen\u002Fguides\u002Fsite-management","en\u002Fguides\u002F5.site-management",[424,429,434,439],{"title":425,"path":426,"stem":427,"icon":428},"Overview","\u002Fen\u002Fguides\u002Fsite-management\u002Foverview","en\u002Fguides\u002F5.site-management\u002F1.overview","i-ph-house",{"title":430,"path":431,"stem":432,"icon":433},"Site analytics","\u002Fen\u002Fguides\u002Fsite-management\u002Fanalytics","en\u002Fguides\u002F5.site-management\u002F2.analytics","i-ph-chart-line-up",{"title":435,"path":436,"stem":437,"icon":438},"Connect your own domain","\u002Fen\u002Fguides\u002Fsite-management\u002Fcustom-domain","en\u002Fguides\u002F5.site-management\u002F3.custom-domain","i-ph-globe-hemisphere-west",{"title":440,"path":441,"stem":442,"icon":420},"Site settings","\u002Fen\u002Fguides\u002Fsite-management\u002Fsite-settings","en\u002Fguides\u002F5.site-management\u002F4.site-settings",{"title":444,"icon":445,"path":446,"stem":447,"children":448,"page":330},"Cards and QR menus","i-ph-qr-code","\u002Fen\u002Fguides\u002Fcards-and-menus","en\u002Fguides\u002F6.cards-and-menus",[449,454],{"title":450,"path":451,"stem":452,"icon":453},"Digital business card","\u002Fen\u002Fguides\u002Fcards-and-menus\u002Fcards","en\u002Fguides\u002F6.cards-and-menus\u002F1.cards","i-ph-identification-card",{"title":455,"path":456,"stem":457,"icon":458},"QR menu","\u002Fen\u002Fguides\u002Fcards-and-menus\u002Fmenus","en\u002Fguides\u002F6.cards-and-menus\u002F2.menus","i-ph-fork-knife",{"title":460,"icon":461,"path":462,"stem":463,"children":464,"page":330},"Team and organization","i-ph-buildings","\u002Fen\u002Fguides\u002Forganization","en\u002Fguides\u002F7.organization",[465,469],{"title":466,"path":467,"stem":468,"icon":399},"Members and roles","\u002Fen\u002Fguides\u002Forganization\u002Fmembers-and-roles","en\u002Fguides\u002F7.organization\u002F1.members-and-roles",{"title":470,"path":471,"stem":472,"icon":461},"Organization settings and billing","\u002Fen\u002Fguides\u002Forganization\u002Forganization-settings","en\u002Fguides\u002F7.organization\u002F2.organization-settings",[474,476],{"title":358,"path":359,"stem":360,"description":475,"icon":361,"children":-1},"Tell the assistant what you want; it builds pages, polishes your text, adds pages and collections and answers your questions.",{"title":364,"path":365,"stem":366,"description":477,"icon":367,"children":-1},"Edit the header at the top of every page (logo, menu, button) and the footer at the bottom; build the menu yourself and add external links.",1790889527477]