purple immich.css

/* =========================================
   ROOT & GLOBAL
   ========================================= */
:root {
    --immich-ui-light: 253 250 251;
}

/* =========================================
   BACKGROUND & LAYOUT
   ========================================= */
html.dark .bg-light {
    background-color: #1c1a20 !important;
}

body.asset-viewer-open {
    background-color: #1c1a20 !important;
}

section#immich-asset-viewer {
    background-color: #151416 !important;
}

.dark .overflow-hidden.bg-black,
[data-viewer-content] .bg-black {
    background-color: #1c1a20 !important;
}

.dark\:bg-immich-dark-bg:where(.dark, .dark *):not(.light) {
    background-color: #1c1a20 !important;
}

/* =========================================
   PRIMARY COLOR OVERRIDES (purple theme)
   ========================================= */
.text-primary {
    color: #d6c6ff !important;
}

.hover\:text-primary:hover,
.hover\:text-primary\/75:hover {
    color: #d6c6ff !important;
}

.bg-primary {
    background-color: #c4aefc !important;
}

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

.bg-immich-primary {
    background-color: #c4aefc !important;
}

.border-primary {
    border-color: #c4aefc !important;
}

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

.outline-primary {
    outline-color: #c4aefc !important;
}

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

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

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

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

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

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

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

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

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

.dark\:bg-primary-200:where(.dark, .dark *):not(.light) {
    background-color: #3a2b54 !important;
}

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

.dark\:bg-gray-700:where(.dark, .dark *):not(.light) {
    background-color: #1c1a20 !important;
}

.dark\:bg-gray-800:where(.dark, .dark *):not(.light) {
    background-color: #2f2843 !important;
}

/* =========================================
   TOAST NOTIFICATIONS
   ========================================= */
.dark .dark\:bg-primary-100 {
    background-color: #1c1a20 !important;
}

.dark .dark\:border-primary-200 {
    border-color: #c4aefc !important;
}

.dark .dark\:bg-info-100 {
    background-color: #1a1625 !important;
}

.dark .dark\:border-info-200 {
    border-color: #a78bfa !important;
}

.dark .dark\:bg-info-100 .text-info {
    color: #dbdbdb !important;
}

.dark .dark\:bg-info-100 .bg-info {
    background-color: #a78bfa !important;
}

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

.dark .dark\:bg-info-100 .text-dark,
.dark .dark\:bg-info-100.text-dark {
    color: #dbdbdb !important;
}

/* =========================================
   SEARCH BAR
   ========================================= */
#main-search-bar:focus {
    border-color: #c4aefc !important;
    outline-color: #c4aefc !important;
}

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

.dark .border-gray-200 {
    border-color: #c4aefc33 !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: #dbdbdb !important;
}

.dark .bg-slate-100 li:hover,
.dark .bg-slate-100 button:hover {
    background-color: #3a2b54 !important;
}

/* =========================================
   FORM INPUTS
   ========================================= */
.immich-form-input:where(.dark, .dark *):not(.light) {
    background-color: #2f2843 !important;
    --tw-ring-color: #c4aefc !important;
}

.focus-within\:ring-primary:focus-within {
    --tw-ring-color: #c4aefc !important;
}

/* =========================================
   NOTIFICATION PANEL
   ========================================= */
.dark .max-h-125.flex.flex-col.gap-2 {
    background-color: #35323d !important;
}

/* =========================================
   DETAIL / INFO PANEL
   ========================================= */
.dark .w-90.overflow-y-auto {
    background-color: #1c1a20 !important;
}

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

#sidebar:hover {
    overflow: overlay;
}

#sidebar div a.rounded-e-full,
div.immich-scrollbar a.rounded-e-full {
    border-start-start-radius: 3.40282e38px;
    border-end-start-radius: 3.40282e38px;
    border-start-end-radius: 3.40282e38px;
    border-end-end-radius: 3.40282e38px;
}

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

@media (hover: hover) {
    .hover\:bg-subtle:hover {
        background-color: #3a3251 !important;
    }
}

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

#people-card {
    border-radius: 50%;
    transition: all 0.1s ease-out;
}

#people-card:hover {
    border-width: 3px;
    border-color: #c4aefc;
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}

#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);
}

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

/* =========================================
   PROFILE PICTURE BORDER
   ========================================= */
.dark\:border-immich-dark-primary:where(.dark, .dark *):not(.light),
.dark\:border-immich-dark-primary\/10:where(.dark, .dark *):not(.light) {
    border-color: #d6c6ff !important;
}

/* =========================================
   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: url('https://cdn.imgchest.com/files/d367e7d0a40e.png');
}

/* =========================================
   ASSET GRID & THUMBNAILS
   ========================================= */
[data-image-grid] {
    border-radius: 15px;
}

[data-asset-id],
.absolute:has([data-thumbnail-focus-container]) {
    border-radius: 8px !important;
    overflow: hidden !important;
}

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

[data-asset-id] img,
[data-thumbnail-focus-container] img {
    transition: transform .2s ease-out;
}

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

/* =========================================
   ALBUM COVERS
   ========================================= */
a > div.brightness-75 {
    transition: all 0.2s ease-in-out;
}

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

a > div.brightness-75 + span {
    backdrop-filter: blur(0px);
    transition: all 0.2s ease-in-out;
}

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 0.2s ease-in-out;
}

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

/* =========================================
   MAP
   ========================================= */
.maplibregl-canvas {
    border-radius: 15px;
}

.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 .2s ease-in-out;
}

.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;
}