Immich Themes

/* Enables smooth hue animation for the rainbow theme */
@property --rainbow-hue {
    syntax: '<number>';
    inherits: true;
    initial-value: 0;
}

@keyframes hue-spin {
    to { --rainbow-hue: 360; }
}

/* ================================================================
   IMMICH THEME
   ================================================================
   TO SWITCH THEMES: move the name you want to the END of this line.
   The rightmost name always wins.

   @layer purple, red, teal, green, blue, pink, orange, indigo, rainbow;   ← rainbow is active
   @layer rainbow, indigo, orange, pink, blue, green, teal, red, purple;   ← purple is active
   ================================================================ */
@layer red, teal, green, blue, pink, orange, indigo, rainbow, purple;


/* ================================================================
   PALETTES
   ================================================================ */

@layer purple {
    :root {
        --theme-bg-deep:      #1c1a20;
        --theme-bg-base:      #1c1a20;
        --theme-bg-raised:    #2f2843;
        --theme-bg-float:     #3a2b54;
        --theme-bg-muted:     #35323d;
        --theme-accent:       #c4aefc;
        --theme-accent-light: #d6c6ff;
        --theme-accent-mid:   #a18ce0;
        --theme-hover-bg:     #3a3251;
        --theme-gray-mid:     #524170;
        --theme-text:         #dbdbdb;
        --theme-info-bg:      #1a1625;
        --theme-dark-gray:   #322d45;
        --theme-gray-800:     #2d2844;
        --theme-gray-900:     #221e36;
        animation:            none;
    }
}

@layer red {
    :root {
        --theme-bg-deep:      #161414;
        --theme-bg-base:      #201818;
        --theme-bg-raised:    #342020;
        --theme-bg-float:     #4a2222;
        --theme-bg-muted:     #302020;
        --theme-accent:       #fc9999;
        --theme-accent-light: #ffbfbf;
        --theme-accent-mid:   #e06060;
        --theme-hover-bg:     #3d2020;
        --theme-gray-mid:     #6b3535;
        --theme-text:         #dbdbdb;
        --theme-info-bg:      #1a1212;
        --theme-dark-gray:   #342323;
        --theme-gray-800:     #2e1c1c;
        --theme-gray-900:     #221414;
        animation:            none;
    }
}

@layer teal {
    :root {
        --theme-bg-deep:      #091a18;
        --theme-bg-base:      #0e2220;
        --theme-bg-raised:    #123530;
        --theme-bg-float:     #154540;
        --theme-bg-muted:     #102e2a;
        --theme-accent:       #2dd4bf;
        --theme-accent-light: #99f6e4;
        --theme-accent-mid:   #0d9488;
        --theme-hover-bg:     #134038;
        --theme-gray-mid:     #1a5a52;
        --theme-text:         #dbdbdb;
        --theme-info-bg:      #071412;
        --theme-dark-gray:   #163732;
        --theme-gray-800:     #112e2c;
        --theme-gray-900:     #0c2220;
        animation:            none;
    }
}


@layer green {
    :root {
        --theme-bg-deep:      #131a14;
        --theme-bg-base:      #171e18;
        --theme-bg-raised:    #1f3022;
        --theme-bg-float:     #243d27;
        --theme-bg-muted:     #1c2d1e;
        --theme-accent:       #86efac;
        --theme-accent-light: #bbf7d0;
        --theme-accent-mid:   #5bbe80;
        --theme-hover-bg:     #203526;
        --theme-gray-mid:     #2d5235;
        --theme-text:         #dbdbdb;
        --theme-info-bg:      #111a13;
        --theme-dark-gray:   #243326;
        --theme-gray-800:     #192c1e;
        --theme-gray-900:     #132216;
        animation:            none;
    }
}

@layer blue {
    :root {
        --theme-bg-deep:      #131520;
        --theme-bg-base:      #171a28;
        --theme-bg-raised:    #1e2440;
        --theme-bg-float:     #1e2d54;
        --theme-bg-muted:     #1a2035;
        --theme-accent:       #93c5fd;
        --theme-accent-light: #bfdbfe;
        --theme-accent-mid:   #60a5fa;
        --theme-hover-bg:     #1e2a4a;
        --theme-gray-mid:     #2d4070;
        --theme-text:         #dbdbdb;
        --theme-info-bg:      #111525;
        --theme-dark-gray:   #20243d;
        --theme-gray-800:     #19203e;
        --theme-gray-900:     #131830;
        animation:            none;
    }
}

