I have copied this Page from Andreas Sefzigs Homepage.

This is a Homepage Page.
The content is published.
It has the title "Themes".
The summary is "A description of how themes are set up.".

The canonical Web URL is `https://homepage.sefzig-net.workers.dev/docs/themes`.
The Markdown URL is `https://homepage.sefzig-net.workers.dev/source/pages/docs/themes/Content.md`.
The Prompt URL is `https://homepage.sefzig-net.workers.dev/source/pages/docs/themes/Prompt.md`.

The Markdown:
"""
# Themes

_A Theme defines the Homepage’s visual appearance, including its colors, fonts, accents, link styling, and shading._

Themes are controlled in `/work/content/Themes.md`.
Copy the [Template](#template) to create a Theme,
then use the [Setup](#setup) to adjust it.
The Setup covers [Parameters](#parameters),
[Fonts](#fonts),
[Accents](#accents),
and [Colors](#colors).

## Setup [v]

_Use these sections to configure a Theme._

### Parameters [v]

_Key-value pairs that control the Theme._

#### Preferences [v]

_Connect the theme to the Preferences._

```yaml [< nowrap] Define the human readable name
Label: Tba // Set the name of the theme in the Preferences button
```
```yaml [< nowrap] Choose the user selectability
Preferences: false // Control whether the theme can be selected by the user
```
```yaml [< nowrap] Adjust the panel shadow
PanelShadow: contrast 20 // Set the color and strength of the shade
```

#### Design [v]

_Control the typography of content links._

```yaml [< nowrap] Select the initial accent color
DefaultAccent: Blue // Choose a given accent color to paint first. The value must exactly match one of the labels defined under `Accents`.
```
```yaml [< nowrap] Select resting link color
LinkColor: none // Choose the standard color of resting links. `LinkColor` affects inline content links only; it does not style Breadcrumbs, the Footer, settings, or table-of-contents links.
```
```yaml [< nowrap] Select link decoration/offset
LinkUnderline: true 0 // Choose the standard decoration of resting links. `LinkUnderline` affects only inline content links. The optional number is a pixel offset: negative values move the underline closer to the text, positive values move it farther away. `false` hides the resting underline but preserves the hover/focus underline.
```

#### Chrome [v]

_Adjust the design of the page's chrome._

```yaml [< nowrap] Adjust logo outline color
LogoOutline: normal // Integrate the logo into the theme
```
```yaml [< nowrap] Adjust logo area color
LogoArea: normal // Integrate the logo into the theme. This hides the Theme from the Preferences selector but does not disable it for Content frontmatter or existing saved Preferences.
```
```yaml [< nowrap] Control Breadcrumb and Footer
ChromeShadow: default // Set Breadcrumb and Footer label/link shadows; separators are not affected.
```

#### Shade [v]

_Finetune the theme's shadow/glow._

```yaml [< nowrap] Configure shadows and glows
ShadeCenter: 0px, 0px // Position the center of shading effects as top, left
ShadeColor: none // Select the shading color source or disables it
ShadeDuration: 0 // Control the shading transition duration
ShadeFocus: 0 // Control the focus/intensity multiplier of shadings
ShadeRadius: 0px // Adjust the radius of the shadings
ShadeStrength: 0.0 // Adjust the opacity/intensity of the shadings
```

### Fonts [v]

_List of fonts and weights by element._

```md [<] List: Font settings
- UI: Arial, Helvetica, sans-serif // Font families
- UI weight: 400 // Font weight
- Display: "Times New Roman", Times, serif // Font families
- Display weight: 700 // Font weight
- Body: "Times New Roman", Times, serif // Font families
- Body weight: 400 // Font weight
- Mono: "Courier New", Courier, monospace // Font families
- Mono weight: 400 // Font weight
```

List: Font roles [v]
- UI: Navigation, Breadcrumbs, settings, controls, and buttons.
- Display: Page and Presentation titles and significant content headings.
- Body: Prose, introductions, lists, quotations, and reading-oriented tables.
- Mono: Code, identifiers, timestamps, coordinates, and technical metadata.

### Accents [v]

_List of accent colors the theme contains. The sample values only show the optional override syntax; choose your own colors._

```md [<] Markdown list
Accents:

- Tba: #000000 // Replace name and color or delete
  - Light: #000000 // Optional exact Standard Readability text color for Light brightness
  - Dark: #000000 // Optional exact Standard Readability text color for Dark brightness
- Tba: #000000 // Replace name and color or delete
- Tba: #000000 // Replace name and color or delete
- Tba: #000000 // Replace name and color or delete
- Tba: #000000 // Replace name and color or delete
- Tba: #000000 // Replace name and color or delete
```

The indented `Light` and `Dark` entries are optional text-color overrides for the matching brightness. They affect Standard Readability only and are used exactly as written, even if their contrast is below the automatic target. Without an override, Standard keeps the base accent when it reaches `2.5:1` in Light brightness or `3:1` in Dark brightness against a Theme Background, Surface, or Panel; otherwise it derives the nearest shade that reaches that mode's target. Enhanced Readability ignores these overrides and derives a shade that reaches `4.5:1` in both brightness modes. These derived colors apply to accent-colored text, links, and list markers on flat Theme surfaces. Fading line-art images and their captions in gallery bands use the active Background shade as the accent-gradient endpoint, including the caption underline on hover or focus. Accent link underlines follow the same derived shade as their text; unrelated decorative uses retain the base accent. Text over raster images and slides keeps its separate treatment.

The generated CSS exposes the active text colors as `--accent-color-text`, `--accent-color-text-surface`, and `--accent-color-text-panel`, with the Standard and Enhanced Light/Dark variants also available at the root. Accent-colored borders over transparent Theme Background, Surface, or Panel areas use the matching active variant. When a secondary-button hover fills with the accent, its border layers match that fill; other accent fills, standalone icons, and decorative uses retain the base accent.

### Colors [v]

_Table of colors to be used, by brightness._

```md [<] Markdown table
Colors:

| Token             | Light   | Dark    |
|-------------------|--------:|--------:|
| Logo glow         | #0000FF | #0000FF |
| Main              | #000000 | #FFFFFF |
| Muted             | #666666 | #C0C0C0 |
| Subtle            | #999999 | #808080 |
| Background        | #FFFFFF | #111111 |
| Surface           | #FFFFFF | #111111 |
| Panel             | #F0F0F0 | #202020 |
| Border            | #C0C0C0 | #808080 |
| Strong border     | #000000 | #FFFFFF |
| Control           | #000000 | #FFFFFF |
| Control secondary | #666666 | #C0C0C0 |
| Control disabled  | #C0C0C0 | #666666 |
```

## Template [v]

_Here is a template to copy and paste._

```yaml [<] Markdown
## tba // The internal id of the theme

// Preferences
Label: Tba // Define the human readable name
Preferences: false // Choose the user selectability
PanelShadow: contrast 20 // Adjust the panel shadow

// Design
DefaultAccent: Blue // Select the initial accent color
LinkColor: accent // Select resting link color
LinkUnderline: true 0 // Select link decoration/offset

// Chrome
LogoOutline: black // Adjust logo outline color
LogoArea: white // Adjust logo area color
ChromeShadow: none // Control Breadcrumb and Footer

// Shade
ShadeCenter: 0px, 0px // Position the center of shade as top, left
ShadeColor: none // Select the shade color source or disable
ShadeDuration: 0 // Control the shade transition duration
ShadeFocus: 0 // Control the focus/intensity multiplier of shades
ShadeRadius: 0px // Adjust the radius of the shade
ShadeStrength: 0.0 // Adjust the opacity of the shade

Accents:

- Tba: #000000 // Replace name and color or delete
- Tba: #000000 // Replace name and color or delete
- Tba: #000000 // Replace name and color or delete
- Tba: #000000 // Replace name and color or delete
- Tba: #000000 // Replace name and color or delete
- Tba: #000000 // Replace name and color or delete

Fonts:

- UI: Arial, Helvetica, sans-serif // Font families
- UI weight: 400 // Font weight
- Display: "Times New Roman", Times, serif // Font families
- Display weight: 700 // Font weight
- Body: "Times New Roman", Times, serif // Font families
- Body weight: 400 // Font weight
- Mono: "Courier New", Courier, monospace // Font families
- Mono weight: 400 // Font weight

Colors:

| Token             | Light   | Dark    |
|-------------------|--------:|--------:|
| Main              | #000000 | #FFFFFF |
| Muted             | #666666 | #C0C0C0 |
| Subtle            | #999999 | #808080 |
| Background        | #FFFFFF | #111111 |
| Surface           | #FFFFFF | #111111 |
| Panel             | #F0F0F0 | #202020 |
| Border            | #C0C0C0 | #808080 |
| Strong border     | #000000 | #FFFFFF |
| Control           | #000000 | #FFFFFF |
| Control secondary | #666666 | #C0C0C0 |
| Control disabled  | #C0C0C0 | #666666 |
| Logo glow         | #0000FF | #0000FF |
```
"""