Add a song

Songs are saved on this device first. Open the Local tab and press Upload online to send one to staff for review.

Access code

Enter the access code to use Rhythmhel.

Log in or create an account

Making a custom theme

A theme is just a short list of colors. Rhythmhel reads them the moment you leave the box, saves them on this device, and repaints everything, including the playfield.

Quick start

1. Pick a preset in Theme preset. Its colors appear in the Custom CSS box.
2. Change any color you like. Click outside the box and it applies instantly.
3. Or press Use the full template below to start from every color with notes.

The rules

• Each line looks like --accent:#ff66aa;. Wrapping everything in :root{ ... } is optional.
• Use hex colors like #12101a. Names and rgb() work too, but transparency is ignored.
• Anything you leave out keeps the default value.
• /* text between these */ is a comment and is ignored.
• Reset by clearing the box (then click outside it) or picking a preset.

Every color you can change

Tips

• Dark themes: make --panel a little lighter than --bg, and --panel2 a little darker.
• Light themes: add color-scheme:light;, a dark --text, a dark --line, and --seltext:#ffffff.
• Pick note colors that look different from each other. Lanes are easier to read that way.
• You can also load a theme from a .css file with Load a .css theme file, and share the file with friends.

Full template

:root{
  /* main colors */
  --bg:#0c0d1f;        /* background */
  --accent:#a8a8e8;    /* highlights and buttons */
  --seltext:#0c0d26;   /* text on the accent color */
  --panel:#15173a;     /* cards and buttons */
  --panel2:#0e1029;    /* bars, side panels, text boxes */
  --edge:#3b3f78;      /* borders and dividers */
  --text:#eff0ff;      /* normal text */
  --dim:#9b9fcf;       /* quiet text */
  /* gameplay */
  --lane:#080913;      /* playfield */
  --line:#ffffff;      /* hit line */
  --lane-1:#a8a8e8;    /* 4K notes, left to right */
  --lane-2:#e6b4ff;
  --lane-3:#8fdcff;
  --lane-4:#fff0b8;
  --lane-solo:#e6b4ff; /* 1K notes */
  --perfect:#c8c8f8;
  --great:#b8f0d0;
  --miss:#d05a5a;
  --bad:#ff6a86;
  --bg-dim:.6;         /* song background darkness, 0 to 0.9 */
  /* --logo:url("rhythmhel.png");  optional: swap the logo image */
  /* --trail:#a8a8e8;  optional: override the automatic mouse trail color */
}

Generate charts

Pick a key count and difficulty. A chart with the same name is replaced and its leaderboard is cleared.

Export

Only the uploader (or staff) can export a song's charts.

Making a mod

A mod is one JavaScript file. Rhythmhel runs it with a single variable called rh. Mods are saved on this device and can be switched off or removed in Options, Mods.

Safety

A mod runs with the same power as the game itself: it can read your settings and your login session. Only install mods from people you trust, and read the code first. While any mod is enabled, your scores are not uploaded to the leaderboards.

Quick start

1. Write a file such as counter.js (example below).
2. Options, Mods, then pick the file under Install a mod from a .js file (or paste the code and press Add mod).
3. Changes apply instantly. Disable or remove it any time.

// counter.js: shows a Perfect counter while playing
const size = rh.option({id:'size', label:'Counter size', type:'number', def:22, min:12, max:60});
rh.on('frame', screen => {
  if (screen !== 'play') return;
  rh.tx('Perfects ' + rh.play.c[0], 24, 150, size(), rh.theme.perfect);
});
rh.on('judge', j => { if (j.rating === 'Miss') rh.toast('Missed on lane ' + (j.lane + 1)); });
rh.menu('Hello', () => rh.toast('Hello from my mod!'));
rh.css(':root{--accent:#ff66aa}'); rh.refreshTheme();

Events: rh.on(name, fn)

Things you can call

Things you can read

Tips

• Errors in a mod are caught and shown once as a message. Open the browser console for details.
• Do not change rh.play.score and expect it to be accepted: the server recomputes every score from your key presses.
• Timers (setInterval) are not cleaned up when you disable a mod. Reload the page after switching one off.

Customize keys

Change each key separately: shape, color and image. It applies to that key's notes and its key button. “Default” follows your global note shape and the theme's lane color.