@layer pink {
    :root {
        --theme-bg-deep:      #1a1318;
        --theme-bg-base:      #201520;
        --theme-bg-raised:    #341830;
        --theme-bg-float:     #4a1845;
        --theme-bg-muted:     #2e1830;
        --theme-accent:       #f9a8d4;
        --theme-accent-light: #fbcfe8;
        --theme-accent-mid:   #f472b6;
        --theme-hover-bg:     #3d1840;
        --theme-gray-mid:     #6b2060;
        --theme-text:         #dbdbdb;
        --theme-info-bg:      #1a1018;
        --theme-dark-gray:   #3a2038;
        --theme-gray-800:     #2e1530;
        --theme-gray-900:     #220f24;
        animation:            none;
    }
}

@layer orange {
    :root {
        --theme-bg-deep:      #1c1108;
        --theme-bg-base:      #201408;
        --theme-bg-raised:    #332010;
        --theme-bg-float:     #4a2e10;
        --theme-bg-muted:     #2a1c0c;
        --theme-accent:       #fb923c;
        --theme-accent-light: #fdba74;
        --theme-accent-mid:   #ea580c;
        --theme-hover-bg:     #3d2810;
        --theme-gray-mid:     #6b4020;
        --theme-text:         #dbdbdb;
        --theme-info-bg:      #180e06;
        --theme-dark-gray:   #352412;
        --theme-gray-800:     #2e1e0c;
        --theme-gray-900:     #221608;
        animation:            none;
    }
}

@layer indigo {
    :root {
        --theme-bg-deep:      #10101e;
        --theme-bg-base:      #14142a;
        --theme-bg-raised:    #1c1c40;
        --theme-bg-float:     #242460;
        --theme-bg-muted:     #181838;
        --theme-accent:       #a5b4fc;
        --theme-accent-light: #c7d2fe;
        --theme-accent-mid:   #6366f1;
        --theme-hover-bg:     #1e1e55;
        --theme-gray-mid:     #303080;
        --theme-text:         #dbdbdb;
        --theme-info-bg:      #0c0c1a;
        --theme-dark-gray:   #212142;
        --theme-gray-800:     #191940;
        --theme-gray-900:     #131330;
        animation:            none;
    }
}

@layer rainbow {
    :root {
        --theme-bg-deep:      #141414;
        --theme-bg-base:      #1a1a1a;
        --theme-bg-raised:    #252525;
        --theme-bg-float:     #303030;
        --theme-bg-muted:     #202020;
        --theme-accent:       hsl(var(--rainbow-hue), 100%, 78%);
        --theme-accent-light: hsl(calc(var(--rainbow-hue) + 30), 100%, 88%);
        --theme-accent-mid:   hsl(calc(var(--rainbow-hue) - 20), 100%, 62%);
        --theme-hover-bg:     #2a2a2a;
        --theme-gray-mid:     #444444;
        --theme-text:         #e8e8e8;
        --theme-info-bg:      #111111;
        --theme-dark-gray:   #1e1e1e;
        --theme-gray-800:     #222222;
        --theme-gray-900:     #191919;
        animation:            hue-spin 6s linear infinite;
    }
}


/* ================================================================
   SHARED VARIABLES (not theme-specific)
   ================================================================ */
:root {
    --immich-ui-light:    253 250 251;
    --theme-border:       color-mix(in oklab, var(--theme-accent) 20%, transparent);
    --theme-transition:   0.2s ease-in-out;
    --theme-radius-card:  8px;
    --theme-radius-map:   15px;
    --theme-radius-pill:  9999px;

    /* ↓ Change this URL to swap the logo */
    --theme-logo: url('https://cdn.imgchest.com/files/62c90e10305b.png');
}


/* ================================================================
   STYLES
   ================================================================ */

/* =========================================
   BACKGROUND & LAYOUT
   ========================================= */
.dark\:bg-immich-dark-gray:where(.dark, .dark *):not(.light),
.dark\:bg-immich-dark-gray\/50:where(.dark, .dark *):not(.light) {
    background-color: var(--theme-dark-gray) !important;
}

.dark\:hover\:bg-gray-800:where(.dark, .dark *):not(.light):hover {
    background-color: var(--theme-gray-800) !important;
}

.dark\:hover\:bg-gray-900:where(.dark, .dark *):not(.light):hover {
    background-color: var(--theme-gray-900) !important;
}

