Theme Guide

From BeepBox Wiki

If you like BeepBox, or one of its many mods but don't like the appearance of the website, or you want to make your new BeepMod stand out after learning how to make one from the Modding Guide, then you might be interested in making your own theme. Themes are a simple way of making the appearance of a mod's website look unique from other BeepMods. Simply changing the colors or appearance of elements inside of your mod helps make your mod stand out from other mods that have been created.

In this guide, we'll explain everything you need to know about themes. From how colors work to the list of theme variables, everything will be touched upon over the course of this article. Let's start with something basic.

What is a Theme?

A Theme is a feature first played around with from a term used in BeepBox with its light theme, of which afterwards JummBox extended upon to give many more options to the user on what color pallete suits them best. Themes are used to change the colors of the editor and website by tweaking the variables used to color them. By default, most elements are already set up to receive color changes via these variables, but it's up to the mod developer to decide what color those variables contain. Pulling from the Themes Page, these values can be Hex Values (i.e #fff or #000c0f), RGB Values (i.e rgb(255,255,255)), color names (i.e. Bisque, CadetBlue, or Tan), as well as many others that web browsers support. All (BeepBox, JummBox, and JummBox's forks) themes are contained in a file called ColorConfig.ts, with the exception being mods made with ModBox since color themes there are handled within synth.ts instead. Since this guide will focus on how to make themes for mods made from current BeepBox, or JummBox, we won't be focusing on how ModBox handles themes.

How Themes Work [1]

The code for themes are written in CSS, a style sheet language commonly used for changing the appearance of websites made in HTML. All of the colors are typically handled in an element titled ":root {}". All BeepBox and JummBox forks use this method to create their themes. You can find a list of every variable in all modern BeepBox based mods below.

How to make a theme

The Easy Way

The Professional Way

List of Variables

This is a list of every variable that's required for theme creation.

Variable Description [2] Where it was introduced
--page-margin The background of the website. Covers the entire page behind the editor and description. BeepBox
--song-player-margin [3] Colors the background of the song player. If this variable is missing, the variable used is instead --editor-background. AbyssBox
--editor-background Colors the background of the song editor, as well as the description below the editor. BeepBox
--hover-preview Colors the box outline around the currently selected pattern in the track. BeepBox
--playhead Colors the playhead line that moves from left to right on the track editor and piano roll. BeepBox
--primary-text Colors the major text, as opposed to more minor text like the effect tiles. BeepBox
--secondary-text Colors the minor text. Affects things like the effect tiles. BeepBox
--inverted-text The background that appears after selecting text, it also effects --oscilloscope-line-R[4] in UltraBox[5] And the progress bar in AbyssBox [3]. BeepBox
--box-selection-fill Changes the selection box's color when you drag across the track editor or the piano roll. BeepBox
--loop-selection Changes the loop bar's color, and the loop indicator in the song player. BeepBox
--ui-widget-background Changes the color of buttons, the octave scrollbar, and many other things. BeepBox
--ui-widget-focus Changes the color of buttons when you click, or "focus" on them. BeepBox
--pitch-background Changes the color of the non Tonic and fifth note pitches. BeepBox
--tonic Changes the color of the tonic, or the root note of the key's background. BeepBox
--fifth-note Changes the color of the fifth notes background. BeepBox
--white-piano-key Changes the color of the white piano key left to the pattern editor. BeepBox
--black-piano-key Changes the color of the black piano key left to the pattern editor. BeepBox
--white-piano-key-text [6][7] Changes the color of the white piano key left to the pattern editor. GoldBox
--black-piano-key-text [6][7] Changes the color of the black piano key left to the pattern editor. GoldBox
--use-color-formula [8] Enables or disables the color formula coloring method for channel colors. The only acceptable values are true or false. JummBox
--track-editor-bg-pitch Changes the color of the background in actively used pitch bars in the track editor. BeepBox
--track-editor-bg-pitch-dim Changes the color of the background in inactive pitch bars in the track editor. BeepBox
--track-editor-bg-noise Changes the color of the background in actively used noise bars in the track editor. BeepBox
--track-editor-bg-noise-dim Changes the color of the background in inactive noise bars in the track editor. BeepBox
--track-editor-bg-mod [8] Changes the color of the background in actively used mod bars in the track editor. JummBox
--track-editor-bg-mod-dim [8] Changes the color of the background in inactive mod bars in the track editor. JummBox
--multiplicative-mod-slider [8] Changes the color of the oval shape that represents a change in a sliders value from a mod channels effects. JummBox
--overwriting-mod-slider [8] Changes the color of the rectangle shape that represents a change in a sliders value from a mod channels effects. JummBox
--indicator-primary [8] Changes the color of the primary/active indicator. JummBox
--indicator-secondary [8] Changes the color of the secondary/inactive indicator. JummBox
--select2-opt-group [8] Changes the color of the grouping in dropdowns (found in the change instrument type dropdown). JummBox
--input-box-outline[8] Changes the color of the outline surrounding input boxes. JummBox
--mute-button-normal [8] Changes the color of the mute button next non mod channels. JummBox
--mute-button-mod [8] Changes the color of the mute button next mod channels. JummBox

Channels and Note Colors

Channels and Note Hex Codes in Detail

Channels and Note Color Formula in Detail

Advanced Theme Editing

Footnotes

  1. This information is sourced from the Themes Page.
  2. This information is sourced from this variable guide.
  3. 3.0 3.1 This is only available in AbyssBox and its derivatives.
  4. Despite originating in Midbox, this feature hasn't been released yet.
  5. This is only available in UltraBox and its derivatives.
  6. 6.0 6.1 This is only available in GoldBox and its derivatives.
  7. 7.0 7.1 This appears in BoxBeep.
  8. 8.00 8.01 8.02 8.03 8.04 8.05 8.06 8.07 8.08 8.09 8.10 This is only available in JummBox and its derivatives.