Theme Examples

This article contains examples of various themes for your workspaces with example JSON codes that you can directly use or customize further.

Here is the default theme for you to compare:

Example 1 - dark gray

To create a dark gray-tinted theme, use the complementary palette to define the colors.

You can use this code to create this theme.

{
   "theme" : {
      "content" : {
         "palette" : {
            "complementary" : {
               "c0" : "#292727",
               "c1" : "#323232",
               "c2" : "#424242",
               "c3" : "#4E4E4E",
               "c4" : "#5F5F5F",
               "c5" : "#7B7B7B",
               "c6" : "#A0A0A0",
               "c7" : "#B9B9B9",
               "c8" : "#D6D6D6",
               "c9" : "#EAEAEA"
            }
         }
      },
      "meta" : {
         "category" : "theme",
         "deprecated" : "0",
         "isProduction" : 1,
         "summary" : "",
         "tags" : "",
         "title" : "Dark gray theme"
      }
   }
}

Example 2 - dark blue with green

To create a dark blue-tinted theme with green primary color, use the complementary palette to define the colors.

You can use this code to create this theme.

{
   "theme" : {
      "content" : {
         "palette" : {
			"primary" : {
               "base" : "#00ce18"
            },
            "complementary" : {
               "c0" : "#122330",
               "c1" : "#1C3447",
               "c2" : "#264156",
               "c3" : "#324F65",
               "c4" : "#40617B",
               "c5" : "#4A6C89",
               "c6" : "#779DBB",
               "c7" : "#9DBFDA",
               "c8" : "#C3DDF1",
               "c9" : "#F0F8FF"
            }
         }
      },
      "meta" : {
         "category" : "theme",
         "deprecated" : "0",
         "isProduction" : 1,
         "summary" : "",
         "tags" : "",
         "title" : "Dark blue theme with green"
      }
   }
}

Example 3 - light gray

To create a light gray-tinted theme, use the complementary palette to define the colors.

You can use this code to create this theme.

{
   "theme" : {
      "content" : {
         "palette" : {
            "complementary" : {
               "c0" : "#FFFFFF",
               "c1" : "#F2F2F2",
               "c2" : "#EBEBEB",
               "c3" : "#E3E3E3",
               "c4" : "#D7D7D7",
               "c5" : "#BCBCBC",
               "c6" : "#9F9F9F",
               "c7" : "#757575",
               "c8" : "#5D5C5C",
               "c9" : "#333131"
            }
         }
      },
      "meta" : {
         "category" : "theme",
         "deprecated" : "0",
         "isProduction" : 1,
         "summary" : "",
         "tags" : "",
         "title" : "Light gray theme"
      }
   }
}

Example 4 - light blue

To create a light blue-tinted theme, use the complementary palette to define the colors.

You can use this code to create this theme.

{
   "theme" : {
      "content" : {
         "palette" : {
            "complementary" : {
               "c0" : "#FFFFFF",
               "c1" : "#F0F4F8",
               "c2" : "#E8EDF3",
               "c3" : "#DAE5EE",
               "c4" : "#C5D5E2",
               "c5" : "#8EA3B5",
               "c6" : "#62798E",
               "c7" : "#516275",
               "c8" : "#40505F",
               "c9" : "#19222A"
            }
         }
      },
      "meta" : {
         "category" : "theme",
         "deprecated" : "0",
         "isProduction" : 1,
         "summary" : "",
         "tags" : "",
         "title" : "Light blue theme"
      }
   }
}

Example 5 - font and primary color

To change the primary color of the visual elements (blue by default) to green and the font style to Roboto, update the primary color in the palette and fonts in typography.

You can use this code to create this theme.

{
   "theme" : {
    "content" : {
        "palette" : {
            "primary" : {
               "base" : "#17D901"
            }
        },
        "typography" : {
            "font" : "url(https://cdn.jsdelivr.net/npm/roboto-font@0.1.0/fonts/Roboto/roboto-regular-webfont.ttf)",
            "fontBold" : "url(https://cdn.jsdelivr.net/npm/roboto-font@0.1.0/fonts/Roboto/roboto-bold-webfont.ttf)"
        }
    },
      "meta" : {
         "category" : "theme",
         "deprecated" : "0",
         "isProduction" : 1,
         "summary" : "",
         "tags" : "",
         "title" : "Demo theme I"
      }
   }
}
Powered by Atlassian Confluence and Scroll Viewport.