Update community theme colors
PUT
/appearance
communityID is required in the pathor body.
appearance.change.
Authorization: Bearer <api_key_token>| Field | Type | Required | Description |
|---|---|---|---|
| theme | object | No | Theme font, mode, dark/light palettes |
| branding | object | No | Icon, logo, splash images |
| loadingAnimation | object | No | Preset/custom loading animation |
| callToAction | object | No | CTA button visibility, content, style, typography |
loadingAnimation.mode: preset | custom
loadingAnimation.activeTheme: dark | light
loadingAnimation.custom.dark.type: html | lottie
loadingAnimation.custom.light.type: html | lottie
callToAction.content.linkBehavior: new | same
callToAction.style.shape: square | rounded | circle
callToAction.typography.fontStyle: normal | italic | bold
callToAction.typography.textAlign: left | center | right
How to use it: Send a PUT request to
/appearance with the request body, query parameters, or multipart fields shown below. Community administration access required. These endpoints are for configuring a community, not for end-user browser calls.Availability note: source code exposes community appearance through service routes such as
/communities/:communityID/appearance; confirm the public gateway route before external use.Successful response: HTTP 200, 201. The body follows the endpoint schema; many integration endpoints wrap the useful payload under
data with status and message.Common error states:
400 invalid request body, query, ObjectId, pagination, file format, or missing required field.401 missing, invalid, expired, or insufficient API key/token.403 key is valid but cannot access this community/channel/user/resource, where supported by the service.404 target resource, route, or community-scoped record was not found.409 duplicate or conflicting state for create/update operations, where applicable.500 unexpected Returning.AI service error.Appearance configuration controls community branding rather than user content. Source-backed model includes theme palettes, branding assets, splash images, loading animation settings, and call-to-action settings. The modern service source owns
GET /communities/:communityID/appearance and PUT /communities/:communityID/appearance; the routes shown here may be compatibility/admin-facing variants resolved from the API key.Request
Body Params application/jsonRequired
Responses
Request Request Example
Shell
JavaScript
Java
Swift
curl --location --request PUT 'https://api.returning.ai/appearance' \
--header 'Content-Type: application/json' \
--data '{
"theme": {
"font": "Playfair Display",
"defaultMode": "light",
"dark": {
"name": "botanical-forest"
},
"light": {
"name": "prairie-dance"
}
},
"branding": {
"icon": "https://d1qp7obm8na1ru.cloudfront.net/57ef33a0-3896-11f1-95a3-399026424a57_appearance.webp",
"logo": {
"dark": "https://d1qp7obm8na1ru.cloudfront.net/57ef33a0-3896-11f1-95a3-399026424a57_appearance.webp",
"light": "https://d1qp7obm8na1ru.cloudfront.net/57ef33a0-3896-11f1-95a3-399026424a57_appearance.webp"
}
},
"callToAction": {
"content": {
"text": "Thingyan mode",
"link": "https://www.google.com/",
"linkBehavior": "same"
}
},
"loadingAnimation": {
"mode": "custom",
"preset": "default",
"activeTheme": "light"
}
}'Response Response Example
200 - Success Example
{
"meta": {
"status": "success",
"statusCode": 200
},
"message": "Update community appearance success.",
"data": {
"_id": "697df8837aae7afa852c03ce",
"communityID": "6502c9e514a3e564c5c09c0a",
"theme": {
"font": "Playfair Display",
"defaultMode": "light",
"dark": {
"name": "botanical-forest",
"palette": {
"accent1": "rgb(233, 115, 123)",
"accent2": "rgb(238, 153, 159)",
"accent3": "rgb(241, 179, 184)",
"accent4": "rgb(252, 210, 213)",
"background1": "rgb(0, 44, 38)",
"background2": "rgb(5, 52, 47)",
"background3": "rgb(15, 61, 59)",
"background4": "rgb(15, 62, 61)",
"background5": "rgb(23, 70, 70)",
"background6": "rgb(29, 76, 78)",
"background7": "rgb(45, 95, 97)",
"text1": "rgb(228, 241, 238)",
"text2": "rgb(172, 213, 203)",
"text3": "rgb(159, 201, 191)",
"text4": "rgb(132, 178, 167)",
"text5": "rgb(110, 164, 151)",
"text6": "rgb(102, 149, 138)",
"divider1": "rgb(69, 128, 114)",
"divider2": "rgb(132, 178, 167)",
"shadow": "rgba(0, 44, 38, 0.5)",
"mentionBackground": "rgb(15, 61, 59)",
"scrollThumb": "rgb(34, 34, 34)",
"scrollTrack": "rgb(59, 59, 59)"
}
},
"light": {
"name": "prairie-dance",
"palette": {
"accent1": "rgb(174, 76, 76)",
"accent2": "rgb(191, 100, 100)",
"accent3": "rgb(208, 122, 122)",
"accent4": "rgb(224, 162, 162)",
"background1": "rgb(252, 252, 252)",
"background2": "rgb(252, 248, 241)",
"background3": "rgb(250, 244, 231)",
"background4": "rgb(243, 236, 218)",
"background5": "rgb(233, 224, 202)",
"background6": "rgb(221, 212, 190)",
"background7": "rgb(200, 188, 161)",
"text1": "rgb(62, 79, 60)",
"text2": "rgb(73, 91, 70)",
"text3": "rgb(86, 104, 83)",
"text4": "rgb(117, 126, 95)",
"text5": "rgb(127, 136, 107)",
"text6": "rgb(143, 151, 124)",
"divider1": "rgb(161, 169, 142)",
"divider2": "rgb(117, 126, 95)",
"shadow": "rgba(62, 79, 60, 0.35)",
"mentionBackground": "rgb(250, 244, 231)",
"scrollThumb": "rgb(203, 203, 203)",
"scrollTrack": "rgb(234, 234, 234)"
}
}
},
"branding": {
"icon": "https://d1qp7obm8na1ru.cloudfront.net/57ef33a0-3896-11f1-95a3-399026424a57_appearance.webp",
"logo": {
"dark": "https://d1qp7obm8na1ru.cloudfront.net/57ef33a0-3896-11f1-95a3-399026424a57_appearance.webp",
"light": "https://d1qp7obm8na1ru.cloudfront.net/57ef33a0-3896-11f1-95a3-399026424a57_appearance.webp"
},
"splash": {
"desktop": "https://chartsnapshot-genesiv.s3.amazonaws.com/9f522570-fc66-11f0-8cde-a383b71d30de_image.webp",
"mobile": "https://s3.us-east-1.amazonaws.com/genesiv-forexchatroom/94ba2010a0ed7518691b1f3e37335e1.jpg"
}
},
"loadingAnimation": {
"mode": "custom",
"preset": "default",
"activeTheme": "light",
"custom": {
"dark": {
"type": "lottie",
"html": "<h1>hello Min Ga Lar Par <h1>",
"lottie": "https://pre-staging-application.returning.ai/assets/files/communities/6502c9e514a3e564c5c09c0a/loading-animations/dark-lottie-1777391140614.json"
},
"light": {
"type": "html",
"html": "<div class=\"loader\">\n <div class=\"loader-inner\">\n <div class=\"loader-line-wrap\">\n <div class=\"loader-line\"></div>\n </div>\n <div class=\"loader-line-wrap\">\n <div class=\"loader-line\"></div>\n </div>\n <div class=\"loader-line-wrap\">\n <div class=\"loader-line\"></div>\n </div>\n <div class=\"loader-line-wrap\">\n <div class=\"loader-line\"></div>\n </div>\n <div class=\"loader-line-wrap\">\n <div class=\"loader-line\"></div>\n </div>\n </div>\n </div>\n<style>\n.loader {\n width: 130px;\n height: 130px;\n background: transparent;\n bottom: 0;\n left: 0;\n overflow: hidden;\n position: relative;\n right: 0;\n top: 0;\n z-index: 99999;\n}\n\n.loader-inner {\n bottom: 0;\n height: 60px;\n left: 0;\n margin: auto;\n position: absolute;\n right: 0;\n top: 0;\n width: 100px;\n}\n\n.loader-line-wrap {\n animation: \n spin 2000ms cubic-bezier(.175, .885, .32, 1.275) infinite\n ;\n box-sizing: border-box;\n height: 50px;\n left: 0;\n overflow: hidden;\n position: absolute;\n top: 0;\n transform-origin: 50% 100%;\n width: 100px;\n}\n.loader-line {\n border: 4px solid transparent;\n border-radius: 100%;\n box-sizing: border-box;\n height: 100px;\n left: 0;\n margin: 0 auto;\n position: absolute;\n right: 0;\n top: 0;\n width: 100px;\n}\n.loader-line-wrap:nth-child(1) { animation-delay: -50ms; }\n.loader-line-wrap:nth-child(2) { animation-delay: -100ms; }\n.loader-line-wrap:nth-child(3) { animation-delay: -150ms; }\n.loader-line-wrap:nth-child(4) { animation-delay: -200ms; }\n.loader-line-wrap:nth-child(5) { animation-delay: -250ms; }\n\n.loader-line-wrap:nth-child(1) .loader-line {\n border-color: hsl(0, 80%, 60%);\n height: 90px;\n width: 90px;\n top: 7px;\n}\n.loader-line-wrap:nth-child(2) .loader-line {\n border-color: hsl(60, 80%, 60%);\n height: 76px;\n width: 76px;\n top: 14px;\n}\n.loader-line-wrap:nth-child(3) .loader-line {\n border-color: hsl(120, 80%, 60%);\n height: 62px;\n width: 62px;\n top: 21px;\n}\n.loader-line-wrap:nth-child(4) .loader-line {\n border-color: hsl(180, 80%, 60%);\n height: 48px;\n width: 48px;\n top: 28px;\n}\n.loader-line-wrap:nth-child(5) .loader-line {\n border-color: hsl(240, 80%, 60%);\n height: 34px;\n width: 34px;\n top: 35px;\n}\n\n@keyframes spin {\n 0%, 15% {\n transform: rotate(0);\n }\n 100% {\n transform: rotate(360deg);\n }\n}\n</style>",
"lottie": "https://pre-staging-application.returning.ai/assets/files/communities/6502c9e514a3e564c5c09c0a/loading-animations/light-lottie-1777391141715.json"
}
}
},
"callToAction": {
"isEnabled": true,
"isMobileEnabled": true,
"content": {
"text": "Thingyan mode",
"link": "https://www.google.com/",
"linkBehavior": "same",
"iconImage": "https://chartsnapshot-genesiv.s3.amazonaws.com/a911d540-e002-11f0-9ded-bd382b6c5e6d_A_digital_illustration_depicts_a_young_male_AI_dev_compressed.webp"
},
"style": {
"shape": "square",
"backgroundColor": "var(--accent-1)",
"borderSize": "1",
"borderColor": "var(--divider-lines-1)"
},
"typography": {
"fontFamily": "Poppins",
"fontSize": "16px",
"fontColor": "var(--text-1)",
"fontStyle": "normal",
"textAlign": "center"
}
},
"createdAt": "2026-04-26T04:54:10.575Z",
"updatedAt": "2026-04-28T16:44:51.234Z"
}
}Modified at 2026-05-18 17:03:37