Hubs

Hubs

  • Hubs Foundation
  • Docs
  • GitHub
  • Help

›Hubs Admin Panel

Introduction

  • Welcome
  • Getting Started With Hubs
  • Building Scenes with Spoke
  • Creating Custom Avatars
  • Hosting Events in Hubs

Setting Up Your Hub

  • Managing Your Hub's Content
  • Frequently Asked Questions
  • Contact Us

Hubs Fundamentals

  • Create and Join Rooms
  • Hubs Features
  • Sharing Avatar Links Privately
  • User Settings
  • Room Settings
  • Controls
  • Discord Bot
  • Troubleshooting
  • FAQ

Spoke Documentation

  • Create Project
  • User Interface
  • Spoke Controls
  • Adding Content
  • Architecture Kit
  • Grid
  • Skyboxes
  • Lighting and Shadows
  • Physics and Navigation
  • Publish Scenes

For Creators

  • Advanced Avatar Customization
  • Linking Hubs Rooms
  • Using the Blender glTF Exporter
  • Blender Add-on Components
  • Optimizing Scenes
  • Introduction to Behavior Graphs

For Developers

  • System Overview
  • Build a Custom Client
  • Contributing
  • Hubs Query String Parameters
  • GitHub Workflows

Hubs Client development

  • Hubs Client development Basics
  • Core Concepts for Gameplay Code
  • Hubs Client development Interactivity
  • Hubs Client development Networking

Hubs Admin Panel

  • Introduction
  • Getting Started
  • Importing Content
  • Customizing Themes
  • Managing Content
  • Adding Administrators
  • Limiting Access
  • Recipe: Permissive Rooms
  • Recipe: Enable Scene Editor
Edit

Customizing Themes

Theming refers to the colors used in your hub's interface. For each color in the UI, there is a variable that stores the color value and is applied to UI Elements such as buttons, input fields, menus, etc.

Table of Contents
      Theme JSON
      Theme Variables Guide
      In-App Themes
      Learn about Themes


Theme JSON

You can add completely customized color schemes from the Admin Panel by copying and pasting a theme JSON, like the example below:

