Appearance Settings
Control themes, visual style, view modes, tab styles, My Workspace list layout, and other layout preferences.
Overview
All visual customisation lives in Settings → Appearance. Changes apply immediately and persist across sessions. No save button is required.
Theme
Choose the overall colour theme for TotalApp. Eight built-in themes are available — each shows a two-tone swatch (background + accent) in the picker:
Dark Default
Deep dark background (#080a12) with a blue accent and subtle glass surfaces. Best for extended use in low-light environments.
Light
Light slate background with strong-contrast text and a blue accent. Suitable for bright offices.
System
Slate surfaces with an indigo accent — a balanced middle-ground palette.
Neon
Near-black background with a bright green (#00ff9d) accent. High-energy, cyberpunk feel.
Ocean
Deep navy background with a cyan accent. Cool, calm palette.
Forest
Very dark green background with a green accent. Earthy, muted look.
Monokai
Warm charcoal background with the classic lime (#a6e22e) editor accent. Familiar to developers.
Sleek
Navy gradient with glassmorphism cards and an indigo accent. High contrast, premium feel.
Custom themes can be configured in the White Label tab by overriding individual CSS token values per theme.
Surface Style
Sets the tint of card and panel surfaces on the dark themes:
Elevated Default
Slightly raised slate surfaces (#1e293b) — the standard look.
Midnight
Darker, flatter surfaces (#0f172a) that recede into the background.
Zinc
Neutral grey surfaces (#3f3f46) with no blue tint.
Show Screen Title Icon
A toggle that shows or hides the small icon next to screen titles app-wide. Off by default. (This is the same control surfaced in the Screen Header section below — either place updates the same setting.)
Screen Style
Sets the overall visual philosophy for your screens. Choose one of three styles — the setting applies app-wide from one place and persists automatically:
Terminal
Monospace console aesthetic — sharp corners, dark console input/select/textarea fields, tabular numbers. Turns standard screens into a developer-terminal look, matching TotalApp's terminal-first tools.
Workstation Default
Dark aesthetic with ghost/glow buttons and glass card surfaces. The standard TotalApp look.
Enterprise
Light corporate look with white panels, solid filled buttons, and slate borders. Familiar ERP/Odoo aesthetic for clients who prefer a traditional business-software feel.
Choosing Enterprise also switches the app to the light theme with solid buttons; Terminal and Workstation use the dark theme with glow buttons. These are starting points — you can still adjust Theme and button style separately afterwards. The style now applies across essentially every screen (~240 screens), so switching it re-skins the whole app consistently, not just a handful of dense-data screens.
Layout Width
Controls how wide screen content is allowed to grow. Because every screen shares a standard base width, this one setting keeps all screens in a module aligned and lets you widen or narrow the whole app from a single place — no per-screen adjustment:
Compact
Caps content narrower for a tighter, more focused column on large monitors.
Comfortable Default
The standard balanced width used across TotalApp.
Wide
Widens content to make better use of large displays.
Full
Content fills the entire viewport width edge-to-edge, from one place, with no per-screen changes.
Full-bleed console, board, and whiteboard screens always use the full width regardless of this setting.
Button Styles
Controls the look of primary and toggle buttons across the app.
Primary Button
Glow Default
Blue primary buttons with a soft glow — the standard dark-theme look.
Solid
Flat, solid-filled buttons with no glow — cleaner, more corporate.
Golden
Warm gold/amber primary buttons for a premium accent.
Emerald
Green primary buttons.
Settings Toggle Style
Classic Default
The original subtle look for the selected/unselected toggle-button groups on this tab.
Bold
Stronger border and shadow on the selected option — clearer in light mode.
A Secondary Button style control is shown as coming soon.
App Icon Style
Controls how module/app icons are rendered on cards and in the sidebar:
Gradient Default
Icons use colourful per-module gradients.
Monochrome
Icons render in a single flat colour for a calmer, uniform look.
Screen Header
Every screen shares a standard header — a small uppercase module/section label (the "eyebrow"), the screen title, an optional one-line subtitle, and the primary action buttons aligned top-right (the B2B/enterprise-SaaS convention). These controls tune how that shared header looks, app-wide:
Eyebrow contrast
Prominent (default) or Subtle — how strongly the small uppercase module label above the title stands out.
Density
Compact, Comfortable (default), or Spacious — the title size and vertical spacing of the header.
Actions layout
Responsive (default, inline on wide screens and stacked when narrow), Inline (always on the title row), or Stacked (always on their own row) for the header's action buttons.
Show module icon
Toggles the small icon shown to the left of the title. The icon is the same one used on the app's card in My Apps, so the two always match.
These apply to every screen at once, so headers stay consistent across the whole app.
Add Record Mode
Controls how "Add New" forms open when you click the primary add button on any supported screen (HR, Finance, PM, Marketing, Purchase):
Modal Default
Form appears as a centred overlay with a bg-black/65 backdrop-blur scrim. The underlying screen is still visible but inaccessible.
Panel
Form slides in from the right edge as a full-height panel. The list behind it remains visible for reference. Useful on wide monitors.
Edit forms always open as modals regardless of this setting.
Tool View Mode
Controls how tool cards are displayed in Image Creator, Video Creator, Doc View, and My Apps:
Detailed Default
Horizontal card with a large icon on the left and a title + description on the right. Uses a 1–3 column grid.
Compact
Square aspect-ratio tile with a large centred icon and title only. Uses a denser 3–5 column grid. Better for quick scanning when you know the icons well.
Project Tab Style
Controls whether project tabs (Kanban Board, Timeline, My Notes) show icons alongside the tab label:
Text Only Default
Tab label text only. Clean and minimal.
Icon + Text
A 14px icon is shown to the left of the tab label. Active tabs use the primary colour for the icon; inactive tabs use a muted colour.
Course Builder Tab Style
Controls how the tabs inside the Course Builder are drawn:
Underline Default
The active tab is marked with an underline beneath its label.
Pill
The active tab is drawn as a filled rounded pill.
HR Sidebar Style
Controls the inner (secondary) sidebar used by the HR and other module screens that have a dedicated left navigation. Three sub-controls:
Sidebar Style
Switches the inner sidebar between the dark "chrome" look and a Light variant.
Sidebar Appearance
Text
Inner sidebar items show their label only.
Icon + Text
Inner sidebar items show an icon next to the label.
Sidebar Font Size
Sizes the inner sidebar text (small / medium / large) for readability.
Auto-Add Members
A toggle that automatically adds members to the relevant list — see its inline description in the setting for the exact behaviour.
Global Font
Sets the interface font used across the entire app. Each option previews in its own typeface:
- Inter Default — clean, neutral sans-serif.
- JetBrains Mono — monospace, developer-oriented.
- DM Sans — geometric sans-serif.
- Sora — modern display sans-serif.
- Nunito — rounded, friendly sans-serif.
- Raleway — elegant, thin sans-serif.
- Lora — readable serif.
- Roboto Slab — slab serif.
Split View
A toggle that, when enabled, always opens supported screens in a split-view layout instead of a single pane. Off by default.
My Apps Card Size
Tunes how the app cards on the My Apps screen look. Three sub-controls, each with a live preview:
Card Size
Sizes the app cards (small / medium / large) to fit more or fewer per row.
Colored Icons
A toggle: when on, each app card icon uses its colourful gradient; when off, icons render in a uniform neutral grey.
Hover Style
Chooses the visual effect an app card shows on hover.
List Style
Controls how row lists appear across every "My Workspace" screen — My Boards, My Presentations, My Projects, My Tasks, My Writings, My Spreadsheets, My Reports, My Documents, My Workflows, My Prompts, My Knowledge, My Courses, My Tests, and My Goals — plus a growing set of module screens: Warehouse Inventory, Bill of Materials, Work Orders, Work Instructions, WIP Tracking, Invoice Manager, and the Accounts (CRM) screen. Four independent settings:
Row Layout
Table Default
Rows sit inside a single scrollable table with a shared header row (columns, sortable where supported).
Cards
Each item renders as its own independent bordered row with rounded corners, spaced apart — no shared table header.
Table Corner Style
Sharp Default
The table's outer container has no border-radius or outer border — a flush, edge-to-edge look.
Rounded
The table's outer container gets rounded corners and a subtle border, matching the Cards layout's visual language.
Multi-Select Shape
Circle Default
Row selection checkboxes render as filled circles.
Square
Row selection checkboxes render as filled squares (rounded corners).
Show Check Icon Inside Selected Checkbox
Off Default
A selected checkbox shows only the filled primary colour — no icon inside it.
On
A selected checkbox additionally shows a white checkmark icon inside the filled shape.
Multi-Select Colour & Size
Two extra controls fine-tune the selection checkboxes: a colour picker sets the fill colour used when a row is selected, and a size control sizes the checkbox (small / medium / large) to taste.
Row Action Button
Ghost Default
Per-row action buttons (edit, delete, …) render as borderless ghost buttons that reveal on hover.
Bordered
Row action buttons always show a visible border, making them easier to spot.
Row Buttons Label
Icon Only Default
Row action buttons show just their icon for a compact row.
Icon + Text
Row action buttons show an icon with its text label for clarity.
Language
TotalApp supports two interface languages:
- English — default. All UI strings, labels, buttons, and status text in English.
- Turkish (Türkçe) — full localisation including all menu items, form labels, status badges, empty states, and tooltips. Terminal output stays in English.
Language switching is live — no page reload required. The change propagates instantly across all open screens.