About this set
A forum topic in a dark theme, plus two notices that forums need sooner or later. The topic header shows a category tag, a Solved tag, the title and reply, view and last-reply counts. Each post has a user column with an initials avatar, the username, a Moderator or Original poster badge, the join date and post count, and a content column with a numbered permalink, the time, the post text with inline code, Like and Quote buttons. The moderator’s answer is marked Accepted solution with a green rail and a written label, and a later post quotes it in a styled blockquote with a cite line. Like toggles a heart and its count. Quote copies a short excerpt of the post into the reply box as a markdown quote and focuses it, and Post reply confirms in a status line. On phones the user column turns into a compact row above each post. The second block shows a pinned moderator note with a link and a locked-topic notice. All text colours were chosen for at least 4.5:1 contrast on the near-black panels.
What’s included
- User column with role badges, join date and post count
- Accepted solution marked with a rail and a written label
- Like toggles with counts and aria-pressed
- Quote button that fills the reply box with a markdown quote
- Pinned and locked notices, and a stacked layout on phones
Accessibility
Each post is an article named by its number and author, roles and the solved state are written as text, and quotes use blockquote with a cite line. Like buttons use aria-pressed and include the post number in hidden text, Quote buttons say which post they quote, the reply field has a visible label and hint, and the confirmation is a status message. Focus outlines are violet on the dark panels, and the Bootstrap version runs in data-bs-theme="dark".
Customise it
Change --df-panel, --df-panel2, --df-accent and --df-ok on .df. Bootstrap uses the same variables on the .card in data-bs-theme="dark"; in Tailwind edit the --color-df-* theme colours.
