Description
The Ghost native comment system ({{comments}}) renders with its default styling, which doesn't match the Wonder Cabinet brand identity (dark background, Jost/EB Garamond typography, green accent colors, etc.).
Goal
Style the comment system to feel cohesive with the rest of the theme, including:
- Colors: Dark background (
--wc-black), cream text (--wc-cream), green accents (--wc-green)
- Typography: Jost for UI elements/headings, EB Garamond for comment body text
- Buttons: Match the bracket button aesthetic or at minimum use brand colors
- Form inputs: Dark-themed input fields consistent with the theme
Constraints
Ghost's comment system renders inside an iframe, which limits direct CSS control. Possible approaches:
- Ghost Admin > Comment settings: Limited built-in color/accent options
- Custom CSS via Ghost's comment theming API: Ghost supports some comment theme customization via
data-* attributes on the {{comments}} helper
- Override via
package.json custom settings: Define accent colors that Ghost applies to comments
Research Needed
- What level of customization does Ghost currently support for its native comment iframe?
- Can accent color, background, and typography be controlled?
- Are there
data- attributes or comment theme options available?
Labels
enhancement, theme
Description
The Ghost native comment system (
{{comments}}) renders with its default styling, which doesn't match the Wonder Cabinet brand identity (dark background, Jost/EB Garamond typography, green accent colors, etc.).Goal
Style the comment system to feel cohesive with the rest of the theme, including:
--wc-black), cream text (--wc-cream), green accents (--wc-green)Constraints
Ghost's comment system renders inside an iframe, which limits direct CSS control. Possible approaches:
data-*attributes on the{{comments}}helperpackage.jsoncustom settings: Define accent colors that Ghost applies to commentsResearch Needed
data-attributes or comment theme options available?Labels
enhancement, theme