Skip to Content
Custom CSSCounter Styling

Counter Styling

This guide explains how to customize key counter appearance using CSS.

Basic Structure

Counters indicate their state through the .counter class and data-counter-state attribute:

  • data-counter-state="inactive": Key not pressed
  • data-counter-state="active": Key being pressed

Global Counter Styles

Set styles that apply to all counters:

.counter {
  /* Font style */
  font-size: 24px;
  font-weight: 700;
 
  /* Font family */
  font-family: 'Roboto Mono', monospace;
}

CSS Variables

Counters support the following CSS variables:

VariableDescriptionDefault
--counter-colorText color and saved-fill reset#FFFFFF
--counter-fill-imageText fill imagenone
--counter-fill-clipFill clipping areaborder-box
--counter-fill-positionFill background position0% 0%
--counter-fill-sizeFill background sizeauto
--counter-fill-repeatFill repeat moderepeat
--counter-text-fill-colorWebKit text fill colorcurrentcolor

With Inline Styles Priority disabled on the key or stat item, regular CSS also takes priority over counter typography. Setting --counter-color automatically removes a fill gradient saved in the properties panel. Fill gradients created in the app are laid over the glyph ink box, and you can take over with --counter-fill-position and --counter-fill-size.

Counter outline support has ended. The --counter-stroke-* variables and the outline settings in the properties panel were removed. Saved outline settings are cleared on load, and custom CSS that sets --counter-stroke-* no longer has any effect. Use text-shadow or -webkit-text-stroke on .counter instead.

Inactive State Style

Counter style when the key is not pressed:

.counter[data-counter-state='inactive'] {
  /* Text color */
  --counter-color: #474244;
}

Active State Style

Counter style when the key is being pressed:

.counter[data-counter-state='active'] {
  /* Text color */
  --counter-color: #ff2b80;
 
  /* Glow effect */
  text-shadow: 0px 0px 3px #ff2b80;
}

Specific Key Counter Styles

Combine class selectors to style counters of specific keys differently.

Example: Blue Key Counter

/* Counter for keys with .blue class - inactive state */
.blue .counter[data-counter-state='inactive'] {
  --counter-color: #1a4a5c;
}
 
/* Counter for keys with .blue class - active state */
.blue .counter[data-counter-state='active'] {
  --counter-color: #2ebef3;
  text-shadow: 0px 0px 3px #2ebef3;
}

Using class combinations allows you to match key and counter colors for a unified design.

Style Examples

Neon Glow Style

.counter {
  font-size: 20px;
  font-weight: 700;
}
 
.counter[data-counter-state='inactive'] {
  --counter-color: #333;
}
 
.counter[data-counter-state='active'] {
  --counter-color: #00ff88;
  text-shadow: 0px 0px 2px #00ff88, 0px 0px 4px #00ff88, 0px 0px 8px #00ff88;
}

Minimal Style

.counter {
  font-size: 14px;
  font-weight: 400;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
 
.counter[data-counter-state='inactive'] {
  --counter-color: #999;
}
 
.counter[data-counter-state='active'] {
  --counter-color: #333;
}

Rainbow Gradient Style

.counter[data-counter-state='active'] {
  background: linear-gradient(
    45deg,
    #ff2b80,
    #ff8c00,
    #ffee00,
    #00ff88,
    #00bfff,
    #8b5cf6
  );
  background-size: 300% 300%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: rainbow 2s ease infinite;
}
 
@keyframes rainbow {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

Matching Key and Counter Colors

Example of keeping key and counter colors consistent:

/* Base key - pink theme */
[data-state='active'] {
  --key-border: 3px solid #ff2b80;
  --key-text-color: #ff2b80;
  text-shadow: 0px 0px 3px #ff2b80;
}
Key StylingGraph Styling