Stream your world
with Monochrome.

Monochrome is a high-performance music application built to provide a clean, ad-free experience for music lovers. It functions as a minimalist web UI for [TIDAL](https://tidal.com), leveraging its massive API to deliver millions of tracks in Hi-Res FLAC quality.

The architecture is designed for speed and privacy. It's a Progressive Web App (PWA) that can be installed on your device, offering a native-like experience with offline capabilities and system-level media control integration.

Monochrome isn't just a player; it's a complete music ecosystem. Here are the core features that make it stand out:

The easiest way to get started is by using the official hosted instance. This version is always up-to-date and supports account syncing via Discord, Google, and GitHub.

For those who want full control or want to host Monochrome on their own network/proxy, self-hosting is a great option. Monochrome can be deployed via Docker or manually using Bun/Node.js.

# Required tools
- Docker & Docker Compose (Recommended)
- Bun (Preferred for manual install)
- Node.js v20+

Docker is the recommended way to self-host Monochrome. It's fast, isolated, and easy to manage.

# 1. Clone the repo
git clone https://github.com/monochrome-music/monochrome.git
cd monochrome/docker

# 2. Spin up the container
docker compose up -d

# 3. Access the app
Visit http://localhost:3000

To allow external access (e.g. via Tailscale or a reverse proxy), you may need to update the `vite.config.ts` to allow specific hosts.

Integrating Monochrome into your own website is straightforward. Depending on your needs, you can either embed it directly using an <iframe> or provide a high-visibility action link.

Method 1: Iframe Embedding

Use this method if you want to keep users on your domain. Note that the official `monochrome.tf` instance may have restricted framing; this method works best with your own self-hosted instance.

<!-- Embed Monochrome directly into your page -->
<iframe 
  src="https://your-instance.com" 
  style="width:100%; height:700px; border:none; border-radius:18px; box-shadow: 0 10px 30px rgba(0,0,0,0.1);"
  allow="autoplay; clipboard-write; encrypted-media; picture-in-picture"
  allowfullscreen
></iframe>

Method 2: Styled Action Link

This is the most reliable method for UBG sites, as it avoids "X-Frame-Options" issues and allows for full-screen PWA functionality.

<!-- A premium button to launch the music hub -->
<a href="https://monochrome.tf" target="_blank" class="music-launcher">
  <i class="fa-solid fa-circle-play"></i>
  Launch Music Hub
</a>

<!-- CSS for the button -->
<style>
  .music-launcher {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 14px 28px;
    background: #d4a24e;
    color: #fff;
    text-decoration: none;
    border-radius: 50px;
    font-weight: 600;
    transition: transform 0.2s;
  }
  .music-launcher:hover { transform: translateY(-2px); }
</style>

Navigate Monochrome like a pro with these built-in keyboard shortcuts. Efficiency is key to a great listening experience.

Now that you have a high-fidelity music hub, why not integrate it further with your other NetDocs tools? You can add AI-powered music recommendations or link your game sessions to your playlists.