Skip to main content

Custom CSS & JS

Want to change the colors to match your corporate identity? Or add a tracking script? TriviaFlow allows you to inject custom CSS and JavaScript files into every public view (Lobby, Player, Dashboard).

The File Locations​

The application automatically checks for the existence of specific files on every request. If they exist, they are included in the HTML <head> or <body>.

You need to create these files manually:

  • CSS: triviaflow/quiz/static/quiz/css/custom.css
  • JS: triviaflow/quiz/static/quiz/js/custom.js
No Restart Required

Because these are static files, you do not need to restart the Docker container to see changes. Just refresh your browser.

🎨 Customizing CSS​

TriviaFlow uses CSS Variables for its color scheme. This makes it incredibly easy to re-theme the entire application by just overriding a few variables in your custom.css.

Example: Dark Mode to Purple Theme

/* triviaflow/quiz/static/quiz/css/custom.css */

:root {
    /* Change background from dark blue to purple */
    --bg-color: #2d0f45;
    --card-bg: #4a1c6b;
    
    /* Change accent color from yellow to pink */
    --accent: #ff00ff;
    
    /* Update Answer Button Colors */
    --opt-a: #ff0077; /* A is now Pink */
}

You can find the default variable definitions at the top of player.css and lobby.css.

⚡ Custom Javascript​

The custom.js file is loaded at the end of the <body> tag. You can use this to add analytics or simple UI enhancements.

Example: Welcome Alert

// triviaflow/quiz/static/quiz/js/custom.js

console.log("Custom Logic Loaded!");

// Example: Add a confirmation before leaving
window.addEventListener("beforeunload", function (e) {
    // Logic here
});

Note: Be careful with DOM manipulation, as the game UI updates dynamically via WebSockets.