{"id":605,"date":"2026-10-26T23:20:53","date_gmt":"2026-10-26T23:20:53","guid":{"rendered":"https:\/\/hillcityweb.com\/themes\/docs\/modality\/style-presets-and-colors\/"},"modified":"2026-10-26T23:36:34","modified_gmt":"2026-10-26T23:36:34","slug":"style-presets-and-colors","status":"publish","type":"page","link":"https:\/\/hillcityweb.com\/themes\/docs\/modality\/style-presets-and-colors\/","title":{"rendered":"Style presets &#038; colors"},"content":{"rendered":"<p>A style preset sets the colors, fonts and layout of everything you have not changed yourself. Choose one in <em>Customize \u2192 Theme Style \u2192 Style Preset<\/em>. The preview changes right away; nothing is saved until you click <em>Publish<\/em>.<\/p>\n<figure class=\"hcwd-shot\"><a href=\"https:\/\/hillcityweb.com\/themes\/wp-content\/uploads\/hcw-docs\/modality\/customizer-presets.jpg\"><img loading=\"lazy\" src=\"https:\/\/hillcityweb.com\/themes\/wp-content\/uploads\/hcw-docs\/modality\/customizer-presets.jpg\" alt=\"The Style Preset section with the Classic, Modern, Light and Bold cards\" width=\"1440\" height=\"900\" loading=\"lazy\" decoding=\"async\"><\/a><figcaption>Theme Style \u2192 Style Preset: four presets, each with its palette.<\/figcaption><\/figure>\n<h2>The four presets<\/h2>\n<ul>\n<li><strong>Modern<\/strong> (the default for new sites): a light header, system fonts, larger type, a grid blog and plain cards.<\/li>\n<li><strong>Classic<\/strong>: the original Modality look, with a dark header, Open Sans, uppercase headings and boxed posts and widgets. Sites updated from 1.x get this preset.<\/li>\n<li><strong>Light<\/strong>: airy and bright, with Inter, a sky blue accent, light sections and a light footer.<\/li>\n<li><strong>Bold<\/strong>: strong and dark, with Montserrat uppercase headings, an orange accent, square corners and dark bands.<\/li>\n<\/ul>\n<figure class=\"hcwd-shot\"><a href=\"https:\/\/hillcityweb.com\/themes\/wp-content\/uploads\/hcw-docs\/modality\/preset-modern.jpg\"><img loading=\"lazy\" src=\"https:\/\/hillcityweb.com\/themes\/wp-content\/uploads\/hcw-docs\/modality\/preset-modern.jpg\" alt=\"Modality front page in the Modern preset\" width=\"1200\" height=\"900\" loading=\"lazy\" decoding=\"async\"><\/a><figcaption>Modern.<\/figcaption><\/figure>\n<figure class=\"hcwd-shot\"><a href=\"https:\/\/hillcityweb.com\/themes\/wp-content\/uploads\/hcw-docs\/modality\/preset-classic.jpg\"><img loading=\"lazy\" src=\"https:\/\/hillcityweb.com\/themes\/wp-content\/uploads\/hcw-docs\/modality\/preset-classic.jpg\" alt=\"Modality front page in the Classic preset\" width=\"1200\" height=\"900\" loading=\"lazy\" decoding=\"async\"><\/a><figcaption>Classic, the original Modality look.<\/figcaption><\/figure>\n<figure class=\"hcwd-shot\"><a href=\"https:\/\/hillcityweb.com\/themes\/wp-content\/uploads\/hcw-docs\/modality\/preset-light.jpg\"><img loading=\"lazy\" src=\"https:\/\/hillcityweb.com\/themes\/wp-content\/uploads\/hcw-docs\/modality\/preset-light.jpg\" alt=\"Modality front page in the Light preset\" width=\"1200\" height=\"900\" loading=\"lazy\" decoding=\"async\"><\/a><figcaption>Light.<\/figcaption><\/figure>\n<figure class=\"hcwd-shot\"><a href=\"https:\/\/hillcityweb.com\/themes\/wp-content\/uploads\/hcw-docs\/modality\/preset-bold.jpg\"><img loading=\"lazy\" src=\"https:\/\/hillcityweb.com\/themes\/wp-content\/uploads\/hcw-docs\/modality\/preset-bold.jpg\" alt=\"Modality front page in the Bold preset\" width=\"1200\" height=\"900\" loading=\"lazy\" decoding=\"async\"><\/a><figcaption>Bold.<\/figcaption><\/figure>\n<h2>Your changes win<\/h2>\n<p>A setting you changed keeps your value when you switch presets. That way you can try presets without losing your work. To start over with a preset\u2019s colors, click <em>Use the preset\u2019s colors everywhere<\/em> under the preset cards: it clears the colors you picked (header, menu, sections, footer and the palette), and the preset\u2019s colors take their place.<\/p>\n<h2>The color palette<\/h2>\n<p><em>Theme Style \u2192 Colors<\/em> holds the palette used across the site:<\/p>\n<ul>\n<li><strong>Theme Color<\/strong> (in General Settings): the accent for buttons, links on hover, icons and highlights.<\/li>\n<li><strong>Headings<\/strong>, <strong>Links<\/strong>, <strong>Page background<\/strong>, <strong>Light surfaces<\/strong> (the title band and light sections), <strong>Borders and lines<\/strong> and <strong>Dark surfaces<\/strong>.<\/li>\n<li><strong>Body Font Color<\/strong> is in Typography Settings.<\/li>\n<\/ul>\n<p>Header, menu, section and footer colors are in their own sections. Leave any of them empty to use the palette or the preset. The same palette appears in the block editor, so text and backgrounds you color there match your site.<\/p>\n<figure class=\"hcwd-shot\"><a href=\"https:\/\/hillcityweb.com\/themes\/wp-content\/uploads\/hcw-docs\/modality\/customizer-colors.jpg\"><img loading=\"lazy\" src=\"https:\/\/hillcityweb.com\/themes\/wp-content\/uploads\/hcw-docs\/modality\/customizer-colors.jpg\" alt=\"The Colors section with the site palette\" width=\"1440\" height=\"900\" loading=\"lazy\" decoding=\"async\"><\/a><figcaption>Theme Style \u2192 Colors. Changes show in the preview instantly.<\/figcaption><\/figure>\n<h2>Readable colors<\/h2>\n<p>The Modern, Light and Bold presets meet the WCAG AA contrast level for text and buttons. Classic keeps the original Modality blue (#3498db) so updated sites look the same; white text on it is lighter than the AA level. If that matters for your site, choose a darker Theme Color (for example #1f6fb2) or switch presets. When you pick your own colors, check that text stays easy to read on its background.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>A style preset sets the colors, fonts and layout of everything you have not changed yourself. Choose one in Customize \u2192 Theme Style \u2192\u2026<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":597,"menu_order":20,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-605","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/hillcityweb.com\/themes\/wp-json\/wp\/v2\/pages\/605","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/hillcityweb.com\/themes\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/hillcityweb.com\/themes\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/hillcityweb.com\/themes\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/hillcityweb.com\/themes\/wp-json\/wp\/v2\/comments?post=605"}],"version-history":[{"count":1,"href":"https:\/\/hillcityweb.com\/themes\/wp-json\/wp\/v2\/pages\/605\/revisions"}],"predecessor-version":[{"id":620,"href":"https:\/\/hillcityweb.com\/themes\/wp-json\/wp\/v2\/pages\/605\/revisions\/620"}],"up":[{"embeddable":true,"href":"https:\/\/hillcityweb.com\/themes\/wp-json\/wp\/v2\/pages\/597"}],"wp:attachment":[{"href":"https:\/\/hillcityweb.com\/themes\/wp-json\/wp\/v2\/media?parent=605"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}