Infinito.Nexus CSS Modification for Dummies - A simple guide for people with basic Git and CSS knowledge

Tutorials
1

This guide explains how you can customize the look of any Infinito.Nexus application using the global theming system provided by the role:

:backhand_index_pointing_right: https://github.com/kevinveenbirkenbach/infinito-nexus/tree/master/roles/sys-front-inj-css

No deep development experience required.

:rocket: 1. What the role actually does (in simple words)

The sys-front-inj-css role provides a global theme for all Infinito.Nexus apps.
It creates:

  • a universal color palette
  • automatic light & dark mode behavior
  • dynamic CSS variables like --color-01-90
  • per-application override support (style.css / style.css.j2)

This means:

:check_mark: All apps look consistent
:check_mark: You can still override styles per app
:check_mark: No need to worry about dark mode — it works automatically
:check_mark: Just use the provided color variables

:artist_palette: 2. How the color system works (non-technical)

The global palette uses CSS variables that look like this:

--color-XX-YY

  • XX = a color group (e.g., 01, 02, 03…)
  • YY = brightness (00 = darkest → 99 = brightest)

Complementary groups

The first two digits (XX) represent complementary color groups,
meaning the colors automatically match and harmonize.
This makes it easy to create consistent designs without knowing color theory.

RGB versions

For transparency:

--color-rgb-XX-YY

Example:

background-color: rgba(var(--color-rgb-01-70), 0.4);

Why you should ALWAYS use these variables

  • They automatically adjust in dark mode
  • They ensure consistent styling
  • They scale with future theme changes

:cross_mark: Do NOT use hex colors (#fff, #000, #12abef)
:check_mark: Do always use --color-XX-YY

:puzzle_piece: 3. Where to place your custom CSS

Every application role can include its own stylesheet:

Option A — Recommended (template-based)

roles/<app-name>/templates/style.css.j2

Option B — Simple CSS file

roles/<app-name>/files/style.css

If any of these files exist, Infinito.Nexus automatically injects them into the app — no configuration needed.

:test_tube: 4. How to test your CSS in the browser (the easy way)

Anyone can test CSS changes directly in the browser:

  1. Open the app you want to style
  2. Right-click an element
  3. Choose Inspect
  4. Edit CSS live in the DevTools panel
  5. Try different color variables, for example:
background-color: var(--color-01-90);
color: var(--color-01-10);
border-color: var(--color-01-60);
  1. Once you like the result:
    → Copy the CSS from the browser into your style.css or style.css.j2
  2. Save → Commit → Push → Done

Helpful beginner CSS tutorials:

:framed_picture: 5. Before creating a Pull Request (PR)

Please include:

:check_mark: A screenshot before your changes

:check_mark: A screenshot after your changes

:check_mark: A short explanation of what you improved

This makes it super easy for maintainers to review the change quickly.

:shuffle_tracks_button: 6. How to submit your change (Git for beginners)

  1. Fork the repository

  2. Create a new branch (e.g. feature/custom-css-appname)

  3. Add your file:

    roles/<appname>/templates/style.css.j2

  4. Commit:

Add custom style.css for <appname> using Infinito.Nexus color variables
  1. Push your branch
  2. Open a Pull Request
  3. Attach your before/after screenshots
  4. Submit :tada:

:light_bulb: 7. Example style.css.j2

/* Custom header style for my app */
.app-header {
    background-color: var(--color-01-90);
    color: var(--color-01-10);
    border-bottom: 2px solid var(--color-01-70);
}

/* Example button override */
.my-button {
    background-color: var(--color-01-65);
    color: var(--color-01-99);
    border-color: var(--color-01-50);
}

:tada: Quick Summary for Beginners

Goal What to do
Change app design Add style.css / style.css.j2 to the app role
Choose colors Use --color-XX-YY variables
Test changes Use browser “Inspect Element”
Submit improvements Open a PR + screenshots