Skip to content
Astro Church Docs

Changing the Site Theme

Astro Church is built with CSS Variables and Shadcn UI, giving you total control over your site’s theme. You can apply a completely new look by updating the theme > customCSS field in your configuration.

Step 1: Create Your Theme

Section titled “Step 1: Create Your Theme”

I recommend using Tweakcn to visually design your theme before applying it to your site.

  1. Open the Tweakcn Editor.

  2. Customize your look:

    • Select a preset theme or build one from scratch using the sidebar.
    • Toggle Modes: Use the light/dark switch to ensure your colors look great in both environments.
    • Changes update in real-time on the right-hand preview.

  3. Export your customized theme: Click the Code button. In the popup, click the Copy button for the index.css file.

Step 2: Apply the Theme to Your Site

Section titled “Step 2: Apply the Theme to Your Site”

Once you have your CSS code copied, you need to save it to your CMS.

  1. Access your site in Astro-Church CMS

  2. Navigate to Settings: Click on Site Config in the sidebar and scroll down to the Theme section.

  3. Update Custom CSS: Paste your code into the Custom CSS box.

    • Note: If you already have code in this box, you should generally replace it entirely with your new Tweakcn export.

  4. Save Changes: Click the Save button at the top of the page.

Managing Light and Dark Modes

Section titled “Managing Light and Dark Modes”

By default, Astro Church is “system aware” and will switch between light and dark modes automatically. If you want your site to stay on one specific look regardless of a visitor’s device settings:

Want the same look for both light and dark modes?

Section titled “Want the same look for both light and dark modes?”

If you prefer your site to look identical regardless of the user’s settings (e.g., always dark or always high-contrast):

  1. Design your look: Customize your preferred mode in Tweakcn as described in Step 1.

  2. Apply the CSS: Copy and paste that code into the Custom CSS box as described in Step 2.

  3. Lock the Color Scheme: Find the Color Scheme setting (under Theme) and select either Light or Dark to match your Tweakcn design.

    • Note: Setting the Color Scheme to Light or Dark overrides the user’s system preferences, ensuring your brand colors stay consistent for everyone.