Theme Astro

12/30/2025

Setup Theme

Setup Theme

Setup Theme

Thank you for downloading this theme. I hope this article proves helpful to you.

astro.config.mjs #

Configure your website links and language here

// /astro.config.mjs

site.ts #

Configure your website information and navigation bar here. and social Icons here.

Get your icon from

//src\site.ts

export const siteConfig = {
    author: 'Your Name',
    title: 'My Astro Site',
    description: 'Astro + Tailwind demo',
    headerNav: [
        { label: 'Memo', href: '/memo' },
        { label: 'Blog', href: '/blog' },
        { label: 'Archive', href: '/archive' },

    ],
    // https://icon-sets.iconify.design/mdi/
    social: [
        { label: 'GitHub', href: 'https://github.com/', icon: 'mdi:github' },
        { label: 'Twitter', href: 'https://twitter.com/', icon: 'mdi:twitter' },
        { label: 'Youtube', href: 'https://youtube.com/', icon: 'mdi:youtube' },
        { label: 'Apple', href: 'https://apple.com/', icon: 'mdi:apple' },

    ],
    footerNav: [
        { label: 'About', href: '/about' },
        { label: 'Tags', href: '/tag' },
        { label: 'Search', href: '/search' },
    ],
    topIcons: [
        { label: 'Blog', icon: 'mdi:book', show: true },
        { label: 'Memo', icon: 'mdi:draw-pen', show: true },
        { label: 'Tags', icon: 'mdi:tag-multiple', show: true },
    ]
};

global.css #

Set your color scheme here

//src\global.css

:root {
    --a-text-color: #0066CC;
    --bg-color: #F5F5F7;
    --bg-tag-color: #EEEEEF;
    --text-color: black;
}


:root.dark {
    --a-text-color: #2997FF;
    --bg-color: #1D1D1F;
    --bg-tag-color: #EEEEEF;
    --text-color: white;
}

Set your font here

@layer base {
    body {
        @apply font-mono subpixel-antialiased;
    }
}