mirror of
https://github.com/ollama/ollama.git
synced 2026-07-10 09:44:18 +00:00
chore: untrack generated docs
This commit is contained in:
ParthSareen
parent
280b85f8a4
commit
ed6a3e6c4e
2 changed files with 0 additions and 2280 deletions
File diff suppressed because it is too large
Load diff
|
|
@ -1,748 +0,0 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Ollama Agent Markdown Color Options</title>
|
||||
<style>
|
||||
:root {
|
||||
color-scheme: light dark;
|
||||
--page-bg: #f7f7f4;
|
||||
--page-fg: #1f1f1f;
|
||||
--muted: #767676;
|
||||
--panel: #ffffff;
|
||||
--line: #d8d8d2;
|
||||
--shadow: rgba(0, 0, 0, 0.08);
|
||||
--preview-bg: #fbfbf8;
|
||||
--preview-fg: #222222;
|
||||
--preview-muted: #777777;
|
||||
--preview-heading: #8a661e;
|
||||
--preview-strong: #8a661e;
|
||||
--preview-link: #1f6f9f;
|
||||
--preview-code: #1f6f9f;
|
||||
--preview-rule: #999999;
|
||||
--preview-table: #666666;
|
||||
}
|
||||
|
||||
[data-theme="dark"] {
|
||||
color-scheme: dark;
|
||||
--page-bg: #20201e;
|
||||
--page-fg: #e8e2d2;
|
||||
--muted: #9a968c;
|
||||
--panel: #292927;
|
||||
--line: #45423d;
|
||||
--shadow: rgba(0, 0, 0, 0.28);
|
||||
}
|
||||
|
||||
[data-theme="light"] {
|
||||
color-scheme: light;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
background: var(--page-bg);
|
||||
color: var(--page-fg);
|
||||
font: 14px/1.5 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
|
||||
}
|
||||
|
||||
main {
|
||||
width: min(1280px, calc(100vw - 40px));
|
||||
margin: 28px auto 48px;
|
||||
}
|
||||
|
||||
header {
|
||||
display: flex;
|
||||
align-items: end;
|
||||
justify-content: space-between;
|
||||
gap: 24px;
|
||||
margin-bottom: 22px;
|
||||
border-bottom: 1px solid var(--line);
|
||||
padding-bottom: 18px;
|
||||
}
|
||||
|
||||
h1, h2, h3, p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 20px;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
|
||||
header p {
|
||||
max-width: 720px;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.header-actions {
|
||||
display: grid;
|
||||
gap: 10px;
|
||||
justify-items: end;
|
||||
}
|
||||
|
||||
.theme-toggle {
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 7px;
|
||||
padding: 7px 10px;
|
||||
background: var(--panel);
|
||||
color: var(--page-fg);
|
||||
font: inherit;
|
||||
cursor: pointer;
|
||||
box-shadow: 0 4px 16px var(--shadow);
|
||||
}
|
||||
|
||||
.theme-toggle:hover {
|
||||
border-color: var(--muted);
|
||||
}
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.card {
|
||||
background: var(--panel);
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 8px 28px var(--shadow);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
display: flex;
|
||||
align-items: start;
|
||||
justify-content: space-between;
|
||||
gap: 16px;
|
||||
padding: 14px 16px 12px;
|
||||
border-bottom: 1px solid var(--line);
|
||||
}
|
||||
|
||||
.card-title {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.card-note {
|
||||
margin-top: 4px;
|
||||
color: var(--muted);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.swatches {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(6, 22px);
|
||||
gap: 5px;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.swatch {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
border-radius: 5px;
|
||||
border: 1px solid rgba(0, 0, 0, 0.22);
|
||||
}
|
||||
|
||||
.preview {
|
||||
background: var(--preview-bg);
|
||||
color: var(--preview-fg);
|
||||
padding: 18px 20px 20px;
|
||||
min-height: 390px;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.preview .assistant-dot {
|
||||
color: var(--preview-muted);
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.preview h2,
|
||||
.preview h3 {
|
||||
color: var(--preview-heading);
|
||||
margin: 18px 0 10px;
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.preview h3 {
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.preview .rule {
|
||||
height: 1px;
|
||||
margin: 18px 0;
|
||||
background: var(--preview-rule);
|
||||
opacity: 0.55;
|
||||
}
|
||||
|
||||
.preview p {
|
||||
margin: 0 0 14px;
|
||||
}
|
||||
|
||||
.preview strong {
|
||||
color: var(--preview-strong);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.preview a {
|
||||
color: var(--preview-link);
|
||||
text-decoration: underline;
|
||||
text-underline-offset: 2px;
|
||||
}
|
||||
|
||||
.preview code {
|
||||
color: var(--preview-code);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.preview .table {
|
||||
display: grid;
|
||||
gap: 14px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.preview .record {
|
||||
border-left: 2px solid var(--preview-rule);
|
||||
padding-left: 12px;
|
||||
}
|
||||
|
||||
.preview .record-title {
|
||||
color: var(--preview-heading);
|
||||
font-weight: 700;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.preview .field {
|
||||
display: grid;
|
||||
grid-template-columns: 110px minmax(0, 1fr);
|
||||
gap: 12px;
|
||||
margin: 2px 0;
|
||||
}
|
||||
|
||||
.preview .field span:first-child {
|
||||
color: var(--preview-table);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.preview .quote {
|
||||
color: var(--preview-muted);
|
||||
border-left: 2px solid var(--preview-rule);
|
||||
padding-left: 12px;
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
.custom {
|
||||
margin-top: 18px;
|
||||
display: grid;
|
||||
grid-template-columns: 360px minmax(0, 1fr);
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.controls {
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.control {
|
||||
display: grid;
|
||||
grid-template-columns: 128px 42px minmax(0, 1fr);
|
||||
gap: 10px;
|
||||
align-items: center;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
label {
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
input[type="color"] {
|
||||
width: 42px;
|
||||
height: 30px;
|
||||
padding: 0;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 6px;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
input[type="text"] {
|
||||
width: 100%;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 6px;
|
||||
padding: 7px 9px;
|
||||
background: var(--page-bg);
|
||||
color: var(--page-fg);
|
||||
font: inherit;
|
||||
}
|
||||
|
||||
textarea {
|
||||
width: 100%;
|
||||
min-height: 176px;
|
||||
resize: vertical;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 6px;
|
||||
padding: 10px;
|
||||
background: var(--page-bg);
|
||||
color: var(--page-fg);
|
||||
font: inherit;
|
||||
}
|
||||
|
||||
.output {
|
||||
margin-top: 14px;
|
||||
border-top: 1px solid var(--line);
|
||||
padding-top: 14px;
|
||||
}
|
||||
|
||||
pre {
|
||||
margin: 0;
|
||||
white-space: pre-wrap;
|
||||
color: var(--muted);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.wide {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
@media (max-width: 920px) {
|
||||
.grid,
|
||||
.custom {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
header {
|
||||
align-items: start;
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<header>
|
||||
<div>
|
||||
<h1>Markdown color options</h1>
|
||||
<p>Review palettes for the Ollama agent TUI markdown renderer. Presets show how headings, emphasis, links, inline code, table labels, and muted metadata separate from body text.</p>
|
||||
</div>
|
||||
<div class="header-actions">
|
||||
<button class="theme-toggle" id="terminal-toggle" type="button">Show dark terminals</button>
|
||||
<p>Current implementation can map these to Glamour ANSI colors plus the existing bespoke wide-table fallback.</p>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<section class="grid" id="presets"></section>
|
||||
|
||||
<section class="custom">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<div>
|
||||
<div class="card-title">Custom palette</div>
|
||||
<div class="card-note">Pick colors for the active terminal mode, then hand me the values you like.</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="controls" id="controls"></div>
|
||||
</div>
|
||||
|
||||
<div class="card" id="custom-card"></div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<template id="preview-template">
|
||||
<div class="preview">
|
||||
<p><span class="assistant-dot">●</span>I audited <code>cmd/launch</code> and <code>cmd/tui</code>. Both packages build and tests pass, but there are areas to cut or simplify.</p>
|
||||
<div class="rule"></div>
|
||||
<h2>1. Size snapshot</h2>
|
||||
<div class="table">
|
||||
<div class="record">
|
||||
<div class="record-title">cmd/launch integrations</div>
|
||||
<div class="field"><span>Files</span><span>17 integration files</span></div>
|
||||
<div class="field"><span>Non-test LOC</span><span>~8,200</span></div>
|
||||
<div class="field"><span>Notes</span><span><strong>CodexApp</strong>, OpenClaw, Hermes, and Codex are the heaviest implementations.</span></div>
|
||||
</div>
|
||||
<div class="record">
|
||||
<div class="record-title">cmd/tui agent chat</div>
|
||||
<div class="field"><span>Files</span><span><code>chat*.go</code></span></div>
|
||||
<div class="field"><span>Non-test LOC</span><span>~11,500</span></div>
|
||||
<div class="field"><span>Notes</span><span>Used by <code>cmd/agent_tui.go</code>; rendering, input, modals, history, and approvals.</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<h3>A. Collapse the integration interface zoo</h3>
|
||||
<p><code>cmd/launch/launch.go</code> defines ~16 integration interfaces. Many are single-use markers or dead. See <a href="#">launch guide</a> for the proposed cut.</p>
|
||||
<p class="quote">Impact: removes ~100-150 LOC of interface plumbing and makes the orchestration flow easier to follow.</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
const terminalToggle = document.getElementById("terminal-toggle");
|
||||
let terminalMode = localStorage.getItem("markdown-color-options-terminal-mode") || "light";
|
||||
|
||||
const presets = [
|
||||
{
|
||||
name: "Ghostty default",
|
||||
note: "Dark-terminal-first candidate: neutral hierarchy, blue links/code, no muddy yellow.",
|
||||
colors: {
|
||||
light: {
|
||||
bg: "#fbfbf8",
|
||||
fg: "#222222",
|
||||
muted: "#767676",
|
||||
heading: "#2f4f68",
|
||||
strong: "#1f1f1f",
|
||||
link: "#1f6f9f",
|
||||
code: "#1f6f9f",
|
||||
rule: "#a8a8a0",
|
||||
table: "#686868"
|
||||
},
|
||||
dark: {
|
||||
bg: "#282c34",
|
||||
fg: "#e7e8ea",
|
||||
muted: "#9aa1ad",
|
||||
heading: "#cfd6df",
|
||||
strong: "#f0f1f3",
|
||||
link: "#72b7d9",
|
||||
code: "#72b7d9",
|
||||
rule: "#69707c",
|
||||
table: "#aeb5bf"
|
||||
}
|
||||
},
|
||||
ansi: {
|
||||
light: {heading: "24", strong: "0", link: "31", code: "31", muted: "244", table: "242"},
|
||||
dark: {heading: "252", strong: "15", link: "74", code: "74", muted: "247", table: "250"}
|
||||
}
|
||||
},
|
||||
{
|
||||
name: "Current muted warm",
|
||||
note: "The current direction, but mapped separately for light and dark terminals.",
|
||||
colors: {
|
||||
light: {
|
||||
bg: "#fbfbf8",
|
||||
fg: "#222222",
|
||||
muted: "#777777",
|
||||
heading: "#8a661e",
|
||||
strong: "#8a661e",
|
||||
link: "#1f6f9f",
|
||||
code: "#1f6f9f",
|
||||
rule: "#999999",
|
||||
table: "#666666"
|
||||
},
|
||||
dark: {
|
||||
bg: "#282c34",
|
||||
fg: "#e7e8ea",
|
||||
muted: "#9aa1ad",
|
||||
heading: "#d7ba7d",
|
||||
strong: "#d7ba7d",
|
||||
link: "#72b7d9",
|
||||
code: "#72b7d9",
|
||||
rule: "#69707c",
|
||||
table: "#aeb5bf"
|
||||
}
|
||||
},
|
||||
ansi: {
|
||||
light: {heading: "136", strong: "136", link: "31", code: "31", muted: "244", table: "244"},
|
||||
dark: {heading: "180", strong: "180", link: "74", code: "74", muted: "247", table: "250"}
|
||||
}
|
||||
},
|
||||
{
|
||||
name: "Ollama graphite",
|
||||
note: "Mostly monochrome; links/code carry the color. Good if markdown should feel calm.",
|
||||
colors: {
|
||||
light: {
|
||||
bg: "#fafafa",
|
||||
fg: "#1e1e1e",
|
||||
muted: "#777777",
|
||||
heading: "#111111",
|
||||
strong: "#111111",
|
||||
link: "#2c6f91",
|
||||
code: "#2c6f91",
|
||||
rule: "#b5b5b5",
|
||||
table: "#686868"
|
||||
},
|
||||
dark: {
|
||||
bg: "#282c34",
|
||||
fg: "#e7e8ea",
|
||||
muted: "#969ca6",
|
||||
heading: "#f0f1f3",
|
||||
strong: "#f0f1f3",
|
||||
link: "#7db8d6",
|
||||
code: "#7db8d6",
|
||||
rule: "#656c76",
|
||||
table: "#aab1bb"
|
||||
}
|
||||
},
|
||||
ansi: {
|
||||
light: {heading: "0", strong: "0", link: "31", code: "31", muted: "244", table: "242"},
|
||||
dark: {heading: "15", strong: "15", link: "74", code: "74", muted: "247", table: "249"}
|
||||
}
|
||||
},
|
||||
{
|
||||
name: "Glow restrained",
|
||||
note: "More classic terminal markdown color with warmer headings.",
|
||||
colors: {
|
||||
light: {
|
||||
bg: "#fbfbf8",
|
||||
fg: "#24221f",
|
||||
muted: "#777777",
|
||||
heading: "#9a6a00",
|
||||
strong: "#9a6a00",
|
||||
link: "#286fba",
|
||||
code: "#007f73",
|
||||
rule: "#aaa59d",
|
||||
table: "#666666"
|
||||
},
|
||||
dark: {
|
||||
bg: "#282c34",
|
||||
fg: "#e8e2cf",
|
||||
muted: "#9aa1ad",
|
||||
heading: "#f1c76b",
|
||||
strong: "#f1c76b",
|
||||
link: "#8fc3ff",
|
||||
code: "#7bd7c1",
|
||||
rule: "#69707c",
|
||||
table: "#aeb5bf"
|
||||
}
|
||||
},
|
||||
ansi: {
|
||||
light: {heading: "136", strong: "136", link: "32", code: "30", muted: "244", table: "242"},
|
||||
dark: {heading: "222", strong: "222", link: "117", code: "116", muted: "247", table: "250"}
|
||||
}
|
||||
},
|
||||
{
|
||||
name: "Launch blue",
|
||||
note: "Cooler and more product-y. Good for dense technical reports.",
|
||||
colors: {
|
||||
light: {
|
||||
bg: "#f8fafb",
|
||||
fg: "#1f2528",
|
||||
muted: "#6d7478",
|
||||
heading: "#245f8f",
|
||||
strong: "#245f8f",
|
||||
link: "#126b74",
|
||||
code: "#126b74",
|
||||
rule: "#a9b4b8",
|
||||
table: "#5f6b70"
|
||||
},
|
||||
dark: {
|
||||
bg: "#282c34",
|
||||
fg: "#e2e9ed",
|
||||
muted: "#9aa6ad",
|
||||
heading: "#9cc8f1",
|
||||
strong: "#9cc8f1",
|
||||
link: "#74d2dc",
|
||||
code: "#74d2dc",
|
||||
rule: "#65727b",
|
||||
table: "#aeb9c0"
|
||||
}
|
||||
},
|
||||
ansi: {
|
||||
light: {heading: "25", strong: "25", link: "30", code: "30", muted: "244", table: "242"},
|
||||
dark: {heading: "111", strong: "111", link: "80", code: "80", muted: "247", table: "250"}
|
||||
}
|
||||
},
|
||||
{
|
||||
name: "Amber terminal",
|
||||
note: "Warm terminal readout. Distinct hierarchy, but intentionally amber-heavy.",
|
||||
colors: {
|
||||
light: {
|
||||
bg: "#fff9ea",
|
||||
fg: "#2a2417",
|
||||
muted: "#81725b",
|
||||
heading: "#9d6b14",
|
||||
strong: "#9d6b14",
|
||||
link: "#4f7f94",
|
||||
code: "#8a661e",
|
||||
rule: "#c8b994",
|
||||
table: "#7c6b4f"
|
||||
},
|
||||
dark: {
|
||||
bg: "#282c34",
|
||||
fg: "#eee0be",
|
||||
muted: "#aaa08f",
|
||||
heading: "#e0b85f",
|
||||
strong: "#e0b85f",
|
||||
link: "#9dc6d6",
|
||||
code: "#d8c17a",
|
||||
rule: "#736b5d",
|
||||
table: "#b4a27f"
|
||||
}
|
||||
},
|
||||
ansi: {
|
||||
light: {heading: "130", strong: "130", link: "66", code: "136", muted: "244", table: "242"},
|
||||
dark: {heading: "178", strong: "178", link: "110", code: "180", muted: "247", table: "180"}
|
||||
}
|
||||
}
|
||||
];
|
||||
|
||||
const custom = {
|
||||
name: "Custom",
|
||||
note: "Interactive palette",
|
||||
colors: {
|
||||
light: {...presets[0].colors.light},
|
||||
dark: {...presets[0].colors.dark}
|
||||
},
|
||||
ansi: {}
|
||||
};
|
||||
|
||||
const labels = [
|
||||
["bg", "Background"],
|
||||
["fg", "Body"],
|
||||
["muted", "Muted"],
|
||||
["heading", "Heading"],
|
||||
["strong", "Strong"],
|
||||
["link", "Link"],
|
||||
["code", "Inline code"],
|
||||
["rule", "Rule"],
|
||||
["table", "Table labels"]
|
||||
];
|
||||
|
||||
function previewCard(preset, id) {
|
||||
const colors = paletteColors(preset);
|
||||
const card = document.createElement("article");
|
||||
card.className = "card";
|
||||
if (id) card.id = id;
|
||||
|
||||
const header = document.createElement("div");
|
||||
header.className = "card-header";
|
||||
header.innerHTML = `
|
||||
<div>
|
||||
<div class="card-title">${preset.name}</div>
|
||||
<div class="card-note">${preset.note}</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
const swatches = document.createElement("div");
|
||||
swatches.className = "swatches";
|
||||
for (const key of ["fg", "muted", "heading", "strong", "link", "code"]) {
|
||||
const swatch = document.createElement("div");
|
||||
swatch.className = "swatch";
|
||||
swatch.style.background = colors[key];
|
||||
swatch.title = `${key}: ${colors[key]}`;
|
||||
swatches.appendChild(swatch);
|
||||
}
|
||||
header.appendChild(swatches);
|
||||
card.appendChild(header);
|
||||
|
||||
const preview = document.getElementById("preview-template").content.firstElementChild.cloneNode(true);
|
||||
applyPreviewColors(preview, colors);
|
||||
card.appendChild(preview);
|
||||
|
||||
const output = document.createElement("div");
|
||||
output.className = "controls output";
|
||||
output.innerHTML = `<pre>${paletteText(preset)}</pre>`;
|
||||
card.appendChild(output);
|
||||
return card;
|
||||
}
|
||||
|
||||
function paletteColors(preset) {
|
||||
if (preset.colors.light && preset.colors.dark) {
|
||||
return preset.colors[terminalMode];
|
||||
}
|
||||
return preset.colors;
|
||||
}
|
||||
|
||||
function paletteAnsi(preset) {
|
||||
if (!preset.ansi) return {};
|
||||
if (preset.ansi.light && preset.ansi.dark) {
|
||||
return preset.ansi[terminalMode];
|
||||
}
|
||||
return preset.ansi;
|
||||
}
|
||||
|
||||
function applyPreviewColors(el, colors) {
|
||||
el.style.setProperty("--preview-bg", colors.bg);
|
||||
el.style.setProperty("--preview-fg", colors.fg);
|
||||
el.style.setProperty("--preview-muted", colors.muted);
|
||||
el.style.setProperty("--preview-heading", colors.heading);
|
||||
el.style.setProperty("--preview-strong", colors.strong);
|
||||
el.style.setProperty("--preview-link", colors.link);
|
||||
el.style.setProperty("--preview-code", colors.code);
|
||||
el.style.setProperty("--preview-rule", colors.rule);
|
||||
el.style.setProperty("--preview-table", colors.table);
|
||||
}
|
||||
|
||||
function paletteText(preset) {
|
||||
const colors = paletteColors(preset);
|
||||
const ansiValues = paletteAnsi(preset);
|
||||
const hex = Object.entries(colors)
|
||||
.map(([key, value]) => `${key}: ${value}`)
|
||||
.join("\n");
|
||||
const ansi = Object.keys(ansiValues).length
|
||||
? "\n\nANSI suggestions:\n" + Object.entries(ansiValues).map(([key, value]) => `${key}: ${value}`).join("\n")
|
||||
: "";
|
||||
return `Terminal: ${terminalMode}\n${hex}${ansi}`;
|
||||
}
|
||||
|
||||
function renderPresets() {
|
||||
const root = document.getElementById("presets");
|
||||
root.innerHTML = "";
|
||||
for (const preset of presets) {
|
||||
root.appendChild(previewCard(preset));
|
||||
}
|
||||
}
|
||||
|
||||
function renderCustom() {
|
||||
const card = document.getElementById("custom-card");
|
||||
card.replaceWith(previewCard(custom, "custom-card"));
|
||||
}
|
||||
|
||||
function renderControls() {
|
||||
const root = document.getElementById("controls");
|
||||
root.innerHTML = "";
|
||||
for (const [key, label] of labels) {
|
||||
const row = document.createElement("div");
|
||||
row.className = "control";
|
||||
|
||||
const textLabel = document.createElement("label");
|
||||
textLabel.textContent = label;
|
||||
textLabel.htmlFor = `color-${key}`;
|
||||
|
||||
const color = document.createElement("input");
|
||||
color.type = "color";
|
||||
color.id = `color-${key}`;
|
||||
color.value = custom.colors[terminalMode][key];
|
||||
|
||||
const text = document.createElement("input");
|
||||
text.type = "text";
|
||||
text.value = custom.colors[terminalMode][key];
|
||||
text.setAttribute("aria-label", `${label} hex value`);
|
||||
|
||||
const update = (value) => {
|
||||
if (!/^#[0-9a-fA-F]{6}$/.test(value)) return;
|
||||
custom.colors[terminalMode][key] = value;
|
||||
color.value = value;
|
||||
text.value = value;
|
||||
renderCustom();
|
||||
};
|
||||
|
||||
color.addEventListener("input", () => update(color.value));
|
||||
text.addEventListener("change", () => update(text.value.trim()));
|
||||
|
||||
row.append(textLabel, color, text);
|
||||
root.appendChild(row);
|
||||
}
|
||||
|
||||
const output = document.createElement("div");
|
||||
output.className = "output";
|
||||
output.innerHTML = `<pre id="custom-values">${paletteText(custom)}</pre>`;
|
||||
root.appendChild(output);
|
||||
}
|
||||
|
||||
function setTerminalMode(mode) {
|
||||
if (mode !== "dark") {
|
||||
mode = "light";
|
||||
}
|
||||
terminalMode = mode;
|
||||
terminalToggle.textContent = mode === "dark" ? "Show light terminals" : "Show dark terminals";
|
||||
localStorage.setItem("markdown-color-options-terminal-mode", mode);
|
||||
renderPresets();
|
||||
renderControls();
|
||||
renderCustom();
|
||||
}
|
||||
|
||||
terminalToggle.addEventListener("click", () => {
|
||||
setTerminalMode(terminalMode === "dark" ? "light" : "dark");
|
||||
});
|
||||
|
||||
setTerminalMode(terminalMode);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Add table
Add a link
Reference in a new issue