autoblogwriterTechnical Documentation
Cmd+K
Docs
Sdk
Styling
Documentation

Styling

Customize AutoBlogWriter component styles with CSS custom properties.

Styling

The SDK ships with default styles optimized for dark themes. All visual properties are controlled via CSS custom properties, making it easy to adapt to your site's design.

Importing Styles

Import the stylesheet in your root layout:

// app/layout.tsx
import "@autoblogwriter/sdk/styles.css";

Or import it in your global CSS:

@import "@autoblogwriter/sdk/styles.css";

CSS Custom Properties

Override these variables in your own CSS to customize the theme:

Colors

VariableDefaultDescription
--ba-color-bg#0c0d10Page background
--ba-color-text#f2f4f8Primary text
--ba-color-text-mutedrgba(242,244,248,0.6)Muted text (dates, meta)
--ba-color-text-secondaryrgba(242,244,248,0.8)Secondary text (excerpts)
--ba-color-text-contentrgba(242,244,248,0.9)Main content text
--ba-color-link#6cfLink color
--ba-color-link-hover#8dfLink hover color
--ba-color-borderrgba(255,255,255,0.08)Card borders
--ba-color-border-hoverrgba(255,255,255,0.12)Card border on hover
--ba-color-card-bgrgba(255,255,255,0.02)Card background
--ba-color-card-bg-hoverrgba(255,255,255,0.04)Card background on hover
--ba-color-code-bgrgba(255,255,255,0.1)Inline code background
--ba-color-pre-bgrgba(255,255,255,0.05)Code block background
--ba-color-img-shadowrgba(0,0,0,0.3)Image drop shadow

Layout & Typography

VariableDefaultDescription
--ba-radius8pxCard border radius
--ba-radius-sm6pxCode block/image border radius
--ba-radius-xs3pxInline code border radius
--ba-max-width720pxMaximum content width
--ba-font-sanssystem-ui, -apple-system, ...Body font stack
--ba-font-monoui-monospace, SFMono-Regular, ...Code font stack

Light Theme Example

:root {
  --ba-color-bg: #ffffff;
  --ba-color-text: #1a1a2e;
  --ba-color-text-muted: rgba(26, 26, 46, 0.5);
  --ba-color-text-secondary: rgba(26, 26, 46, 0.7);
  --ba-color-text-content: rgba(26, 26, 46, 0.85);
  --ba-color-link: #2563eb;
  --ba-color-link-hover: #1d4ed8;
  --ba-color-border: rgba(0, 0, 0, 0.08);
  --ba-color-border-hover: rgba(0, 0, 0, 0.15);
  --ba-color-card-bg: rgba(0, 0, 0, 0.02);
  --ba-color-card-bg-hover: rgba(0, 0, 0, 0.04);
  --ba-color-code-bg: rgba(0, 0, 0, 0.06);
  --ba-color-pre-bg: rgba(0, 0, 0, 0.03);
  --ba-color-img-shadow: rgba(0, 0, 0, 0.1);
}

Dark/Light Toggle

Use CSS prefers-color-scheme or a class-based toggle:

/* Automatic system preference */
@media (prefers-color-scheme: light) {
  :root {
    --ba-color-bg: #ffffff;
    --ba-color-text: #1a1a2e;
    /* ... other light values ... */
  }
}
 
/* Or class-based toggle */
.light {
  --ba-color-bg: #ffffff;
  --ba-color-text: #1a1a2e;
  /* ... */
}

Theme Attribute (data-ba-theme)

When you pass theme="light" or theme="dark" to <BlogPostList> or <BlogPost>, the component sets a data-ba-theme attribute on its wrapper element. You can use this attribute to scope theme overrides to specific components:

[data-ba-theme="light"] {
  --ba-color-bg: #ffffff;
  --ba-color-text: #0c0d10;
  --ba-color-text-muted: rgba(12, 13, 16, 0.6);
  --ba-color-text-secondary: rgba(12, 13, 16, 0.8);
  --ba-color-text-content: rgba(12, 13, 16, 0.9);
  --ba-color-link: #0a66c2;
  --ba-color-link-hover: #0c74db;
  --ba-color-border: rgba(12, 13, 16, 0.12);
  --ba-color-card-bg: rgba(12, 13, 16, 0.03);
  --ba-color-card-bg-hover: rgba(12, 13, 16, 0.06);
  --ba-color-code-bg: rgba(12, 13, 16, 0.08);
  --ba-color-pre-bg: rgba(12, 13, 16, 0.04);
}

This is useful when your site uses a dark background but you want a specific blog section to render in light mode (or vice versa), without affecting global CSS variables.

CSS Class Reference

Blog Listing

ClassElement
.ba-listingListing wrapper <section>
.ba-listing-titleSection heading <h1>
.ba-postsPost cards container (flex column)
.ba-posts--cardCard layout modifier
.ba-posts--listList layout modifier
.ba-post-cardIndividual card <article>
.ba-post-card-titleCard title <h2>
.ba-post-card-linkTitle link <a>
.ba-post-card-metaDate/meta paragraph
.ba-post-card-excerptExcerpt content
.ba-post-card-imageCard image
.ba-paginationPagination wrapper
.ba-pagination-btnPagination button
.ba-pagination-textPagination text (e.g., "Page 1 of 3")

Blog Post

ClassElement
.ba-postPost wrapper <article>
.ba-post-titlePost title <h1>
.ba-post-heroHero image
.ba-post-metaDate and reading time
.ba-post-meta-sepSeparator between date and reading time
.ba-post-reading-timeReading time span

FAQ

ClassElement
.ba-faqFAQ section wrapper
ClassElement
.ba-relatedRelated posts section wrapper
.ba-related-titleRelated posts heading
.ba-related-listRelated posts list
.ba-related-itemRelated posts item
.ba-related-linkRelated posts link

Markdown Content

ClassElement
.ba-markdownMarkdown wrapper <div>
.ba-markdown pParagraphs
.ba-markdown h1–h6Headings
.ba-markdown aLinks
.ba-markdown codeInline code
.ba-markdown preCode blocks
.ba-markdown imgImages (centered, responsive)
.ba-markdown ul, olLists

Using Without Default Styles

If you prefer to write your own styles from scratch, don't import the CSS file. Instead, use the className props on each component:

<BlogPostList
  posts={posts}
  className="my-blog-list"
  linkComponent={Link}
/>
 
<BlogPost
  post={post}
  className="my-blog-post"
/>
 
<Markdown
  source={post.content}
  className="my-markdown prose dark:prose-invert"
/>

Tailwind CSS Integration

The components work with Tailwind's @apply or by passing Tailwind class names via the className prop:

// Use Tailwind's typography plugin
<Markdown source={post.content} className="prose dark:prose-invert max-w-none" />

Or extend the default styles:

.ba-post-card {
  @apply hover:shadow-lg transition-shadow;
}

Next Steps

PreviousReact Components
NextSEO Helpers