.dark\:hover\:border-gray-800:where(.dark, .dark *):not(.light):hover {
    border-color: var(--theme-gray-800) !important;
}

.peer-checked\:dark\:bg-gray-700:is(:where(.peer):checked ~ *):where(.dark, .dark *):not(.light) {
    background-color: var(--theme-accent-mid) !important;
}

.dark\:hover\:border-immich-dark-primary\/75:where(.dark, .dark *):not(.light):hover {
    border-color: color-mix(in oklab, var(--theme-accent) 75%, transparent) !important;
}

.odd\:dark\:bg-immich-dark-gray\/75:nth-child(2n+1):where(.dark, .dark *):not(.light) {
    background-color: color-mix(in oklab, var(--theme-dark-gray) 75%, transparent) !important;
}

.even\:dark\:bg-immich-dark-gray\/50:nth-child(2n):where(.dark, .dark *):not(.light) {
    background-color: color-mix(in oklab, var(--theme-dark-gray) 50%, transparent) !important;
}

.hover\:dark\:bg-immich-dark-primary\/50:hover:where(.dark, .dark *):not(.light) {
    background-color: color-mix(in oklab, var(--theme-hover) 50%, transparent) !important;
}

html.dark .bg-light {
    background-color: var(--theme-bg-base) !important;
}

body.asset-viewer-open {
    background-color: var(--theme-bg-base) !important;
}

section#immich-asset-viewer {
    background-color: var(--theme-bg-deep) !important;
}

.dark .overflow-hidden.bg-black,
[data-viewer-content] .bg-black {
    background-color: var(--theme-bg-base) !important;
}

.dark\:bg-immich-dark-bg:where(.dark, .dark *):not(.light) {
    background-color: var(--theme-bg-base) !important;
}

.bg-subtle,
.bg-subtle\/90 {
    background-color: var(--theme-bg-muted) !important;
}

.bg-dark-900 {
    background-color: var(--theme-gray-900) !important;
}

.odd\:bg-dark-900:nth-child(2n+1) {
    background-color: var(--theme-gray-900) !important;
}

.even\:bg-dark-950:nth-child(2n) {
    background-color: var(--theme-bg-deep) !important;
}

/* =========================================
   PRIMARY COLOR OVERRIDES
   ========================================= */
.text-primary {
    color: var(--theme-accent-light) !important;
}

.hover\:text-primary:hover,
.hover\:text-primary\/75:hover {
    color: var(--theme-accent-light) !important;
}

.bg-primary {
    background-color: var(--theme-accent) !important;
}

.bg-primary\/10 {
    background-color: color-mix(in oklab, var(--theme-accent) 10%, transparent) !important;
}

.bg-immich-primary {
    background-color: var(--theme-accent) !important;
}

.border-primary {
    border-color: var(--theme-accent) !important;
}

.border-primary\/60 {
    border-color: color-mix(in oklab, var(--theme-accent) 60%, transparent) !important;
}

.outline-primary {
    outline-color: var(--theme-accent) !important;
}

.not-disabled\:hover\:bg-primary\/20:not(:disabled):hover {
    background-color: color-mix(in oklab, var(--theme-accent) 20%, transparent) !important;
}

/* =========================================
   DARK MODE PRIMARY OVERRIDES
   ========================================= */
.dark\:text-immich-dark-primary:where(.dark, .dark *):not(.light) {
    color: var(--theme-accent) !important;
}

.dark\:hover\:text-immich-dark-primary:where(.dark, .dark *):not(.light):hover {
    color: var(--theme-accent-light) !important;
}

.dark\:bg-immich-dark-primary\/90:where(.dark, .dark *):not(.light) {
    background-color: var(--theme-accent) !important;
}

.dark\:bg-immich-dark-primary\/10:where(.dark, .dark *):not(.light) {
    background-color: color-mix(in oklab, var(--theme-accent-light) 10%, transparent) !important;
}

.dark\:hover\:bg-immich-dark-primary\/50:where(.dark, .dark *):not(.light):hover {
    background-color: color-mix(in oklab, var(--theme-accent-light) 50%, transparent) !important;
}

.dark\:hover\:bg-immich-dark-primary:where(.dark, .dark *):not(.light):hover,
.dark\:hover\:bg-immich-dark-primary\/5:where(.dark, .dark *):not(.light):hover {
    background-color: var(--theme-accent) !important;
}

