Skip to main content

​
Overview

The useBranding composable provides reactive access to application branding settings including brand name, logo, color theming, and login page customization. It automatically applies custom CSS variables and updates the document based on application settings.

​
Usage

import { useBranding } from '~/composables/useBranding';

const {
  brandName,
  logoUrl,
  loginFooterText,
  loginFooterUrl,
  loginShowFooter
} = useBranding();

​
Return Values

The composable returns an object with the following reactive properties:
​
brandName
ComputedRef<string | undefined>
The custom brand name for the application. Returns the value from the public.brand_name setting.
​
logoUrl
ComputedRef<string | null>
The URL to the custom logo. Returns a formatted URL pointing to /branding/logo endpoint if a logo is configured, otherwise null.
​
loginFooterText
ComputedRef<string | undefined>
The text to display in the login page footer. Returns the value from the public.login_footer_text setting.
​
loginFooterUrl
ComputedRef<string | undefined>
The URL to link to from the login page footer. Returns the value from the public.login_footer_url setting.
​
loginShowFooter
ComputedRef<boolean>
Whether to show the footer on the login page. Returns true unless explicitly set to "false" in the public.login_show_footer setting.

​
Automatic Features

The composable automatically handles several application-wide updates:

​
Theme Color Management

Automatically applies custom CSS variables for both light and dark color modes based on application settings. Supports customization of:
  • Core colors (background, foreground, primary, secondary, accent, muted, destructive, warning)
  • Card and border colors
  • Popover and input colors
  • Sidebar colors
  • Top navigation colors
  • Border radius

​
Favicon Updates

Monitors the public.favicon_url setting and automatically updates the document favicon when changed.

​
Document Title

Automatically updates the document title to include the brand name: {brandName} | Counter-Strike Management System.

​
Color Mapping

The composable manages two color maps for theming:
Maps application settings to CSS variables for light mode:
  • public.color_background → --background
  • public.color_foreground → --foreground
  • public.color_primary → --primary
  • And 30+ additional color mappings for comprehensive theming
Maps application settings to CSS variables for dark mode:
  • public.color_dark_background → --background
  • public.color_dark_foreground → --foreground
  • public.color_dark_primary → --primary
  • And 30+ additional dark mode color mappings

​
Dependencies

  • useApplicationSettingsStore() - Provides access to application settings
  • useColorMode() - Provides current color mode (light/dark)
  • useRuntimeConfig() - Provides runtime configuration for API domain

​
Example: Custom Branding

<template>
  <div>
    <img v-if="logoUrl" :src="logoUrl" :alt="brandName" />
    <h1>{{ brandName }}</h1>
    
    <footer v-if="loginShowFooter">
      <a :href="loginFooterUrl">{{ loginFooterText }}</a>
    </footer>
  </div>
</template>

<script setup lang="ts">
const {
  brandName,
  logoUrl,
  loginFooterText,
  loginFooterUrl,
  loginShowFooter
} = useBranding();
</script>

​
Notes

The composable uses Vue watchers with immediate: true and deep: true options, so all automatic features are applied as soon as the composable is used and whenever settings change.
Color values from settings are applied directly to CSS custom properties. Ensure color values are valid CSS color formats (hex, rgb, hsl, etc.).

Build docs developers (and LLMs) love

Get started for freeTalk to us