-
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathdocs.html
More file actions
157 lines (145 loc) · 12.5 KB
/
Copy pathdocs.html
File metadata and controls
157 lines (145 loc) · 12.5 KB
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
144
145
146
147
148
149
150
151
152
153
154
155
156
157
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Docs — Moonlight</title>
<meta name="description" content="How to install Moonlight, the full color reference table, and how to build a new port using the official template.">
<link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22><circle cx=%2212%22 cy=%2212%22 r=%2211%22 fill=%22%23191f28%22/><path d=%22M12 4a8 8 0 1 0 8 8 6.2 6.2 0 0 1-8-8z%22 fill=%22%23ecbd7c%22/></svg>">
<link rel="stylesheet" href="assets/style.css">
</head>
<body>
<header class="site-header">
<nav class="nav">
<a href="index.html" class="brand">
<svg class="brand-mark" viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="11" fill="#1f2730"/><path d="M12 4a8 8 0 1 0 8 8 6.2 6.2 0 0 1-8-8z" fill="#ecbd7c"/></svg>
Moonlight
</a>
<button class="nav-toggle" aria-label="Toggle navigation" aria-expanded="false">☰</button>
<ul class="nav-links">
<li><a href="index.html">Home</a></li>
<li><a href="ports.html">Ports</a></li>
<li><a href="docs.html" class="active">Docs</a></li>
<li><a href="about.html">About & Contact</a></li>
<li><a href="https://github.com/Moonlight-theme" target="_blank" rel="noopener">GitHub ↗</a></li>
</ul>
</nav>
</header>
<main>
<section style="padding-bottom:36px;">
<div class="wrap">
<p class="eyebrow">Documentation</p>
<h1 style="font-size:clamp(2rem,4vw,3rem); text-align:left;">Everything you need to use Moonlight</h1>
<p class="lede">Install an existing port, reference the exact colors, or build a port of your own.</p>
</div>
</section>
<section style="padding-top:0;">
<div class="wrap docs-layout">
<nav class="docs-nav" aria-label="Docs sections">
<p class="eyebrow">On this page</p>
<ul>
<li><a href="#getting-started">Getting started</a></li>
<li><a href="#colors">Color reference</a></li>
<li><a href="#families">Color families</a></li>
<li><a href="#usage">Usage guidelines</a></li>
<li><a href="#build-a-port">Build a port</a></li>
<li><a href="#faq">FAQ</a></li>
</ul>
</nav>
<div>
<article id="getting-started" class="docs-section">
<h2>Getting started</h2>
<p>Every port lives in its own repository under the <a href="https://github.com/Moonlight-theme" target="_blank" rel="noopener">Moonlight-theme organization</a>. There's no single installer — each app has its own theming system, so each port ships exactly what that app needs: a CSS file, a settings import, a plugin, and so on.</p>
<p>The short version:</p>
<pre>1. Open the port's repo on GitHub (see the <a href="ports.html" style="color:var(--accent);">Ports</a> page)
2. Follow that repo's README — it has the exact install steps for that app
3. Restart or reload the app
4. You're camping under Moonlight 🏕</pre>
<div class="callout">Stuck on a specific port? Open an issue on that port's repo, or drop a message in the <a href="https://discord.gg/E6kbQnfHNy" target="_blank" rel="noopener" style="color:var(--accent);">Discord</a>.</div>
</article>
<article id="colors" class="docs-section">
<h2>Color reference</h2>
<p>The complete fifteen-color Moonlight palette. Click any hex value to copy it.</p>
<table>
<thead>
<tr><th>#</th><th>Name</th><th>Root</th><th>Hex</th><th>RGB</th><th>Family</th></tr>
</thead>
<tbody>
<tr><td>01</td><td>light-I</td><td class="mono">moonlight-l-i</td><td><div class="hex-cell" data-hex="#c0cedd"><span class="hex-chip" style="background:#c0cedd"></span>#c0cedd</div></td><td class="mono">192, 206, 221</td><td>White moon</td></tr>
<tr><td>02</td><td>light-II</td><td class="mono">moonlight-l-ii</td><td><div class="hex-cell" data-hex="#99a0a8"><span class="hex-chip" style="background:#99a0a8"></span>#99a0a8</div></td><td class="mono">153, 160, 168</td><td>White moon</td></tr>
<tr><td>03</td><td>light-III</td><td class="mono">moonlight-l-iii</td><td><div class="hex-cell" data-hex="#c6c3c0"><span class="hex-chip" style="background:#c6c3c0"></span>#c6c3c0</div></td><td class="mono">198, 195, 192</td><td>White moon</td></tr>
<tr><td>04</td><td>dark-I</td><td class="mono">moonlight-d-i</td><td><div class="hex-cell" data-hex="#191f28"><span class="hex-chip" style="background:#191f28"></span>#191f28</div></td><td class="mono">25, 31, 40</td><td>Night sky</td></tr>
<tr><td>05</td><td>dark-II</td><td class="mono">moonlight-d-ii</td><td><div class="hex-cell" data-hex="#1f2730"><span class="hex-chip" style="background:#1f2730"></span>#1f2730</div></td><td class="mono">31, 39, 48</td><td>Night sky</td></tr>
<tr><td>06</td><td>dark-III</td><td class="mono">moonlight-d-iii</td><td><div class="hex-cell" data-hex="#374656"><span class="hex-chip" style="background:#374656"></span>#374656</div></td><td class="mono">55, 70, 86</td><td>Night sky</td></tr>
<tr><td>07</td><td>accent-I</td><td class="mono">moonlight-a-i</td><td><div class="hex-cell" data-hex="#ecbd7c"><span class="hex-chip" style="background:#ecbd7c"></span>#ecbd7c</div></td><td class="mono">236, 189, 124</td><td>Light</td></tr>
<tr><td>08</td><td>accent-II</td><td class="mono">moonlight-a-ii</td><td><div class="hex-cell" data-hex="#c69f68"><span class="hex-chip" style="background:#c69f68"></span>#c69f68</div></td><td class="mono">198, 159, 104</td><td>Light</td></tr>
<tr><td>09</td><td>accent-III</td><td class="mono">moonlight-a-iii</td><td><div class="hex-cell" data-hex="#93764d"><span class="hex-chip" style="background:#93764d"></span>#93764d</div></td><td class="mono">147, 118, 77</td><td>Light</td></tr>
<tr><td>10</td><td>color-I</td><td class="mono">moonlight-c-i</td><td><div class="hex-cell" data-hex="#c68768"><span class="hex-chip" style="background:#c68768"></span>#c68768</div></td><td class="mono">198, 135, 104</td><td>Frills</td></tr>
<tr><td>11</td><td>color-II</td><td class="mono">moonlight-c-ii</td><td><div class="hex-cell" data-hex="#c66868"><span class="hex-chip" style="background:#c66868"></span>#c66868</div></td><td class="mono">198, 104, 104</td><td>Frills</td></tr>
<tr><td>12</td><td>color-III</td><td class="mono">moonlight-c-iii</td><td><div class="hex-cell" data-hex="#c66890"><span class="hex-chip" style="background:#c66890"></span>#c66890</div></td><td class="mono">198, 104, 144</td><td>Frills</td></tr>
<tr><td>13</td><td>color-IV</td><td class="mono">moonlight-c-iv</td><td><div class="hex-cell" data-hex="#6880c6"><span class="hex-chip" style="background:#6880c6"></span>#6880c6</div></td><td class="mono">104, 128, 198</td><td>Frills</td></tr>
<tr><td>14</td><td>color-V</td><td class="mono">moonlight-c-v</td><td><div class="hex-cell" data-hex="#68aec6"><span class="hex-chip" style="background:#68aec6"></span>#68aec6</div></td><td class="mono">104, 174, 198</td><td>Frills</td></tr>
<tr><td>15</td><td>color-VI</td><td class="mono">moonlight-c-vi</td><td><div class="hex-cell" data-hex="#9fc76d"><span class="hex-chip" style="background:#9fc76d"></span>#9fc76d</div></td><td class="mono">159, 199, 109</td><td>Frills</td></tr>
</tbody>
</table>
</article>
<article id="families" class="docs-section">
<h2>Color families</h2>
<p><strong>White moon</strong> (01–03) is the light family, used mainly as text color. <code>light-I</code> is the brightest and most common; <code>light-II</code> leans a little bluer, <code>light-III</code> a little warmer — both exist to add variation without breaking contrast.</p>
<p><strong>Night sky</strong> (04–06) is the primary dark family and the backbone of every port. <code>dark-I</code> is the deepest, most eye-comfortable background; <code>dark-II</code> sits a step brighter for surfaces and cards; <code>dark-III</code> is saturated enough to use for borders, lines, and hover states.</p>
<p><strong>Light</strong> (07–09) is the accent family — a warm, campfire yellow. <code>accent-I</code> is the headline color, the one you reach for first; <code>accent-II</code> reads beautifully against the Night sky family as a secondary accent; <code>accent-III</code> is the deepest variation, good for subtle highlights.</p>
<p><strong>Frills</strong> (10–15) are six wide-ranging hues — from orange through pink, purple, turquoise, and green — kept just muted enough to still feel like Moonlight. Use them for tags, syntax highlighting, charts, or status colors.</p>
</article>
<article id="usage" class="docs-section">
<h2>Usage guidelines</h2>
<p>A few habits that keep ports feeling consistent with each other:</p>
<ul style="display:flex;flex-direction:column;gap:.6em;list-style:disc;padding-left:1.2em;">
<li>Use <code>dark-I</code> for the main background and <code>dark-II</code> for anything that needs to sit visually "above" it — panels, cards, modals.</li>
<li>Reserve <code>accent-I</code> for the one thing on screen you want a person to notice first — a primary button, an active tab, a focus ring.</li>
<li>Lean on <code>light-I</code> for body text and <code>light-II</code> for secondary or muted text, rather than introducing a new gray.</li>
<li>Pull from the Frills family for anything categorical (tags, labels, syntax tokens) instead of inventing new hues.</li>
</ul>
</article>
<article id="build-a-port" class="docs-section">
<h2>Build a port</h2>
<p>Want Moonlight in an app that isn't listed yet? Start from the <a href="https://github.com/Moonlight-theme/new-port-template" target="_blank" rel="noopener" style="color:var(--accent);">new-port-template</a> repository — it already has the standard README structure, license, and folder layout every other port uses.</p>
<pre># 1. Use the template on GitHub ("Use this template" button)
# 2. Rename the repo to your app's name
# 3. Map the 15 colors above onto your app's theming format
# 4. Add a screenshot and fill in the README
# 5. Open a request to join the Moonlight-theme organization</pre>
<p>Once it's in good shape, reach out on <a href="https://discord.gg/E6kbQnfHNy" target="_blank" rel="noopener" style="color:var(--accent);">Discord</a> or open an issue on the <a href="https://github.com/Moonlight-theme/Moonlight" target="_blank" rel="noopener" style="color:var(--accent);">Moonlight</a> repo and it'll get added to the <a href="ports.html" style="color:var(--accent);">Ports</a> page.</p>
</article>
<article id="faq" class="docs-section">
<h2>FAQ</h2>
<h3 style="font-size:1.05rem;">Is Moonlight free to use?</h3>
<p>Yes — every port is open source, most under GPL-3.0. Check the individual repo for its exact license.</p>
<h3 style="font-size:1.05rem;">Can I use the colors outside of the listed ports?</h3>
<p>Absolutely. The hex values on this page are the whole palette — use them anywhere: dotfiles, a personal site, a design file.</p>
<h3 style="font-size:1.05rem;">Where do I report a bug in a specific port?</h3>
<p>On that port's own repository — each one has its own issue tracker.</p>
</article>
</div>
</div>
</section>
</main>
<footer class="site-footer">
<div class="wrap">
<div class="footer-inner">
<div class="footer-left">
<svg width="18" height="18" viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="11" fill="#1f2730"/><path d="M12 4a8 8 0 1 0 8 8 6.2 6.2 0 0 1-8-8z" fill="#ecbd7c"/></svg>
Moonlight — a color theme inspired by the camping vibe 🏕
</div>
<div class="footer-socials">
<a href="https://github.com/Moonlight-theme" target="_blank" rel="noopener">GitHub</a>
<a href="https://discord.gg/E6kbQnfHNy" target="_blank" rel="noopener">Discord</a>
<a href="https://twitter.com/moonlight_theme" target="_blank" rel="noopener">X / Twitter</a>
<a href="https://ko-fi.com/abod1960" target="_blank" rel="noopener">ko-fi</a>
</div>
</div>
<p class="credit">Made with ♥ by <a href="https://github.com/abod1960" target="_blank" rel="noopener">Abod1960</a></p>
</div>
</footer>
<script src="assets/main.js"></script>
</body>
</html>