Styling & Theming

The Notations library uses CSS custom properties (variables) for all visual styling, making it easy to customize colors, strokes, and spacing without modifying the source code.

Quick Start

Import the default styles, then override any variables you want:

Via CDN (unpkg)

For quick prototyping or non-bundled projects, use unpkg:

<!-- CSS -->
<link rel="stylesheet" href="https://unpkg.com/notations/dist/NotationView.min.css">

<!-- JavaScript (UMD bundle) -->
<script src="https://unpkg.com/notations/dist/notations.umd.min.js"></script>

<!-- The library is available as window.Notations -->
<script>
  const { load, Carnatic } = Notations;
  // Use the library...
</script>

Via npm/pnpm

// Import the base styles
import 'notations/dist/NotationView.css';

// Or in HTML (from node_modules)
<link rel="stylesheet" href="node_modules/notations/dist/NotationView.css">

Then in your CSS, override the variables:

:root {
  --notation-stroke-color: #2c5282;
  --notation-text-color: #1a365d;
}

Available CSS Variables

Variable	Default (Light)	Default (Dark)	Description
--notation-stroke-color	black	#e5e5e5	Color for lines, bar markers, octave dots
--notation-text-color	#1a1a1a	#f0f0f0	Color for swaras, sahityam, embellishments
--notation-fill-color	transparent	transparent	Fill color for shapes (e.g., jaaru curves)
--notation-border-color	gray	#555	Border color for the notation table
--notation-stroke-width	1	1	Stroke width for general elements
--notation-bar-line-width	1	1	Stroke width for bar lines

Dark Mode Support

The library automatically supports dark mode via the .dark class or data-theme="dark" attribute on the root element:

// Toggle dark mode
document.documentElement.classList.toggle('dark');

// Or use data attribute
document.documentElement.setAttribute('data-theme', 'dark');

System preference is also respected via prefers-color-scheme media query.

Scoped Overrides

You can apply different styles to different notation blocks on the same page using wrapper classes. CSS variables cascade, so inner elements inherit from their closest ancestor that defines the variable.

Example: Two Themes on One Page

Here are two notation blocks with different color schemes, defined using scoped CSS variables:

CSS for Scoped Themes

The CSS to create these scoped themes:

.theme-ocean {
  --notation-stroke-color: #0077b6;
  --notation-text-color: #023e8a;
  --notation-border-color: #90e0ef;
  --notation-bg-color: #e0f7ff;
  background-color: #caf0f8;
  padding: 1rem;
  border-radius: 8px;
}

.theme-forest {
  --notation-stroke-color: #2d6a4f;
  --notation-text-color: #1b4332;
  --notation-border-color: #95d5b2;
  --notation-bg-color: #e8f5e9;
  background-color: #d8f3dc;
  padding: 1rem;
  border-radius: 8px;
}

.theme-sunset {
  --notation-stroke-color: #9d4edd;
  --notation-text-color: #7b2cbf;
  --notation-border-color: #e0aaff;
  --notation-bg-color: #fff8e1;
  background-color: #faf0ca;
  padding: 1rem;
  border-radius: 8px;
}

HTML Usage

<div class="theme-ocean">
  <notation>
\cycle("|4|2|2|")
\beatDuration(4)
Sw: S R G M , P D , N S.
  </notation>
</div>

<div class="theme-forest">
  <notation>
\cycle("|4|2|2|")
\beatDuration(4)
Sw: S R G M , P D , N S.
  </notation>
</div>

Global Overrides

To change styles globally across your entire application:

/* In your app's CSS, after importing notations CSS */
:root {
  /* Custom brand colors */
  --notation-stroke-color: #6366f1;
  --notation-text-color: #312e81;

  /* Thicker bar lines */
  --notation-bar-line-width: 2;
}

/* Dark mode overrides */
:root.dark {
  --notation-stroke-color: #a5b4fc;
  --notation-text-color: #e0e7ff;
}

Per-Component Inline Styles

For one-off customizations, you can also use inline styles:

<div style="--notation-text-color: red;">
  <notation>...</notation>
</div>

Integration with CSS Frameworks

Tailwind CSS

Define your notation theme colors in tailwind.config.js:

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        notation: {
          stroke: 'var(--notation-stroke-color)',
          text: 'var(--notation-text-color)',
        }
      }
    }
  }
}

Then use utility classes to set variables:

<div class="[--notation-stroke-color:theme(colors.indigo.600)]">
  <notation>...</notation>
</div>

CSS-in-JS (Styled Components, Emotion)

const ThemedNotation = styled.div`
  --notation-stroke-color: ${props => props.theme.primary};
  --notation-text-color: ${props => props.theme.text};
`;

// Usage
<ThemedNotation>
  <notation>...</notation>
</ThemedNotation>

Complete Standalone Example

Here's a complete HTML file that uses the library via CDN with no build tools required:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Carnatic Notation Example</title>

  <!-- Notation styles -->
  <link rel="stylesheet" href="https://unpkg.com/notations/dist/NotationView.min.css">

  <!-- Optional: Custom theme overrides -->
  <style>
    :root {
      --notation-stroke-color: #2d6a4f;
      --notation-text-color: #1b4332;
    }
  </style>
</head>
<body>
  <div id="notation-container"></div>

  <!-- Notation library -->
  <script src="https://unpkg.com/notations/dist/notations.umd.min.js"></script>

  <script>
    const notation = `
\\title("Sarali Varisai")
\\cycle("|4|4|")
\\beatDuration(4)

Sw: S R G M , P D N S.
    `;

    // Parse and render
    const container = document.getElementById('notation-container');
    const [parsed, beatLayout, errors] = Notations.load(notation);

    if (errors.length === 0) {
      const view = new Notations.Carnatic.NotationView(container);
      view.renderNotation(parsed, beatLayout);
    } else {
      console.error('Parse errors:', errors);
    }
  </script>
</body>
</html>

See Also

• Integration Guide - Framework integration
• API Reference - Complete API documentation
• Examples - Code examples