# walker65434/hazy architecture

> Architecture diagram of the GitHub repository walker65434/hazy, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-26). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/walker65434/hazy
- Repository: https://github.com/walker65434/hazy

## Overview

Hazy is a Spicetify theme that combines translucent styling with runtime controls for backgrounds, colors, layout, and effects. The main path is applying the theme in Spicetify, loading its runtime script, and updating the Spotify interface from user settings and player state. README capabilities include custom and album-art backgrounds and a lyrics sidebar; the excerpts show runtime setup, preferences, and interface updates, but do not establish every feature’s wiring.

Main entry points: [`hazy.js`](https://github.com/walker65434/hazy/blob/main/hazy.js) (Theme runtime), [`theme.js`](https://github.com/walker65434/hazy/blob/main/theme.js) (Runtime loader), [`user.css`](https://github.com/walker65434/hazy/blob/main/user.css) (Theme styles), [`app.css`](https://github.com/walker65434/hazy/blob/main/app.css) (App styles)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_theme["Theme assets"]
  node_styles["Theme styles<br/>[user.css]"]
  node_appcss["App styles<br/>[app.css]"]
  node_colors["Color palette<br/>[color.ini]"]
end

subgraph group_runtime["Runtime behavior"]
  node_themejs["Runtime loader<br/>[theme.js]"]
  node_hazyjs["Theme runtime<br/>[hazy.js]"]
end

subgraph group_host["Spotify host"]
  node_spicetify["Spicetify host"]
  node_player["Player state"]
  node_preferences["Host preferences"]
  node_storage[("Browser storage")]
  node_interface["Spotify interface"]
end

node_user(("Theme user"))
node_image["Background image"]

node_user -->|"applies theme"| node_spicetify
node_spicetify -->|"loads theme"| node_themejs
node_themejs -->|"loads script"| node_hazyjs
node_spicetify -->|"applies styles"| node_styles
node_spicetify -->|"applies styles"| node_appcss
node_spicetify -->|"reads palette"| node_colors
node_player -->|"emits song changes"| node_hazyjs
node_hazyjs -->|"reads preferences"| node_preferences
node_hazyjs -->|"reads and writes"| node_storage
node_user -->|"sets options"| node_hazyjs
node_user -->|"selects background"| node_image
node_image -->|"provides image"| node_hazyjs
node_hazyjs -->|"updates interface"| node_interface

click node_themejs "https://github.com/walker65434/hazy/blob/main/theme.js"
click node_hazyjs "https://github.com/walker65434/hazy/blob/main/hazy.js"
click node_styles "https://github.com/walker65434/hazy/blob/main/user.css"
click node_appcss "https://github.com/walker65434/hazy/blob/main/app.css"
click node_colors "https://github.com/walker65434/hazy/blob/main/color.ini"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_styles,node_appcss,node_colors,node_user toneBlue
class node_themejs,node_hazyjs toneAmber
class node_spicetify,node_player,node_preferences,node_storage,node_interface toneMint
class node_image toneRose
```

## Components

### Theme assets

- [Theme styles](https://github.com/walker65434/hazy/blob/main/user.css): `user.css`
- [App styles](https://github.com/walker65434/hazy/blob/main/app.css): `app.css`
- [Color palette](https://github.com/walker65434/hazy/blob/main/color.ini): `color.ini`

### Runtime behavior

- [Runtime loader](https://github.com/walker65434/hazy/blob/main/theme.js): `theme.js`
- [Theme runtime](https://github.com/walker65434/hazy/blob/main/hazy.js): `hazy.js`

### Spotify host

- **Spicetify host**
- **Player state**
- **Host preferences**
- **Browser storage**
- **Spotify interface**

### Other components

- **Theme user**
- **Background image**

## Connections

- Theme user → Spicetify host: applies theme
- Spicetify host → Runtime loader: loads theme
- Runtime loader → Theme runtime: loads script
- Spicetify host → Theme styles: applies styles
- Spicetify host → App styles: applies styles
- Spicetify host → Color palette: reads palette
- Player state → Theme runtime: emits song changes
- Theme runtime → Host preferences: reads preferences
- Theme runtime → Browser storage: reads and writes
- Theme user → Theme runtime: sets options
- Theme user → Background image: selects background
- Background image → Theme runtime: provides image
- Theme runtime → Spotify interface: updates interface