docs/custom.css at main · Comfy-Org/docs · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
/*
 * ComfyUI docs — custom theme overrides (custom.css)
 *
 * Color tokens
 * ────────────
 * --ink-900:         #151417  dark-mode nav shell (replaces Mintlify charcoal #211927)
 * --hub-shell-light: #f7f6f9  light-mode nav shell (replaces sidebar #ffffff vs body mismatch)
 * --accent-purple:   #49378b  Comfy brand purple — active nav text, headings, CTA outline
 * --cta-text-dark:   #1a1a1a  dark-mode label on yellow primary button
 *
 * Light-mode sidebar default text stays Mintlify gray #404042 (rgb 64,64,66).
 * Only the current page link gets #49378b + Mintlify lavender pill rgba(73,55,139,0.1).
 */

:root {
  --ink-900: #151417;
  --hub-shell-light: #f7f6f9;
  --accent-purple: #49378b;
}

/* ── Dark mode ─────────────────────────────────────────────────────────────── */

/* Primary CTA: keep dark text (#1a1a1a) on yellow button */
html.dark .bg-primary-dark span {
  color: #1a1a1a !important;
}

/* Nav shell: topbar + sidebar → #151417 (was #211927) */
html.dark #navbar,
html.dark #sidebar,
html.dark #sidebar-content,
html.dark navbar-link,
html.dark navbar {
  background-color: var(--ink-900) !important;
}

html.dark .almond-layout,
html.dark .almond-layout > div,
html.dark body {
  background-color: var(--ink-900) !important;
}

html.dark #almond-background-color {
  background-color: var(--ink-900) !important;
}

/* ── Light mode — nav shell ─────────────────────────────────────────────────── */

/* Unify topbar + sidebar with page shell → #f7f6f9 (was #ffffff on sidebar) */
html:not(.dark) #navbar,
html:not(.dark) #sidebar,
html:not(.dark) #sidebar-content,
html:not(.dark) navbar-link,
html:not(.dark) navbar {
  background-color: var(--hub-shell-light) !important;
}

html:not(.dark) .almond-layout,
html:not(.dark) .almond-layout > div,
html:not(.dark) body {
  background-color: var(--hub-shell-light) !important;
}

html:not(.dark) #almond-background-color {
  background-color: var(--hub-shell-light) !important;
}

/* ── Light mode — active nav (top tabs + dropdown) ─────────────────────────── */

/*
 * Active tab / dropdown item: #49378b text, no full-width fill.
 * Does NOT target sidebar groups — expanded sections keep default #404042 text.
 */
html:not(.dark) .nav-tabs-item[data-active],
html:not(.dark) mobile-nav-tabs-item[data-active],
html:not(.dark) nav-dropdown-item[data-active] {
  background-color: transparent !important;
  box-shadow: none !important;
  color: #49378b !important;
  font-weight: 600 !important;
}

html:not(.dark) .nav-tabs-item[data-active] *,
html:not(.dark) mobile-nav-tabs-item[data-active] *,
html:not(.dark) nav-dropdown-item[data-active] * {
  color: inherit !important;
}

/* ── Light mode — sidebar current page only ─────────────────────────────────── */

/*
 * Mintlify marks expanded groups with [data-active], which previously forced
 * #49378b on every child. Target only the current page link (aria-current="page"):
 *   • active link  → #49378b + Mintlify pill rgba(73,55,139,0.1)
 *   • siblings     → default #404042 (theme, unchanged)
 */
html:not(.dark) #sidebar-content li:has(> a[aria-current="page"]) {
  background-color: transparent !important;
  box-shadow: none !important;
}

html:not(.dark) #sidebar-content a[aria-current="page"] {
  color: #49378b !important;
  font-weight: 600 !important;
}

html:not(.dark) #sidebar-content a[aria-current="page"] * {
  color: inherit !important;
}

/* ── Light mode — right TOC ─────────────────────────────────────────────────── */

/* Current heading in page TOC: #49378b, no block fill */
html:not(.dark) toc-item[data-active],
html:not(.dark) toc-item[data-active-deepest],
html:not(.dark) toc-item[data-active] a,
html:not(.dark) toc-item[data-active-deepest] a {
  background-color: transparent !important;
  color: #49378b !important;
  font-weight: 600 !important;
}

/* ── Light mode — content headings ─────────────────────────────────────────── */

/* All article headings h1–h6 → #49378b */
html:not(.dark) #header :where(h1, h2, h3, h4, h5, h6),
html:not(.dark) #content-area :where(h1, h2, h3, h4, h5, h6) {
  color: #49378b !important;
}

/* ── Light mode — Comfy Cloud CTA ───────────────────────────────────────────── */

/* Navbar Cloud button: #49378b text + #49378b border, transparent fill (no neon yellow) */
html:not(.dark) #navbar a[href*="comfy.org/cloud"] {
  background-color: transparent !important;
  color: #49378b !important;
  border: 1px solid #49378b !important;
  box-shadow: none !important;
}

html:not(.dark) #navbar a[href*="comfy.org/cloud"] * {
  color: inherit !important;
}