.dark\:border-immich-dark-primary:where(.dark, .dark *):not(.light),
.dark\:border-immich-dark-primary\/10:where(.dark, .dark *):not(.light) {
    border-color: var(--theme-accent-light) !important;
}

.dark\:hover\:border-immich-primary:where(.dark, .dark *):not(.light):hover {
    border-color: var(--theme-accent) !important;
}

.dark\:focus\:border-immich-dark-primary:where(.dark, .dark *):not(.light):focus {
    border-color: var(--theme-accent) !important;
}

.dark\:bg-primary-200:where(.dark, .dark *):not(.light) {
    background-color: var(--theme-bg-float) !important;
}

.dark\:bg-gray-500:where(.dark, .dark *):not(.light) {
    background-color: var(--theme-gray-mid) !important;
}

.dark\:bg-gray-700:where(.dark, .dark *):not(.light) {
    background-color: var(--theme-bg-base) !important;
}

.dark\:bg-gray-700\/80:where(.dark, .dark *):not(.light) {
    background-color: color-mix(in oklab, var(--theme-bg-base) 80%, transparent) !important;
}

.dark\:bg-gray-800:where(.dark, .dark *):not(.light) {
    background-color: var(--theme-bg-raised) !important;
}

/* =========================================
   TOAST NOTIFICATIONS
   ========================================= */
.dark .dark\:bg-primary-100 {
    background-color: var(--theme-bg-base) !important;
}

.dark .dark\:border-primary-200 {
    border-color: var(--theme-accent) !important;
}

.dark .dark\:bg-info-100 {
    background-color: var(--theme-info-bg) !important;
}

.dark .dark\:border-info-200 {
    border-color: var(--theme-accent-mid) !important;
}

.dark .dark\:bg-info-100 .text-info {
    color: var(--theme-text) !important;
}

.dark .dark\:bg-info-100 .bg-info {
    background-color: var(--theme-accent-mid) !important;
}

.dark .dark\:bg-info-100 .dark\:text-info-50:where(.dark, .dark *):not(.light) {
    color: var(--theme-info-bg) !important;
}

.dark .dark\:bg-info-100 .text-dark,
.dark .dark\:bg-info-100.text-dark {
    color: var(--theme-text) !important;
}

/* =========================================
   SEARCH BAR
   ========================================= */
#main-search-bar:focus {
    border-color: var(--theme-accent) !important;
    outline-color: var(--theme-accent) !important;
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--theme-accent) 25%, transparent) !important;
}

/* =========================================
   CONTEXT MENU (three dot menu)
   ========================================= */
.dark .bg-slate-100 {
    background-color: var(--theme-bg-base) !important;
}

.dark .border-gray-200 {
    border-color: var(--theme-border) !important;
}

.dark .bg-slate-100 .text-immich-fg,
.dark .bg-slate-100 .text-immich-fg\/25,
.dark .bg-slate-100 .dark\:text-immich-dark-bg:where(.dark, .dark *):not(.light) {
    color: var(--theme-text) !important;
}

.dark .bg-slate-100 li:hover,
.dark .bg-slate-100 button:hover {
    background-color: var(--theme-bg-float) !important;
}

/* =========================================
   FORM INPUTS
   ========================================= */
.immich-form-input:where(.dark, .dark *):not(.light) {
    background-color: var(--theme-bg-raised) !important;
    --tw-ring-color: var(--theme-accent) !important;
}

.focus-within\:ring-primary:focus-within {
    --tw-ring-color: var(--theme-accent) !important;
}

/* =========================================
   NOTIFICATION PANEL
   ========================================= */
.dark .max-h-125.flex.flex-col.gap-2 {
    background-color: var(--theme-bg-muted) !important;
}

/* =========================================
   DETAIL / INFO PANEL
   ========================================= */
.dark .w-90.overflow-y-auto {
    background-color: var(--theme-bg-base) !important;
}

/* =========================================
   SIDEBAR
   ========================================= */
#sidebar {
    overflow: hidden;
    padding-left: 10px;
}

#sidebar:hover {
    overflow-y: auto;
}

#sidebar::-webkit-scrollbar {
    width: 4px;
}

#sidebar::-webkit-scrollbar-track {
    background: transparent;
}

#sidebar::-webkit-scrollbar-thumb {
    background: color-mix(in oklab, var(--theme-accent) 35%, transparent);
    border-radius: var(--theme-radius-pill);
}

#sidebar::-webkit-scrollbar-thumb:hover {
    background: color-mix(in oklab, var(--theme-accent) 60%, transparent);
}

