Installation

Choose the integration method that fits your needs:

🚀 CDN (Recommended)

Simple, predictable versioned URLs with automatic theme detection:

<!-- Theme detection (MUST be first, inline in head) -->
<script>
  (function() {
    var t = localStorage.getItem('theme') || 
      (matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : '');
    if (t) document.documentElement.dataset.theme = t;
  })();
</script>

<!-- Styles (includes FOUC prevention) -->
<link rel="stylesheet" href="https://components.mesnos.ovh/v0.1.0/mesnos.style.css">

<!-- Components -->
<script type="module" src="https://components.mesnos.ovh/v0.1.0/mesnos.components.js"></script>

The inline theme script prevents flash of wrong theme. Versioned URLs are immutable and cached forever.

📥 NPM (via Gitea)

Install from Gitea package registry:

# Configure npm to use Gitea registry for @mesnos scope
npm config set @mesnos:registry https://git.mesnos.ovh/api/packages/mesnos/npm/

# Install
npm install @mesnos/components

Then import in your code:

import '@mesnos/components';
import '@mesnos/components/styles.css';

📋 Current Version

Check the current version programmatically:

fetch('https://components.mesnos.ovh/version.json')
  .then(r => r.json())
  .then(info => {
    console.log(info.version);  // "0.1.0"
    console.log(info.assets);   // { js, css, ... }
  });

Usage Scenarios

Mix and match based on your needs:

🎨 Styles Only (No Components)

Use just the CSS design system for your own HTML:

<!-- Full stylesheet (tokens, base styles, UI) -->
<link rel="stylesheet" href="https://components.mesnos.ovh/v0.1.0/mesnos.style.css">

<!-- Then use variables in your CSS -->
<style>
  .my-card {
    background: var(--color-bg-surface);
    padding: var(--space-4);
    border-radius: var(--radius-lg);
  }
</style>

🧩 Components Only

Use web components with your own styling:

<!-- FOUC prevention (recommended) -->
<link rel="stylesheet" href="https://components.mesnos.ovh/v0.1.0/components-fouc.css">

<!-- Load components (includes Lit + component styles) -->
<script type="module" src="https://components.mesnos.ovh/v0.1.0/mesnos.components.js"></script>

<!-- Use components -->
<youtube-loop-player video-id="dQw4w9WgXcQ"></youtube-loop-player>

✨ Theme Toggle

Use the exported toggleTheme function:

<script type="module">
  import { toggleTheme, setTheme, getCurrentTheme } from 
    'https://components.mesnos.ovh/v0.1.0/mesnos.components.js';
  
  // Toggle between light/dark
  document.querySelector('.theme-btn').onclick = toggleTheme;
  
  // Or set explicitly
  setTheme('dark');
  
  // Get current theme
  console.log(getCurrentTheme()); // 'dark' | 'light' | ''
</script>

Standalone CSS Files

Individual CSS files for specific use cases:

File Purpose Size
v{version}/components-fouc.css :not(:defined) rules to hide unready components <1KB
v{version}/mesnos.style.css Full stylesheet (tokens + base + UI + players) ~28KB

Theming

Components use CSS custom properties for theming. Override variables to match your brand:

:root {
  /* Override accent color */
  --color-accent: #your-brand-color;
  
  /* Custom backgrounds */
  --color-bg-base: #ffffff;
  --color-bg-surface: #f5f5f5;
  
  /* Audio player specific */
  --audio-player-bg: #your-color;
}

View Full Styling Guide →

Features