Appearance Settings
Customize the look and feel of your LaborWise instance, including branding that applies to the installed app on mobile devices.
Accessing Appearance Settings
- Go to Settings → Appearance
- Adjust the settings below
- Click Save to apply changes
Branding
Organization Logo
Upload your organization’s logo to replace the default LaborWise logo throughout the app.
- Click the Upload Logo area or drag and drop an image
- Adjust the Logo Height slider (20–200px) to control the display size
- Click Save
This logo appears in the sidebar on dark backgrounds. To set a separate logo for the mobile app icon and splash screen, see Mobile App Branding below.
Organization Name Visibility
The sidebar displays your organization’s name (set in Organization Settings) below the logo by default.
- Check Hide organization name in sidebar to display only the logo
Colors
Button Color
Sets the primary accent color used for buttons, links, and interactive elements across the app. This color is also used as the theme color for the installed app.
Menu Colors
Customize the sidebar appearance:
- Menu Background — Background color of the sidebar
- Menu Text Color — Color of sidebar text and icons
- Menu Accent Color — Highlight color for the active menu item
Each color picker shows a live preview as you adjust values.
Mobile App Branding
The Mobile App card lets you configure how the app appears when installed on a phone or tablet. These settings are separate from the sidebar logo and name, so you can use a different logo that works well on light backgrounds (e.g., the PWA splash screen).
If you leave these fields empty, the sidebar logo and organization name are used as defaults.
App Name
Override the name shown on the home screen and in the app switcher. If left blank, the organization name from Organization Settings is used.
Splash Background Color
Set the background color for the PWA splash screen and the icon padding area. This is important if your logo has a transparent background — choose a color that provides good contrast.
App Logo
Upload a separate logo for the mobile app icon. The preview is shown against the chosen background color so you can verify it looks correct before saving.
For best results, use a square image at least 512Ă—512 pixels.
How settings map to the installed app
| Setting | Effect on Installed App |
|---|---|
| App Logo (or Organization Logo) | Used as the app icon on the home screen |
| App Name (or organization name) | Used as the app name under the icon |
| Splash Background Color | Background of the splash screen and icon padding |
| Button Color | Used as the theme/status bar color |
On Android, branding changes auto-update within 24–48 hours. On iOS, users must remove the app from their home screen and re-add it to see updated icons and names.
Custom CSS
Add custom CSS rules to further customize the appearance of your instance. Enter valid CSS in the Custom CSS textarea.
Custom Head HTML
Inject custom HTML into the <head> of every page. This can be used for analytics scripts (e.g., Google Analytics), custom fonts, or other integrations.
Supported elements:
<script src="...">— External scripts only (inline scripts are blocked for security)<link>— Stylesheets, fonts, and other linked resources<meta>— Meta tags
Inline <script> tags (scripts without a src attribute) are not supported. Use external script URLs instead. Only admins can modify these settings.