.dark * {
    scrollbar-color: var(--theme-accent) transparent;
    scrollbar-width: thin;
}

#sidebar div a.rounded-e-full,
div.immich-scrollbar a.rounded-e-full {
    border-radius: var(--theme-radius-pill);
}

#sidebar .storage-status.ms-4 {
    margin-inline-start: 0;
}

@media (hover: hover) {
    .hover\:bg-subtle:hover {
        background-color: var(--theme-hover-bg) !important;
    }
}

/* =========================================
   PEOPLE CARDS
   ========================================= */
#people-card + input[type="text"]:not(:placeholder-shown) {
    background-color: transparent;
}

#people-card {
    border-radius: 50%;
    transition: all var(--theme-transition);
}

#people-card:hover {
    border-width: 3px;
    border-color: var(--theme-accent);
    box-shadow: 0 0 12px color-mix(in oklab, var(--theme-accent) 40%, transparent);
}

#people-card > div.top-2,
#people-card > div.end-2 {
    top: 0;
    right: 0;
}

#people-card [data-button-root] {
    color: rgb(200, 200, 200);
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(3px);
    border: 1px solid rgba(220, 220, 220, 0.2);
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.15);
    transition: all var(--theme-transition);
}

#people-card [data-button-root]:hover {
    color: white;
    backdrop-filter: blur(4px);
}

/* =========================================
   GENERAL HOVER OVERRIDES
   ========================================= */
@media (hover: hover) {
    .hover\:bg-gray-200:hover {
        background-color: transparent;
    }

    .hover\:border-immich-primary:hover,
    .hover\:border-immich-primary\/50:hover {
        border-color: transparent;
    }
}

.hover\:shadow-sm:hover {
    --tw-shadow: none;
    box-shadow: none;
}

/* =========================================
   LOGO REPLACEMENT
   ========================================= */
a[href="/photos"] img[alt="Immich logo"] {
    content: var(--theme-logo);
}

/* =========================================
   ASSET GRID & THUMBNAILS
   ========================================= */
[data-image-grid] {
    border-radius: var(--theme-radius-map);
}

[data-asset-id],
.absolute:has([data-thumbnail-focus-container]) {
    border-radius: var(--theme-radius-card) !important;
    overflow: hidden !important;
    transition: box-shadow var(--theme-transition);
}

.absolute:has([data-thumbnail-focus-container]) .overflow-y-auto:hover {
    overflow: auto !important;
}

[data-asset-id] img,
[data-thumbnail-focus-container] img {
    transition: transform var(--theme-transition);
}

[data-asset-id]:hover img,
[data-thumbnail-focus-container]:hover img {
    transform: scale(1.05);
}

[data-asset-id]:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

/* =========================================
   ALBUM COVERS
   ========================================= */
a > div.brightness-75 {
    transition: all var(--theme-transition);
}

a > div.brightness-75:hover {
    transform: scale(1.05);
    --tw-brightness: brightness(100%);
}

a > div.brightness-75 + span {
    backdrop-filter: blur(0px);
    transition: all var(--theme-transition);
}

a > div.brightness-75:hover + span {
    backdrop-filter: blur(4px);
    background: rgba(0, 0, 0, 0.2);
    border-radius: 10px;
}

a.text-center.relative > img.object-cover.rounded-full.shadow-lg.aspect-square {
    transition: all var(--theme-transition);
}

a.text-center.relative > img.object-cover.rounded-full.shadow-lg.aspect-square:hover {
    transform: scale(1.05);
}

/* =========================================
   MAP
   ========================================= */
.maplibregl-canvas {
    border-radius: var(--theme-radius-map);
}

.maplibregl-marker > div,
.maplibregl-marker > img {
    backdrop-filter: blur(3px);
    background-color: rgba(255, 255, 255, .4);
    color: white;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8);
    transition: all var(--theme-transition);
}

.maplibregl-marker > img {
    border-color: rgba(255, 255, 255, .1);
}

.maplibregl-marker > div:hover {
    background-color: rgba(255, 255, 255, .5);
}

.maplibregl-ctrl-bottom-right,
.maplibregl-ctrl-bottom-left {
    display: none;
}

.maplibregl-ctrl-group {
    background-color: rgba(255, 255, 255, .4) !important;
    backdrop-filter: blur(5px);
}

.maplibregl-ctrl-group button + button {
    border-top: none !important;
}