How to customize the CSS theme on your Kokimoki game

When you edit a game with the Kokimoki builder, you might need to make a game that suits your event branding.
Is your company using pink as its main color (like BWT)? Then you should add a pink background to your big screen and your player’s device. Aside from the color, you can also add a picture as the background. However, make sure that the picture isn’t hindering the readability of your screen.

The CSS editing will allow your game to look the same no matter which browser/device the player is using.

So, let’s see 2 different ways to edit the CSS theme of your game.

Choose your game

Before we see the two ways, you need to select your game.
All the games have access to the CSS editing. We’ll just take one example and proceed from here.

Let’s try it with the AI Quiz. I decided to build a Quiz based on the Geography.

Customize the CSS

To edit your game theme, you can directly customize the CSS. To go there click on the CSS tab. Each game will show you a different set of themes to edit.

As you can see, you can edit any possible color from it, as well as the size of different element.

/* ===============
Theme colors
=============== */
:root [data-theme="gfc-theme"] {
  --theme-font-color-base: #000000;
  --theme-font-color-dark: #ffffff;
  --theme-rounded-base: 9999px;
  --theme-rounded-container: 8px;
  --theme-border-base: 1px;
  --color-primary: #059669;
  --color-secondary: #2563eb;
  --color-tertiary: #0891b2;
  --color-success: #65a30d;
  --color-warning: #ea580c;
  --color-error: #e11d48;
  --color-surface: #6b7280;

  --on-primary: #ffffff;
  --on-secondary: #ffffff;
  --on-tertiary: #ffffff;
  --on-success: #ffffff;
  --on-warning: #ffffff;
  --on-error: #ffffff;
  --on-surface: #ffffff;
}

If you’re unfamiliar with the color of the hexadecimal code used to define the colors, you can use Google. Just type “hexadecimal color picker”, and you’ll have this amazing tool.

From the color you pick, you get a 6-character code that you can copy and paste into your CSS theme editor.

Besides the color, you can also edit the background. As you can see here, we use a different background for each mode: Light or Dark.

/* ===============
  Light mode
  =============== */
body {
  background-color: #000000
}

/* ===============
  Dark mode 
  =============== */
.dark body {
  background-color: #0f172a;
}

Let’s try to add a pink color to match with our hypothetical branding. I picked #f1abff. Let’s go to the preview. Here’s the result! Nice isn’t it?

Now, let’s try to do it with a picture instead of a color. We need to replace the background-color #f1abff with background-image: url(‘’)

/* ===============
  Light mode
  =============== */
body {
  background-image: url(https://loquiz.com/wpmainpage/wp-content/uploads/2024/04/image_2024-04-18_173909754.png);
}

And now let’s go to the Preview part… There you are!

Feel free to edit the CSS theme in the same way as you edit your own website.