Blog Sidebar — CSS Custom Properties

Reference all CSS custom properties available in the Custom CSS field of the Blog Sidebar settings (Theme Editor > Theme settings > App embeds > Blog Sidebar).

How to use

Paste any of the variables below into the Custom CSS textarea to override the default values:

--sidebar-bg: #1a1a2e;
--sidebar-text: #e0e0e0;
--sidebar-accent: #e94560;
--sidebar-radius: 16px;

Property	Default	Description
--sidebar-width	280px	Width of the sidebar panel
--sidebar-bg	#ffffff	Background color of the sidebar
--sidebar-text	#333333	Main text color inside the sidebar
--sidebar-border	#e2e8f0	Border and divider color
--sidebar-accent	#0d6efd	Accent color for toggle button and tag hover
--sidebar-radius	8px	Border radius of the sidebar and toggle
--sidebar-shadow	-2px 0 12px rgba(0,0,0,0.08)	Box shadow (right position)
--sidebar-z-index	1000	Z-index for layering
--sidebar-toggle-size	36px	Width of the toggle button
--sidebar-toggle-bg	var(--sidebar-accent)	Toggle button background
--sidebar-toggle-color	#ffffff	Toggle icon/text color
--sidebar-toggle-icon-size	28px	SVG icon size
--sidebar-offset	0px	Distance from viewport edge
--sidebar-tag-bg	#e2e8f0	Tag pill background
--sidebar-tag-color	#333333	Tag pill text color

Examples

Dark theme

:root {
  --sidebar-bg: #1a1a2e;
  --sidebar-text: #eee;
  --sidebar-border: #16213e;
  --sidebar-accent: #e94560;
  --sidebar-tag-bg: #0f3460;
  --sidebar-tag-color: #eee;
}

Rounded + offset

:root {
  --sidebar-radius: 16px;
  --sidebar-offset: 16px;
}

Compact sidebar

:root {
  --sidebar-width: 200px;
  --sidebar-toggle-size: 28px;
  --sidebar-toggle-icon-size: 20px;
}

Catppuccin Mocha

:root {
  --sidebar-bg: #1e1e2e;
  --sidebar-text: #cdd6f4;
  --sidebar-accent: #cba6f7;
  --sidebar-radius: 12px;
  --sidebar-tag-bg: #313244;
  --sidebar-tag-color: #a6adc8;
}

📄 /catppuccin-custom.css

Clean transparent

:root {
  --sidebar-bg: transparent;
  --sidebar-text: #1a1a1a;
  --sidebar-accent: #7c3aed;
  --sidebar-radius: 0;
  --sidebar-shadow: none;
  --sidebar-border: transparent;
}

📄 /clean-custom.css