Custom CSS Guide

DM Note allows you to freely customize key and counter styles through custom CSS. You can implement various styles like neon signs, minimal designs, game themes, and more.

Basic Concepts

CSS Variable System

DM Note uses CSS Variables (Custom Properties) to control styles. This allows you to easily change core styles of keys and counters without complex selectors.

/* Key style variables */
[data-state="active"] {
  --key-radius: 8px; /* Corner roundness */
  --key-bg: #ff2b80; /* Background color */
  --key-border: 2px solid #fff; /* Border */
  --key-text-color: #fff; /* Text color */
}

State-based Styling

Keys and counters have two states:

For counters:

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

Applying CSS Files

1. Create a CSS file with your desired styles.
2. Go to the Settings tab.
3. Click Select CSS File in the Custom CSS section.
4. Select your CSS file.

Quick Start Example

Here’s a simple neon sign style example:

/* Global key styles */
[data-state="inactive"],
[data-state="active"] {
  --key-radius: 6px;
  font-size: 24px;
  font-weight: 700;
}
 
/* Inactive state */
[data-state="inactive"] {
  --key-bg: transparent;
  --key-border: 3px solid #474244;
  --key-text-color: #474244;
}
 
/* Active state - neon effect */
[data-state="active"] {
  --key-bg: transparent;
  --key-border: 3px solid #ff2b80;
  --key-text-color: #ff2b80;
  text-shadow: 0px 0px 3px #ff2b80;
  box-shadow:
    0px 0px 4px #b3245d,
    0px 0px 4px #b3245d;
}

Next Steps