Hubs by Mozilla

Hubs by Mozilla

  • Docs
  • GitHub
  • Help

›Hubs Cloud

Introduction

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

Hubs Documentation

  • 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
  • Optimizing Scenes

For Developers

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

Hubs Cloud

  • Introduction
  • Getting Started
  • FAQ
  • Importing Content
  • Asset Packs
  • Customizing Look & Feel
  • Customizing Themes
  • Managing Content
  • Adding Administrators
  • Limiting Access
  • Recipe: Permissive Rooms
  • Recipe: 3rd Party Integrations
  • Recipe: Enable Scene Editor
  • Recipe: Custom SMTP
  • Recipe: Discord Bot
  • Advanced: SSH Access
  • Advanced: Content CDN
  • Custom Clients
  • Advanced: Brand Guidelines

Hubs Cloud AWS

  • AWS Quick Start
  • Domain Recipes
  • Using an Existing Domain
  • Using an Existing Email Provider
  • Updating the Stack
  • Backup and Restore
  • AWS Troubleshooting
  • Known Issues
  • System Architecture
  • Costs and Minimizing Costs Information
  • Estimating Cost Charts (Alpha)
  • Estimating CCU Limits

Hubs Cloud DigitalOcean

  • DigitalOcean Quick Start
Edit

Customizing Themes

You can add completely customized color schemes. From the Admin Console choose App Settings and then navigate to Themes and paste a JSON array describing your desired themes like the example below:

[
  {
    "id": "hubs-default",
    "default": true,
    "name": "Hubs Default",
    "variables": {}
  },
  {
    "name": "Hubs Dark Mode",
    "id": "hubs-dark-mode",
    "darkModeDefault": true,
    "variables": {
      "loading-screen-background": "radial-gradient(50% 50% at 50% 50%, #15171B 0%, #282C31 100%)",
      "accept-color-pressed": "#21242C",
      "primary-color-hover": "#12A4ED",
      "primary-color": "#12A4ED",
      "outline-color": "#ffffff",
      "basic-color": "#3A4048",
      "basic-color-hover": "#4B5562",
      "basic-color-pressed": "#636F80",
      "basic-border-color": "#13a4ed",
      "secondary-color-pressed": "#282C31",
      "accent1-color": "#2B313B",
      "accent1-color-hover": "#5D646C",
      "accent1-border-color": "#13a4ed",
      "accent1-color-pressed": "#21242C",
      "accent2-color": "#2B313B",
      "accent2-color-hover": "#5D646C",
      "accent2-color-pressed": "#21242C",
      "accent2-border-color": "#13a4ed",
      "accent3-color-pressed": "#21242C",
      "accent3-color": "#2B313B",
      "accent3-color-hover": "#5D646C",
      "accent3-border-color": "#13a4ed",
      "accent4-color": "#2B313B",
      "accent4-border-color": "#13a4ed",
      "accent4-color-hover": "#5D646C",
      "accent4-color-pressed": "#00699E",
      "accent5-color": "#2B313B",
      "accent5-border-color": "#13a4ed",
      "accent5-color-hover": "#5D646C",
      "accent5-color-pressed": "#21242C",
      "admin-color": "#13a4ed",
      "text1-color": "#ffffff",
      "text1-color-hover": "#E7E7E7",
      "text1-color-pressed": "#DBDBDB",
      "text2-color-pressed": "#DBDBDB",
      "text3-color-hover": "#C7C7C7",
      "text3-color-pressed": "#ADADAD",
      "text2-color-hover": "#F5F5F5",
      "text2-color": "#E7E7E7",
      "text3-color": "#BBBBBB",
      "text4-color": "#BBBBBB",
      "secondary-color": "#3A4048",
      "secondary-color-hover": "#5D646C",
      "border1-color": "#3A4048",
      "border2-color": "#5D646C",
      "border3-color": "#5D646C",
      "active-color-hover": "#12A4ED",
      "active-text-color": "#2B313B",
      "background1-color": "#2B313B",
      "background2-color": "#21242C",
      "background3-color": "#3A4048",
      "background4-color": "#5D646C",
      "accept-color": "#2B313B",
      "accept-color-hover": "#5D646C",
      "accept-border-color": "#7ED320",
      "background-hover-color": "#aaaaaa",
      "input-bg-color": "#21242C",
      "tip-text-color": "#ffffff",
      "tip-bg-color": "#017ab8",
      "tip-button-color-hover": "#008bd1",
      "action-color": "#000000",
      "action-color-highlight": "#149ce2",
      "action-label-color": "#5634ff",
      "notice-background-color": "#000000",
      "toolbar-icon-selected-bg": "#ffffff",
      "toolbar-basic-icon-color": "#ffffff",
      "toolbar-basic-selected-icon-color": "#2B313B",
      "toolbar-basic-color-hover": "#ffffff",
      "toolbar-label-accent1": "#ffffff",
      "toolbar-label-accent2": "#ffffff",
      "toolbar-label-accent3": "#ffffff",
      "toolbar-label-accent4": "#ffffff",
      "toolbar-label-accent5": "#ffffff"
    }
  }
]

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

Testing your themes

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.

Theme Variables Guide

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

Toolbar Diagram

Toolbar Diagram

Toolbar Diagram

Aframe Components

The in-world UI (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".

← Customizing Look & FeelManaging Content →
  • Aframe Components
Hubs by Mozilla
Docs
IntroductionHubs DocumentationSpoke DocumentationFor CreatorsFor DevelopersHubs Cloud
Community
Discord ChatTwitter
More
HubsSpokeGitHub
Copyright © 2022 Mozilla