[
  {
    "id": "hubs-default",
    "default": true,
    "name": "Hubs Default",
    "variables": {
      "loading-screen-background": "radial-gradient(100% 160.26% at 100% 50%, #EBEBEB 0%, #FFFFFF 46.87%, #EBEBEB 100%)",
      "primary-color": "#1700C7",
      "primary-color-hover": "#170696",
      "secondary-color": "#FFFFFF",
      "secondary-color-hover": "#E7E7E7",
      "secondary-color-pressed": "#E7E7E7",
      "link-color": "#1700C7",
      "accent1-color": "#F04F5F",
      "accent1-color-hover": "#D43F57",
      "accent1-color-pressed": "#D43F57",
      "toolbar-label-accent1": "#FFFFFF",
      "accent1-border-color": "#F04F5F",
      "accent2-color": "#47D3CA",
      "accent2-color-hover": "#42CAC1",
      "accent2-color-pressed": "#42CAC1",
      "toolbar-label-accent2": "#616161",
      "accent2-border-color": "#47D3CA",
      "accent3-color": "#92D147",
      "accent3-color-hover": "#83C832",
      "accent3-color-pressed": "#83C832",
      "toolbar-label-accent3": "#FFFFFF",
      "accent3-border-color": "#92D147",
      "accent4-color": "#1700C7",
      "accent4-color-hover": "#170696",
      "accent4-color-pressed": "#170696",
      "toolbar-label-accent4": "#FFFFFF",
      "accent4-border-color": "#1700C7",
      "accent5-color": "#FF806F",
      "accent5-color-hover": "#F0705F",
      "accent5-color-pressed": "#F0705F",
      "toolbar-label-accent5": "#FFFFFF",
      "accent5-border-color": "#FF806F",
      "cancel": "#E1465F",
      "accept-color": "#92D147",
      "accept-color-hover": "#85C23C",
      "accept-color-pressed": "#21242C",
      "accept-border-color": "#7ED320",
      "text1-color": "#000000",
      "text1-color-hover": "#2C2C2C",
      "text1-color-pressed": "#2C2C2C",
      "text2-color": "#616161",
      "text2-color-hover": "#616161",
      "text2-color-pressed": "#616161",
      "text3-color": "#BBBBBB",
      "text3-color-hover": "#C7C7C7",
      "text3-color-pressed": "#ADADAD",
      "text4-color": "#868686",
      "text5-color": "#FFFFFF",
      "border1-color": "#E7E7E7",
      "border2-color": "#5D646C",
      "border3-color": "#5D646C",
      "outline-color": "#3A4049",
      "background1-color": "#FFFFFF",
      "background2-color": "#F5F5F5",
      "background3-color": "#E7E7E7",
      "background4-color": "#5D646C",
      "tip-text-color": "#FFFFFF",
      "tip-bg-color": "#000000",
      "tip-button-color-hover": "#E7E7E7",
      "input-bg-color": "#FFFFFF",
      "active-text-color": "#2B313B",
      "active-color-hover": "#E8EFFD",
      "active-color-pressed": "#D0DEFB",
      "action-color": "#000000",
      "action-color-highlight": "#149CE2",
      "action-label-color": "#5634FF",
      "notice-background-color": "#000000",
      "admin-color": "#13A4ED",
      "toolbar-basic-selected-icon-color": "#2B313B",
      "toolbar-basic-icon-color": "#000000",
      "toolbar-basic-color-hover": "#E7E7E7",
      "toolbar-basic-border-color": "#E7E7E7",
      "toolbar-icon-selected-bg": "#FFFFFF",
      "basic-color": "#FFFFFF",
      "basic-color-hover": "#E7E7E7",
      "basic-color-pressed": "#E7E7E7",
      "background-hover-color": "#E7E7E7",
      "basic-border-color": "#E7E7E7",
      "link-color-hover": "#1700C7",
      "radio-bg-color": "#FFFFFF"
    }
  },
  {
    "name": "Hubs Dark Mode",
    "id": "hubs-dark-mode",
    "darkModeDefault": true,
    "variables": {
      "loading-screen-background": " linear-gradient(110.71deg, #499CBE 0.79%, #1D11C6 32.83%, #6B30AF 67.96%, #E67577 100%);",
      "primary-color": "#6E5BFF",
      "primary-color-hover": "#7967FF",
      "secondary-color": "#FFFFFF",
      "secondary-color-hover": "#E7E7E7",
      "secondary-color-pressed": "#E7E7E7",
      "link-color": "#6E5BFF",
      "link-color-hover": "#7967FF",
      "link-color-pressed": "#7967FF",
      "accent1-color": "#F04F5F",
      "accent1-color-hover": "#D43F57",
      "accent1-color-pressed": "#D43F57",
      "toolbar-label-accent1": "#FFFFFF",
      "accent1-border-color": "#F04F5F",
      "accent2-color": "#47D3CA",
      "accent2-color-hover": "#3CC6BD",
      "accent2-color-pressed": "#42CAC1",
      "toolbar-label-accent2": "#FFFFFF",
      "accent2-border-color": "#47D3CA",
      "accent3-color": "#92D147",
      "accent3-color-hover": "#83C832",
      "accent3-color-pressed": "#83C832",
      "toolbar-label-accent3": "#FFFFFF",
      "accent3-border-color": "#92D147",
      "accent4-color": "#6E5BFF",
      "accent4-color-hover": "#5C4ADF",
      "accent4-color-pressed": "#5C4ADF",
      "toolbar-label-accent4": "#FFFFFF",
      "accent4-border-color": "#6E5BFF",
      "accent5-color": "#FF806F",
      "accent5-color-hover": "#F0705F",
      "accent5-color-pressed": "#F0705F",
      "toolbar-label-accent5": "#FFFFFF",
      "accent5-border-color": "#FF806F",
      "cancel": "#E1465F",
      "accept-color": "#92D147",
      "accept-color-hover": "#7FBF33",
      "accept-color-pressed": "#7FBF33",
      "accept-border-color": "#92D147",
      "text1-color": "#EAEAEA",
      "text1-color-hover": "#EAEAEA",
      "text1-color-pressed": "#EAEAEA",
      "text2-color": "#E7E7E7",
      "text2-color-hover": "#E7E7E7",
      "text2-color-pressed": "#E7E7E7",
      "text3-color": "#BBBBBB",
      "text3-color-hover": "#C7C7C7",
      "text3-color-pressed": "#ADADAD",
      "text4-color": "#FFFFFF",
      "text5-color": "#FFFFFF",
      "border1-color": "#463F78",
      "border2-color": "#433C75",
      "border3-color": "#3B346D",
      "outline-color": "#3A4049",
      "background1-color": "#28244B",
      "background2-color": "#302B52",
      "background3-color": "#352F5F",
      "background4-color": "#383267",
      "tip-text-color": "#FFFFFF",
      "tip-bg-color": "#000000",
      "tip-button-color-hover": "#E7E7E7",
      "input-bg-color": "#5D646C",
      "active-text-color": "#EAEAEA",
      "active-color": "#7967FF",
      "active-color-hover": "#6E5BFF",
      "active-color-pressed": "#6E5BFF",
      "action-color": "#000000",
      "action-color-highlight": "#6E5BFF",
      "action-label-color": "#5634FF",
      "notice-background-color": "#000000",
      "admin-color": "#70D9DE",
      "toolbar-basic-selected-icon-color": "#2B313B",
      "toolbar-basic-icon-color": "#EAEAEA",
      "toolbar-basic-color-hover": "#FFFFFF",
      "toolbar-basic-border-color": "#6E5BFF",
      "toolbar-icon-selected-bg": "#FFFFFF",
      "toggle-button-color": "#6E5BFF",
      "basic-color": "#2B2560",
      "basic-color-hover": "#362E79",
      "basic-color-pressed": "#362E79",
      "background-hover-color": "#E7E7E7",
      "basic-border-color": "#E7E7E7",
      "tile-bg-color": "#3B346D",
      "tile-bg-color-hover": "#362E79",
      "tile-bg-color-pressed": "#362E79"
    }
  }
]

