> ## Documentation Index
> Fetch the complete documentation index at: https://mahalldocs.eucodes.in/llms.txt
> Use this file to discover all available pages before exploring further.

# Website theme

> Current screen specification: Website theme. English and Malayalam guidance for the development team.

<Note>Source snapshot: 13 October 2026. These pages describe the current implementation, including unfinished controls. See [coverage and review notes](/reference/coverage).</Note>

<Tabs>
  <Tab title="English">
    ## Website theme

    Host: `admin.<ROOT_DOMAIN>` · Route: `/[tenant]/website/theme`

    ### Purpose and access

    Preview branding colors and media selections for the website.

    You need an account session and a resolved membership context in the selected Mahallu (including the API’s current platform elevation path). The API independently checks the requested operation’s permissions and feature availability.

    ### Screen layout

    Live Theme Preview is followed by Color Palette and Branding & Media. Controls select primary, secondary, accent, and background colors and display media filenames.

    ### Fields and displayed information

    This screen has no editable fields or filters in its rendered components.

    ### Actions

    | Control | Result | Component |
    | - | - | - |
    | Reset to defaults | Invokes the associated handler; see the sequence below. | `website-theme.tsx` |
    | text-zinc-900 / text-white | Updates local UI state; persistence is described separately below. | `website-theme.tsx` |
    | text-zinc-900 / text-white | Updates local UI state; persistence is described separately below. | `website-theme.tsx` |
    | text-zinc-900 / text-white | Updates local UI state; persistence is described separately below. | `website-theme.tsx` |
    | text-zinc-900 / text-white | Updates local UI state; persistence is described separately below. | `website-theme.tsx` |
    | Choose | Updates local UI state; persistence is described separately below. | `website-theme.tsx` |
    | Choose | Updates local UI state; persistence is described separately below. | `website-theme.tsx` |
    | Choose | Updates local UI state; persistence is described separately below. | `website-theme.tsx` |

    ### Interaction sequence

    Choose a color → preview updates immediately → Reset returns defaults. Choose on logo/image controls assigns a fixed example filename.

    ### States and rules

    Selections exist only in React state. Media controls do not upload files, and theme changes do not persist or update the public site.

    ### Implementation references

    Paths below are relative to the application repository. This is source-reviewed behavior, not a recorded browser test.

    * `apps/web/src/app/sites/admin/[tenant]/website/theme/page.tsx`
    * `apps/web/src/features/website/website-theme.tsx`

    Data and access helpers: `apps/web/src/lib/session.ts`, `apps/web/src/lib/server-api.ts`, `apps/web/src/lib/tenants.ts`
  </Tab>

  <Tab title="മലയാളം">
    ## Website theme

    Host: `admin.<ROOT_DOMAIN>` · Route: `/[tenant]/website/theme`

    ### ഉദ്ദേശ്യവും പ്രവേശനവും

    വെബ്സൈറ്റിന്റെ നിറങ്ങളും media തിരഞ്ഞെടുപ്പുകളും preview ചെയ്യുക.

    Account sessionഉം തിരഞ്ഞെടുത്ത മഹല്ലിൽ resolved membership contextഉം വേണം; APIയിലെ നിലവിലെ platform elevation pathഉം ഇതിൽപ്പെടും. ഓരോ പ്രവർത്തനത്തിന്റെയും permissions/features API പ്രത്യേകം പരിശോധിക്കുന്നു.

    ### സ്ക്രീൻ ക്രമം

    Live Theme Previewയ്ക്ക് ശേഷം Color Palette, Branding & Media വരുന്നു. Primary, secondary, accent, background നിറങ്ങളും media പേരുകളും തിരഞ്ഞെടുക്കാം.

    ### ഫീൽഡുകളും പ്രദർശിപ്പിക്കുന്ന വിവരങ്ങളും

    ഈ സ്ക്രീനിന്റെ componentsൽ തിരുത്താവുന്ന ഫീൽഡുകളോ ഫിൽട്ടറുകളോ ഇല്ല.

    ### പ്രവർത്തനങ്ങൾ

    | നിയന്ത്രണം | ഫലം | Component |
    | - | - | - |
    | Reset to defaults | ബന്ധപ്പെട്ട handler പ്രവർത്തിപ്പിക്കും; താഴെ പ്രവർത്തനക്രമം കാണുക. | `website-theme.tsx` |
    | text-zinc-900 / text-white | Local UI state പുതുക്കും; സംരക്ഷിക്കൽ താഴെ പ്രത്യേകം വിവരിക്കുന്നു. | `website-theme.tsx` |
    | text-zinc-900 / text-white | Local UI state പുതുക്കും; സംരക്ഷിക്കൽ താഴെ പ്രത്യേകം വിവരിക്കുന്നു. | `website-theme.tsx` |
    | text-zinc-900 / text-white | Local UI state പുതുക്കും; സംരക്ഷിക്കൽ താഴെ പ്രത്യേകം വിവരിക്കുന്നു. | `website-theme.tsx` |
    | text-zinc-900 / text-white | Local UI state പുതുക്കും; സംരക്ഷിക്കൽ താഴെ പ്രത്യേകം വിവരിക്കുന്നു. | `website-theme.tsx` |
    | Choose | Local UI state പുതുക്കും; സംരക്ഷിക്കൽ താഴെ പ്രത്യേകം വിവരിക്കുന്നു. | `website-theme.tsx` |
    | Choose | Local UI state പുതുക്കും; സംരക്ഷിക്കൽ താഴെ പ്രത്യേകം വിവരിക്കുന്നു. | `website-theme.tsx` |
    | Choose | Local UI state പുതുക്കും; സംരക്ഷിക്കൽ താഴെ പ്രത്യേകം വിവരിക്കുന്നു. | `website-theme.tsx` |

    ### പ്രവർത്തനക്രമം

    നിറം തിരഞ്ഞെടുക്കുക → preview ഉടൻ മാറും → Reset defaults തിരികെ നൽകും. Logo/image Choose സ്ഥിരമായ ഉദാഹരണ filename നൽകും.

    ### നിലകളും നിയമങ്ങളും

    തിരഞ്ഞെടുപ്പുകൾ React stateൽ മാത്രമാണ്. Media നിയന്ത്രണങ്ങൾ upload നടത്തുന്നില്ല; theme സംരക്ഷിക്കുകയോ പൊതു സൈറ്റ് മാറ്റുകയോ ചെയ്യുന്നില്ല.

    ### Implementation റഫറൻസുകൾ

    താഴെയുള്ള paths application repositoryയെ അടിസ്ഥാനമാക്കിയുള്ളതാണ്. Source പരിശോധിച്ച behavior ആണ്; browser test രേഖയല്ല.

    * `apps/web/src/app/sites/admin/[tenant]/website/theme/page.tsx`
    * `apps/web/src/features/website/website-theme.tsx`

    Data/access helpers: `apps/web/src/lib/session.ts`, `apps/web/src/lib/server-api.ts`, `apps/web/src/lib/tenants.ts`
  </Tab>
</Tabs>


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.