Creating Themes :

Part 2 of Files

The next step in creating your own theme is to change all of the included files from the default theme to your own theme's name. For example, mosaic-gd-default-theme, gd-events-sheet-default-theme, and gd-table-default-theme would change to mosaic-gd-Sunrise-theme, gd-events-sheet-Sunrise-theme, and gd-table-Sunrise-theme (or the equivalent for dark theme).

After referencing your new theme, you need to update mosaicRootClassName, eventsSheetRootClassName and tableRootClassName in the theme's local index.js file (these classnames are used to distinguish between the CSS files for each theme).

  mosaicRootClassName: 'mosaic-gd-Sunrise-theme',
  eventsSheetRootClassName: 'gd-events-sheet-Sunrise-theme',
  tableRootClassName: 'gd-table-Sunrise-theme',


The Mosaic.css file contains the scaffolding of your theme.

It defines the background color for the entire theme. The background is created behind the game canvas. Changing this color will only be observable in areas not covered by the canvas. Most theme colors are defined using the hex numbers for a color. As an example, the background color of the Default Theme is

Other colors defined here are such things as the draggable Project and Object headers as well as hover colors, fonts and text color.

The example below will give you an idea of what you can do within this file. While the colors are not particularly outstanding from a design aspect, they are purposefully applied using colors that allow you to see the changes in the Scene Editor.

  /* Mosaic layout */
/*background behind the canvas*/
 .mosaic-gd-Sunrise-theme.mosaic {
  background-color: #f22222 !important;  /* red */

// Mosaic window and tile
/*mosaic-window-toolbar = the header bar background for Properties and Objects for Scene Editor*/
 .mosaic-gd-Sunrise-theme .mosaic-window-toolbar {
  background: #0029ce !important;
/* css for the text of the Properties and Objects header bar for the Scene Editor*/
 .mosaic-gd-Sunrise-theme .mosaic-window .mosaic-window-title {
  color: rgb(247, 241, 241) !important;
  font-weight: 400 !important;
  font-family: -apple-system, BlinkMacSystemFont, sans-serif !important;

/* Hovered titlebar background */
/* When mouse is hovered over the Properties or Objects header bar in the Scene Editor, the background color is changed to highlight the header.*/
.mosaic-gd-Sunrise-theme.mosaic-blueprint-theme .mosaic-window .mosaic-window-toolbar.draggable:hover,
.mosaic-gd-Sunrise-theme.mosaic.mosaic-blueprint-theme .mosaic-preview .mosaic-window-  toolbar.draggable:hover {
background: #f22222 !important; /* red*/


This is where things get interesting. Most of the colors for the Scene Editor and upper screen toolbar/menu are defined here. The file itself is self-explanatory. I suggest that you play around with the colors to get an idea of what each one does.


The EventsSheet.css file controls the colors and layout of the Events Editor. You can learn by changing the colors here, but be advised that it isn't a good idea to change the styling that relates to the actual layout: margins, padding, etc. This could easily destroy the screen position of the entire Events Editor.


Table.css colors control large tables (like the one used for InstancesList). It mimics the Material UI Tables style.