{"id":4520,"date":"2025-01-06T15:29:04","date_gmt":"2025-01-06T09:59:04","guid":{"rendered":"https:\/\/www.enactsoft.com\/resources\/?post_type=docs&#038;p=4520"},"modified":"2025-01-06T15:29:08","modified_gmt":"2025-01-06T09:59:08","password":"","slug":"ui-theme-settings","status":"publish","type":"docs","link":"https:\/\/www.enactsoft.com\/resources\/ui-theme-settings\/","title":{"rendered":"UI\/Theme Settings"},"content":{"rendered":"\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;67ee47c988699&quot;}\" data-wp-interactive=\"core\/image\" class=\"wp-block-image wp-lightbox-container\"><img decoding=\"async\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-on-async--load=\"callbacks.setButtonStyles\" data-wp-on-async-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/t3357242.p.clickup-attachments.com\/t3357242\/4ca2bd7f-d103-4818-a48d-10265460855f\/image.png\" alt=\"\"\/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\taria-label=\"Enlarge image\"\n\t\t\tdata-wp-init=\"callbacks.initTriggerButton\"\n\t\t\tdata-wp-on-async--click=\"actions.showLightbox\"\n\t\t\tdata-wp-style--right=\"state.imageButtonRight\"\n\t\t\tdata-wp-style--top=\"state.imageButtonTop\"\n\t\t>\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewBox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\" \/>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Primary Button Gradient<\/strong>\n<ul class=\"wp-block-list\">\n<li>Defines the gradient background color for primary buttons on the platform.<\/li>\n\n\n\n<li><strong>Purpose<\/strong>: Allows customization of the button appearance using gradient colors.<\/li>\n\n\n\n<li><strong>Default Value<\/strong>: <code>linear-gradient(180deg, #8f82ff 0%, #4638f1 100%)<\/code><\/li>\n\n\n\n<li><strong>Example<\/strong>:- A gradient transition from <strong>#8f82ff<\/strong> to <strong>#4638f1<\/strong>.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Outline Button Border Gradient<\/strong>\n<ul class=\"wp-block-list\">\n<li>Specifies the gradient color for the border of outline buttons.<\/li>\n\n\n\n<li><strong>Purpose<\/strong>: Customizes the visual style of button borders.<\/li>\n\n\n\n<li><strong>Default Value<\/strong>: <code>linear-gradient(180deg, #8f82ff 0%, #4638f1 100%)<\/code><\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Primary Button Text Color<\/strong>\n<ul class=\"wp-block-list\">\n<li>Sets the text color for primary buttons.<\/li>\n\n\n\n<li><strong>Purpose<\/strong>: Ensures the button text is readable against the button background.<\/li>\n\n\n\n<li><strong>Default Value<\/strong>: <code>#ffffff<\/code> (white)<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Outline Button Text Color<\/strong>\n<ul class=\"wp-block-list\">\n<li>Determines the text color for outline buttons.<\/li>\n\n\n\n<li><strong>Purpose<\/strong>: Matches the text color with the theme for consistency.<\/li>\n\n\n\n<li><strong>Default Value<\/strong>: <code>#ffffff<\/code> (white)<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Footer Background Color<\/strong>\n<ul class=\"wp-block-list\">\n<li>Specifies the background color for the footer section of the platform.<\/li>\n\n\n\n<li><strong>Purpose<\/strong>: Allows branding and aesthetic customization of the footer.<\/li>\n\n\n\n<li><strong>Default Value<\/strong>: <code>#0b0b0b<\/code> (dark black)<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Footer Text Color<\/strong>\n<ul class=\"wp-block-list\">\n<li>Sets the text color for content within the footer.<\/li>\n\n\n\n<li><strong>Purpose<\/strong>: Ensures the text contrasts well with the footer background.<\/li>\n\n\n\n<li><strong>Default Value<\/strong>: <code>#a7a7a7<\/code> (light gray)<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Body Background Color<\/strong>\n<ul class=\"wp-block-list\">\n<li>Defines the overall background color for the body of the platform.<\/li>\n\n\n\n<li><strong>Purpose<\/strong>: Sets the tone and style of the platform\u2019s primary area.<\/li>\n\n\n\n<li><strong>Default Value<\/strong>: <code>#050505<\/code> (dark black)<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Card Background Color<\/strong>\n<ul class=\"wp-block-list\">\n<li>Specifies the background color for cards displayed on the platform.<\/li>\n\n\n\n<li><strong>Purpose<\/strong>: Customizes the appearance of card elements.<\/li>\n\n\n\n<li><strong>Default Value<\/strong>: <code>#161617<\/code> (dark gray)<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Card Secondary Background Color<\/strong>\n<ul class=\"wp-block-list\">\n<li>Sets the secondary background color for cards.<\/li>\n\n\n\n<li><strong>Purpose<\/strong>: Adds design flexibility for multi-layered or highlighted card elements.<\/li>\n\n\n\n<li><strong>Default Value<\/strong>: <code>#1f1f1f<\/code> (slightly lighter gray)<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Body Text Primary Color<\/strong>\n<ul class=\"wp-block-list\">\n<li>Defines the primary color for text in the main body.<\/li>\n\n\n\n<li><strong>Purpose<\/strong>: Ensures readability and consistent styling of the text.<\/li>\n\n\n\n<li><strong>Default Value<\/strong>: <code>#8d8d8d<\/code> (light gray)<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;67ee47c988d4d&quot;}\" data-wp-interactive=\"core\/image\" class=\"wp-block-image wp-lightbox-container\"><img decoding=\"async\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-on-async--load=\"callbacks.setButtonStyles\" data-wp-on-async-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/t3357242.p.clickup-attachments.com\/t3357242\/936cbb2e-de3b-4de3-b8fb-e9e4a6b0d039\/image.png\" alt=\"\"\/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\taria-label=\"Enlarge image\"\n\t\t\tdata-wp-init=\"callbacks.initTriggerButton\"\n\t\t\tdata-wp-on-async--click=\"actions.showLightbox\"\n\t\t\tdata-wp-style--right=\"state.imageButtonRight\"\n\t\t\tdata-wp-style--top=\"state.imageButtonTop\"\n\t\t>\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewBox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\" \/>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Body Text Secondary Color<\/strong>\n<ul class=\"wp-block-list\">\n<li>Sets the secondary text color for the body of the application.<\/li>\n\n\n\n<li><strong>Purpose<\/strong>: Used for secondary information or less emphasized text.<\/li>\n\n\n\n<li><strong>Default Value<\/strong>: <code>#ffffff<\/code> (white)<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Border Gradient<\/strong>\n<ul class=\"wp-block-list\">\n<li>Specifies the gradient color for element borders.<\/li>\n\n\n\n<li><strong>Purpose<\/strong>: Enhances the visual appeal of borders with gradient effects.<\/li>\n\n\n\n<li><strong>Default Value<\/strong>: <code>linear-gradient(0deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.1))<\/code><\/li>\n\n\n\n<li><strong>Example<\/strong>: A gradient that fades at 0 degrees using semi-transparent white.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Border Hover Gradient<\/strong>\n<ul class=\"wp-block-list\">\n<li>Defines the gradient color for borders when the element is hovered over.<\/li>\n\n\n\n<li><strong>Purpose<\/strong>: Provides a hover effect for better user interactivity.<\/li>\n\n\n\n<li><strong>Default Value<\/strong>: <code>linear-gradient(89.54deg, #d5478e 0.29%, #7008d2 49.92%, #437ddb 99.54%)<\/code><\/li>\n\n\n\n<li><strong>Example<\/strong>: A multi-color transition gradient from pink to purple to blue.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Section Title Gradient<\/strong>\n<ul class=\"wp-block-list\">\n<li>Specifies the gradient color for section titles.<\/li>\n\n\n\n<li><strong>Purpose<\/strong>: Adds a visually distinct style for section headers.<\/li>\n\n\n\n<li><strong>Default Value<\/strong>: <code>linear-gradient(172.07deg, #ffffff 29.49%, #999999 75.15%)<\/code><\/li>\n\n\n\n<li><strong>Example<\/strong>: A gradient from white to gray.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Primary Gradient<\/strong>\n<ul class=\"wp-block-list\">\n<li>Defines the primary gradient color for major UI elements.<\/li>\n\n\n\n<li><strong>Purpose<\/strong>: Sets a consistent color theme for primary elements like buttons.<\/li>\n\n\n\n<li><strong>Default Value<\/strong>: <code>linear-gradient(180deg, #8f82ff 0%, #4638f1 100%)<\/code><\/li>\n\n\n\n<li><strong>Example<\/strong>: A gradient from light purple to dark purple.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Secondary Gradient<\/strong>\n<ul class=\"wp-block-list\">\n<li>Specifies the gradient color for secondary UI elements.<\/li>\n\n\n\n<li><strong>Purpose<\/strong>: Provides an alternate color theme for less emphasized elements.<\/li>\n\n\n\n<li><strong>Default Value<\/strong>: <code>linear-gradient(270deg, rgba(255, 255, 255, 0.2) 0.04%, rgba(255, 255, 255, 0.14) 100%)<\/code><\/li>\n\n\n\n<li><strong>Example<\/strong>: A subtle white gradient with transparency.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Input Background<\/strong>\n<ul class=\"wp-block-list\">\n<li>Sets the background color for input fields.<\/li>\n\n\n\n<li><strong>Purpose<\/strong>: Ensures input fields visually stand out and are easily identifiable.<\/li>\n\n\n\n<li><strong>Default Value<\/strong>: <code>linear-gradient(270deg, rgba(255, 255, 255, 0.2) 0.04%, rgba(255, 255, 255, 0.14) 100%)<\/code><\/li>\n\n\n\n<li><strong>Example<\/strong>: A gradient that fades subtly for input boxes.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Input Background (Color)<\/strong>\n<ul class=\"wp-block-list\">\n<li>Defines a flat background color for input fields.<\/li>\n\n\n\n<li><strong>Purpose<\/strong>: Provides a simple and clean look for input fields.<\/li>\n\n\n\n<li><strong>Default Value<\/strong>: <code>#8e81ff<\/code> (a light purple shade)<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Offer Card Style<\/strong>\n<ul class=\"wp-block-list\">\n<li>Determines the size and look of offer cards across the application.<\/li>\n\n\n\n<li><strong>Options<\/strong>:- There are two options under it\n<ul class=\"wp-block-list\">\n<li><strong>Large<\/strong>:- Displays offer cards in a bigger size.<\/li>\n\n\n\n<li><strong>Small<\/strong>:- Displays offer cards in a smaller size.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Purpose<\/strong>: Customizes how offers are visually presented.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Cashout Card Style<\/strong>\n<ul class=\"wp-block-list\">\n<li>Configures the visual style for cashout cards.<\/li>\n\n\n\n<li><strong>Options<\/strong>:- There are two options under it\n<ul class=\"wp-block-list\">\n<li><strong>With Card Image<\/strong>: Displays the cashout card with an image for added visual appeal<\/li>\n\n\n\n<li><strong>With Logo:- <\/strong>Displays the cashout card with a logo<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Purpose<\/strong>: Tailors the look and feel of the cashout section.<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"closed","template":"","meta":{"footnotes":""},"doc_category":[92],"glossaries":[],"doc_tag":[],"class_list":["post-4520","docs","type-docs","status-publish","hentry","doc_category-settings-freemoney"],"year_month":"2025-04","word_count":664,"total_views":"88","reactions":{"happy":"0","normal":"0","sad":"0"},"author_info":{"author_nicename":"sdjsuhds","author_url":"https:\/\/www.enactsoft.com\/resources\/author\/sdjsuhds\/"},"doc_category_info":[{"term_name":"Settings","term_url":"https:\/\/www.enactsoft.com\/resources\/docs-category\/settings-freemoney\/"}],"doc_tag_info":[],"author_list":[{"ID":"2","user_login":"sdjsuhds","display_name":"sdjsuhds","id":"2"}],"_links":{"self":[{"href":"https:\/\/www.enactsoft.com\/resources\/wp-json\/wp\/v2\/docs\/4520","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.enactsoft.com\/resources\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/www.enactsoft.com\/resources\/wp-json\/wp\/v2\/types\/docs"}],"author":[{"embeddable":true,"href":"https:\/\/www.enactsoft.com\/resources\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.enactsoft.com\/resources\/wp-json\/wp\/v2\/comments?post=4520"}],"version-history":[{"count":1,"href":"https:\/\/www.enactsoft.com\/resources\/wp-json\/wp\/v2\/docs\/4520\/revisions"}],"predecessor-version":[{"id":4521,"href":"https:\/\/www.enactsoft.com\/resources\/wp-json\/wp\/v2\/docs\/4520\/revisions\/4521"}],"wp:attachment":[{"href":"https:\/\/www.enactsoft.com\/resources\/wp-json\/wp\/v2\/media?parent=4520"}],"wp:term":[{"taxonomy":"doc_category","embeddable":true,"href":"https:\/\/www.enactsoft.com\/resources\/wp-json\/wp\/v2\/doc_category?post=4520"},{"taxonomy":"glossaries","embeddable":true,"href":"https:\/\/www.enactsoft.com\/resources\/wp-json\/wp\/v2\/glossaries?post=4520"},{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/www.enactsoft.com\/resources\/wp-json\/wp\/v2\/doc_tag?post=4520"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}