Use the boolean attributes, "default" and "darkModeDefault" to set a default theme from your custom themes array.

Theme Variables Guide

While not exhuastive, these diagrams will outline a few key variables that you can use in your themes.

Entry Screen

Theme variable correlation on entry screen

Bottom Toolbar

Theme variable correlation on bottom toolbar

Menus

Theme variable correlation on menus

In-App Themes

The in-world User Interface (e.g the menu you get when hovering your cursor over an object and pressing spacebar) is themed with the following variables: "action-color", "action-label-color", "action-color-disabled", "action-color-highlight", "action-text-color", "action-subtitle-color", "notice-background-color", "notice-text-color", "favorited-color".

Learn about Themes

There are some great tools you can use to learn more about theme-ing your hub.

You can learn about working with JSON from MDN Web Docs.

Storybook, an open source tool for building UI components and pages in isolation, is very helpful in customizing themeing. To run storybook locally you can use the command npm run storybook to preview components and themes.

← Importing ContentManaging Content →
  • Theme JSON
  • Theme Variables Guide
    • Entry Screen
    • Bottom Toolbar
    • Menus
  • In-App Themes
  • Learn about Themes
Hubs
Docs
IntroductionSetting Up Your HubHubs FundamentalsSpoke DocumentationFor CreatorsFor DevelopersAdministration
Community
Discord Chat
More
HubsSpokeGitHub
Copyright © 2024–2025 Hubs Foundation. Hubs Documentation available under the Creative Commons Attribution-ShareAlike 3.0 Unported (CC BY-SA 3.0) license.