Skip to content

Instantly share code, notes, and snippets.

@lleyton
Last active May 14, 2021 13:33
Show Gist options
  • Save lleyton/ae54f039c86ffcdceb829c820166fb8f to your computer and use it in GitHub Desktop.
Save lleyton/ae54f039c86ffcdceb829c820166fb8f to your computer and use it in GitHub Desktop.

Making an Octii Theme

Enabling Developer Mode

  1. Go to your account settings
  2. Click the text saying "Enable Developer Mode"
  3. Confirm by clicking save changes! Note: You might need to restart your client in order to enable developer mode

Organizations

An organization is a group used to manage products, organizations are just Octii communitites on steroids. To enable your community as an organization go to the general settings of the organization and follow the prompt. If you want to enable other members to manage products, we have a specific permission for that, called Manage Products.

Products

Let's create a new product! Go to the products tab in your organization and hit "Create Product". You'll need to specify a name, tagline, description, and icon for your new product.

A product will have many resources and versions. Versions are builds of your products that get deployed to the Octii store, while resources are the payloads you ship with your product. These payloads are theme files and client side extenstions.

For this tutorial, create a new theme resource in the Resources tab.

CLI

Great! It's time to get the Octii CLI, our companion tool for uploading resources to your product. CLI builds are regularly posted on our Discord server.

Once you have the CLI installed, you'll need to login. This process is pretty simple, just run octii account login. Fill out the form with your credentials to finish.

Scaffolding our project

Our CLI comes with templates for building different resources, since we're making a theme, let's use the theme template. To create a new file from this template, run octii templates theme theme.json. This will create a new JSON file (theme.json) with the template.

Building our theme

Simply modify the values in the JSON file in order to make a theme. Each theme will have seperate values for dark and light mode, these are values called theme objects, while the root level object is called the theme bundle. Each theme object has different colors you can specifify, which can be valid css values. If you need more control, you can add raw css into the global key in each theme object. When you want to test out your theme, go to the themes menu in your Octii settings, and drag-and-drop the theme.json file onto the theme selection UI.

Uploading

First we're going to need the ID of our organization, to list all our organizations, run octii organizations list. Grab the ID of your organization, and list your products by running octii organizations products list id, where id is your organization id. Finally, we need to get the resource id, just run octii products resources list id, where id is your product id. Finally, let's upload the theme file, run octii products resources put product_id resource_id theme.json, where product_id is the product id and resource_id is the resource id.

Publishing

Go to the product information on the Octii app, then navigate to the versions tab. Create a new version, this will automatically bundle your resources and put them on the Octii store. Currently, as we don't have a proper review system, please notify staff when you publish a new version so we can approve it.

Goodbye?

That's all, have fun making themes on Octii!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment