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

Variable	Default	Description
`--ba-color-bg`	`#0c0d10`	Page background
`--ba-color-text`	`#f2f4f8`	Primary text
`--ba-color-text-muted`	`rgba(242,244,248,0.6)`	Muted text (dates, meta)
`--ba-color-text-secondary`	`rgba(242,244,248,0.8)`	Secondary text (excerpts)
`--ba-color-text-content`	`rgba(242,244,248,0.9)`	Main content text
`--ba-color-link`	`#6cf`	Link color
`--ba-color-link-hover`	`#8df`	Link hover color
`--ba-color-border`	`rgba(255,255,255,0.08)`	Card borders
`--ba-color-border-hover`	`rgba(255,255,255,0.12)`	Card border on hover
`--ba-color-card-bg`	`rgba(255,255,255,0.02)`	Card background
`--ba-color-card-bg-hover`	`rgba(255,255,255,0.04)`	Card background on hover
`--ba-color-code-bg`	`rgba(255,255,255,0.1)`	Inline code background
`--ba-color-pre-bg`	`rgba(255,255,255,0.05)`	Code block background
`--ba-color-img-shadow`	`rgba(0,0,0,0.3)`	Image drop shadow

Layout & Typography

Variable	Default	Description
`--ba-radius`	`8px`	Card border radius
`--ba-radius-sm`	`6px`	Code block/image border radius
`--ba-radius-xs`	`3px`	Inline code border radius
`--ba-max-width`	`720px`	Maximum content width
`--ba-font-sans`	`system-ui, -apple-system, ...`	Body font stack
`--ba-font-mono`	`ui-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;
  /* ... */
}

CSS Class Reference

Blog Listing

Class	Element
`.ba-listing`	Listing wrapper `<section>`
`.ba-listing-title`	Section heading `<h1>`
`.ba-posts`	Post cards container (flex column)
`.ba-post-card`	Individual card `<article>`
`.ba-post-card-title`	Card title `<h2>`
`.ba-post-card-link`	Title link `<a>`
`.ba-post-card-meta`	Date/meta paragraph
`.ba-post-card-excerpt`	Excerpt content

Blog Post

Class	Element
`.ba-post`	Post wrapper `<article>`
`.ba-post-title`	Post title `<h1>`
`.ba-post-meta`	Date and reading time
`.ba-post-meta-sep`	Separator between date and reading time
`.ba-post-reading-time`	Reading time span

Markdown Content

Class	Element
`.ba-markdown`	Markdown wrapper `<div>`
`.ba-markdown p`	Paragraphs
`.ba-markdown h1`–`h6`	Headings
`.ba-markdown a`	Links
`.ba-markdown code`	Inline code
`.ba-markdown pre`	Code blocks
`.ba-markdown img`	Images (centered, responsive)
`.ba-markdown ul`, `ol`	Lists

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

React Components — Component props and customization.
Quickstart — Full setup example.