Skin: themes and styling

Themes

The look of the application is a theme: a CSS file loaded by the desktop. The available themes are default, grayscale and pink.

• The administrator chooses the theme of the whole installation in Settings → Theme. It is saved in the configuration value uiTheme.
• A user can override it for themselves (stored with config()->saveForUser('uiTheme', ...)).

apps/Settings/Controllers/Theme.php (excerpt)

  public function prepareView(): void
  {
    parent::prepareView();

    $themes = ['default', 'grayscale', 'pink'];

    $set = $this->router()->urlParamAsString('set');
    if (!empty($set) && in_array($set, $themes)) {
      $this->config()->save('uiTheme', $set);
      $this->router()->redirectTo($this->router()->getRoute());
    }

    $this->viewParams['themes'] = $themes;

    $this->setView('@Hubleto:App:Community:Settings/Theme.twig');
  }

The desktop loads <assetsThemesUrl>/<uiTheme>.css, where assetsThemesUrl comes from ConfigEnv.php.

Dark mode

The button in the header switches the dark mode. The choice is stored in the browser (localStorage.theme) and adds the class dark to the page. Tailwind is configured with darkMode: 'selector', so write dark variants as dark:bg-gray-900.

Tailwind CSS

Hubleto is styled with Tailwind CSS 4. Your project owns two files:

Files of your project.

erp-project: tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  darkMode: 'selector',
  content: [
    "./vendor/hubleto/erp/**/*.{html,js,twig,tsx,php}",
    "./vendor/hubleto/enterprise/**/*.{html,js,twig,tsx,php}",
    "./vendor/hubleto/framework/**/*.{tsx,twig,php}",
    "./vendor/hubleto/react-ui/css/**/*.{js,ts,jsx,tsx}",
  ],
  plugins: [],
}

Change the primary and secondary colors of your installation in src/Main.twcss:

erp-project: src/Main.twcss (excerpt)

@theme {
  --font-sans: 'Gabarito', 'sans-serif';
  --font-serif: 'Merriweather', 'serif';

  --color-primary: #4780bf;
  --color-secondary: #41c50d;

  --spacing-8xl: 96rem;
  --spacing-9xl: 128rem;

  --radius-4xl: 2rem;

  --nav-height: 3rem;

NOTE Tailwind generates only the classes it finds in the files listed in content. The list above does not contain src/apps. If a class that you use only in a custom app has no effect, add "./src/apps/**/*.{tsx,twig,php}" to content and rebuild the CSS with npm run build.

Use the components of Hubleto

Use the existing CSS classes of the desktop and the components (btn, btn-primary, badge, alert, card, table-default, app-main-title) instead of your own styles. The result stays consistent with the themes and with dark mode.