Luno Theme Documentation

Version 1.0.x

Welcome to Luno! This guide helps you install, customize, and get the most out of your new Ghost theme. If you’re new to Ghost, you might find the official Ghost documentation helpful.

Installation and Updates

Installing the Theme

Follow these steps to add Luno to your Ghost site:

  1. Log in to your Ghost Admin.
  2. Go to Settings > Design & branding > Customize.
  3. Click Change theme (bottom right).
  4. Select Upload theme and choose the Luno.zip file you downloaded.
  5. Once uploaded, click Activate.

Removing the Theme

If you need to remove Luno:

  1. Go to Settings > Design & branding > Customize.
  2. Click Change theme.
  3. Find Luno in the list. Before deleting, activate a different theme (you can’t delete an active theme).
  4. Click the ... menu next to Luno and select Delete. Confirm the deletion.

Updating the Theme

Keep Luno up-to-date with the latest features and improvements:

  1. Download the latest version of the Luno theme zip file.
  2. Go to Settings > Design & branding > Customize.
  3. Click Change theme.
  4. Select Upload theme and choose the new Luno.zip file.
  5. Activate the updated theme.

Important: Updating overwrites any direct code changes you’ve made to theme files. If you’ve customized the code, back up your changes before updating.

Customization

Set your site’s logo for branding:

  1. Go to Settings > Design & branding.
  2. Under Brand, find Publication logo.
  3. Click Upload logo and select your image file. Use a transparent background (like .png) for best results.
  4. Click Save.

If you plan to use dark mode (see Color Scheme section), you can add a separate logo optimized for dark backgrounds:

  1. Go to Settings > Design & branding > Customize.
  2. Find Logo for dark color scheme under Site-wide.
  3. Upload your dark mode logo variant.
  4. Click Save.

Customize the copyright notice shown in your site footer:

  1. Go to Settings > Design & branding > Customize.
  2. Find Copyright text.
  3. Enter your desired copyright information (e.g., © 2024 Your Site Name. All rights reserved.).
  4. Click Save.

If left empty, the default ”© [Year] Published with Ghost” will be displayed.

Color Scheme

Luno Light Mode
Light Mode
Luno Dark Mode
Dark Mode

Choose how your site handles light and dark modes:

  1. Go to Settings > Design & branding > Customize.
  2. Expand the Site-wide section.
  3. Find Color scheme and choose:
    • Light: Always use the light theme.
    • Dark: Always use the dark theme.
    • System: Automatically match the visitor’s device setting.
  4. Click Save.

You can also allow visitors to switch modes themselves:

  1. Find Show color scheme switcher under Site-wide.
  2. Toggle it on to display a switcher button in the header.
  3. Click Save.

Fonts

Luno integrates with Ghost’s native font system and also includes built-in options.

Using Ghost Native Fonts (Recommended)

Available in Ghost 5.104.0+, this method provides the best control and consistency:

  1. Ensure you’re using a recent version of Luno and Ghost.
  2. Go to Settings > Design & branding.
  3. Under Brand, find the Typography section.
  4. Select your desired heading and body fonts.
  5. Click Save.

These settings automatically override the theme’s specific font settings.

Using Theme Font Settings

If you prefer not to use Ghost’s native system:

  1. Go to Settings > Design & branding > Customize.
  2. Expand the Site-wide section.
  3. Use the Heading font family and Body font family dropdowns to select fonts.
  4. Click Save.

Available Theme Fonts:

Heading FontsBody Fonts
BitterBitter
CardoFira Mono
Chakra PetchFira Sans
Della RespiraIBM Plex Serif
Fira MonoInter
Fira SansJetBrains Mono
FrauncesLora
IBM Plex SerifManrope
InterMerriweather
JetBrains MonoNoto Sans
Libre BaskervilleNoto Serif
LoraNunito
ManropePoppins
MerriweatherRoboto
Noto SansSource Serif 4
Noto SerifSpace Mono
Nunito
Old Standard TT
Poppins
Roboto
Rufina
Source Serif 4
Space Grotesk
Space Mono
Tenor Sans

Display social media icons in your site footer:

Facebook and X (formerly Twitter):

  1. Go to Settings > General.
  2. Scroll to Social accounts.
  3. Enter your Facebook page URL and X profile URL.
  4. Click Save.

Other Platforms (Instagram, LinkedIn, etc.):

  1. Go to Settings > Code injection.
  2. In the Site Header box, add the following script, modifying the links and adding platforms as needed:
<script>
  // Add links for the social platforms you want to display
  window.social = {
    instagram: "https://instagram.com/your_username",
    linkedin: "https://linkedin.com/in/your_profile",
    youtube: "https://youtube.com/your_channel",
    pinterest: "https://pinterest.com/your_username",
    // Add other supported platforms below
  };
</script>
  1. Click Save.

Supported Platforms for Code Injection:

Use the lowercase platform name as the key (e.g., instagram, linkedin).

BehanceFacebookPinterest
BlueskyFlickrReddit
DeezerInstagramSnapchat
DiasporaKickstarterSpotify
DiscordLineTelegram
DribbbleLinkedInThreads
MastodonTikTokWeibo
OKTwitchWhatsApp
PatreonVimeoX
XingYouTubeYelp
Zhihu
Author Social Links

Individual author profiles can display their personal social media links on author pages and in author bio sections:

Adding Social Links to Author Profiles:

  1. Go to Settings > Staff in Ghost Admin.
  2. Edit an author profile.
  3. Scroll to the Social accounts section.
  4. Fill in the relevant social platform fields.
  5. Click Save.

Supported Platforms for Authors:

Authors can add links to these platforms directly in their Ghost profile:

PlatformField NameNotes
WebsiteWebsiteAny personal or professional website
FacebookFacebookFacebook profile/page username
X (Twitter)TwitterX.com username (still labeled “Twitter” in Ghost)
InstagramInstagramInstagram username
TikTokTikTokTikTok username
YouTubeYouTubeYouTube channel URL or username
LinkedInLinkedInLinkedIn profile URL
ThreadsThreadsThreads username
BlueskyBlueskyBluesky handle
MastodonMastodonFull Mastodon profile URL

Where Author Social Links Appear:

  • Author archive pages (/author/username/)
  • Author bio sections within posts
  • The Authors listing page (if using the Authors template)

Author social links appear as icons with tooltips and open in new tabs when clicked.

Primary Navigation (Sidebar)

The main navigation appears in a sidebar that opens on both desktop and mobile. This is your site’s primary navigation system.

  1. Go to Settings > Navigation.
  2. Edit items under Primary navigation.
  3. Add menu items with optional icons and submenus.

Navigation Item Formatting:

Basic Items:

  • Label: Home → Displays as “Home”
  • URL: / → Links to homepage

Items with Icons:

  • Label: [icon=home] Home → Displays with home icon + “Home”
  • Label: [icon=user] About → Displays with user icon + “About”

Creating Group Headers and Sub-items:

  • Group Header: Set URL to # (e.g., Label: Company, URL: #)
  • Sub-items: Add a - prefix to the label (e.g., Label: -About Us, URL: /about)

Example Navigation Structure:

1. Home                    (Label: "Home", URL: "/")
2. Company                 (Label: "Company", URL: "#") ← Group Header
3. -About Us              (Label: "-About Us", URL: "/about") ← Sub-item
4. -Contact               (Label: "-Contact", URL: "/contact") ← Sub-item
5. Blog                   (Label: "Blog", URL: "/blog")

Use any icon name from the Lucide icon library (e.g., home, user, mail, phone, calendar).

Sidebar Background Image:

  1. Go to Settings > Design & branding > Customize.
  2. Under Site-wide, find Sidebar menu background image.
  3. Upload an image for the sidebar background.
  4. Click Save.

Integrated Search:

Ghost’s native search is automatically integrated into your navigation:

  • Desktop: Search icon appears in the sidebar
  • Mobile: Search icon in the header
  • Keyboard Shortcut: Press ⌘K (Mac) or Ctrl+K (Windows/Linux) to open search from anywhere
  • Searches titles, content, authors, and tags
  • No configuration needed - works automatically

Configure the links displayed in your site footer, organized into columns:

  1. Go to Settings > Navigation.
  2. Edit items under Secondary navigation.
  3. To create columns:
    • Add a column header item (e.g., Company). Set its URL to #.
    • Add the links for that column directly below the header (e.g., About Us, Contact).
    • Add another header item with URL # to start the next column (e.g., Legal).
    • Add links for the second column below its header (e.g., Privacy Policy, Terms of Service).
  4. Click Save.

Subscribe Button

The subscribe button in the header can be customized through Ghost’s Portal settings.

  1. Go to Settings > Membership > Portal.
  2. Click Customize Portal.
  3. Under Look & feel, find the button customization options:
    • Button style: Choose between icon only, text only, or icon + text
    • Button icon: Select from 5 built-in icons or upload a custom icon
    • Button text: Set custom text (default is “Subscribe”)
  4. Click Save.

Homepage Setup

Hero Section

Hero Layout Variation
Hero Layout Variation
Hero Layout Variation
Hero Layout Variation
Hero Layout Variation
Hero Layout Variation

Create an eye-catching hero section on your homepage using a Ghost page with the #hero tag.

Setup:

  1. Create a new page in Ghost Admin.
  2. Add the internal tag #hero (type “hash-hero” in the tags field).
  3. Set the page title (this becomes your hero heading).
  4. Add content in the editor (this becomes your hero body text - full HTML/markdown supported).
  5. Optionally add a feature image.
  6. Publish the page.

Customization:

Go to Settings > Design & branding > Customize > Homepage section:

Hero Layout Options:

  • default - Standard layout with content and image side by side
  • centered - Centered layout with image above or below content
  • cover - Full-width background image with content overlay
  • split-start - Image on left, content on right
  • split-end - Content on left, image on right

Hero Image Style Options:

  • original - Display image without modifications
  • circle - Circular cropped image
  • square - Rounded square image
  • same-as-post-card - Match your post card styling

Note: If you don’t add a feature image to your hero page, the theme automatically uses your site’s cover image as a fallback.

Highlight specific content categories with dedicated sections on your homepage, each displaying the tag name, description, and latest posts.

Setup:

  1. Go to Settings > Design & branding > Customize.
  2. Expand the Homepage section.
  3. Find the Featured tags field.
  4. Enter comma-separated tag slugs (e.g., technology,design,tutorials).
  5. Click Save.

Result:

  • Each tag gets its own homepage section between your main post feed
  • Shows tag name and description
  • Displays 3 latest posts from that tag
  • “View all” button appears if more than 3 posts exist
  • Sections appear in the order you specify

Best Practice: Use 2-4 featured tags for optimal homepage layout and organization.

Tags Filter Carousel

Display a horizontal scrolling navigation of your most popular tags for easy content discovery.

Enable:

  1. Go to Settings > Design & branding > Customize > Homepage.
  2. Toggle Show tag filters carousel ON.
  3. Click Save.

Features:

  • Shows top 15 tags by post count
  • Horizontal scrollable with left/right arrow controls
  • Current tag highlighted in accent color
  • “All” button returns to full homepage
  • Mobile-friendly with touch scrolling
  • Appears at the top of your homepage and tag archive pages
Authors Carousel

Showcase your writing team with an attractive horizontal carousel featuring profile images, bios, and social links.

Enable:

  1. Go to Settings > Design & branding > Customize > Homepage.
  2. Toggle Show authors list ON.
  3. Click Save.

Displays:

  • Profile images (or initials if no image)
  • Author names with links to their profiles
  • Bio excerpts
  • Social media links from their profiles
  • Up to 100 authors ordered by post count
  • Horizontal scrollable carousel with arrow controls

Best Results: Ensure author profiles in Staff settings have profile images, bios, and social links filled out.

Post Grid Customization

Customize how your post cards appear across the site with aspect ratios and border radius options.

Post Card Aspect Ratio:

Control the shape of post card images throughout your site:

  1. Go to Settings > Design & branding > Customize > Homepage.
  2. Find Post card image aspect ratio.
  3. Choose from 7 options:
    • 16:9 - Widescreen (default) - cinematic, modern
    • 3:2 - Classic photo ratio
    • 4:3 - Traditional - balanced
    • 1:1 - Square - Instagram style
    • 4:5 - Portrait - magazine style
    • 2:3 - Tall portrait
    • 9:16 - Vertical/story format
  4. Click Save.

Card Border Radius:

Control the roundness of cards, images, and buttons:

  1. Go to Settings > Design & branding > Customize > Homepage.
  2. Find Card radius.
  3. Choose from 6 options:
    • 0px - Sharp corners, modern minimal
    • 4px - Subtle roundness
    • 8px - Slightly rounded
    • 12px - Medium rounded (default)
    • 16px - Well rounded
    • 24px - Very rounded, friendly feel
  4. Click Save.

Effect: These settings apply site-wide to all post cards, ensuring visual consistency across homepage, archives, and related posts.

Control which posts appear first on your homepage with visual indicators.

How Featured Posts Work: Posts marked as “featured” in Ghost Admin will automatically appear at the top of your homepage before regular posts. Featured posts are displayed in a special grid layout with the first post taking up 2 columns and 2 rows for maximum visual impact.

Marking Posts as Featured:

  1. Edit a post in Ghost Admin.
  2. Open post settings (gear icon).
  3. Toggle Feature this post ON.
  4. Update the post.

Display Behavior: Featured posts appear in order of newest first, followed by regular posts in chronological order.

Subscribe Form

Customize the title and description text above the subscription form:

  1. Create a new page in Ghost Admin.
  2. Add your custom title and description in the page content.
  3. Open page settings.
  4. Under Tags, add the tag #subscribe-form.
  5. Publish the page.

The footer automatically uses the most recently updated page with the #subscribe-form tag. Without this tag, default text appears.

Post Settings

Post Templates

Luno includes 6 post templates for different content presentations.

How to Apply:

  1. Edit a post in Ghost Admin.
  2. Open post settings (gear icon).
  3. Under Template, select your desired template.
  4. Click Update.

Available Templates:

Default

Default Post Layout
  • Standard post layout with feature image at top
  • Content with sidebar on desktop
  • Perfect for most blog posts

Classic (custom-post-classic)

Classic Post Layout
  • Traditional blog layout
  • Full-width feature image header
  • Content with related posts sidebar
  • Great for long-form articles

Video (custom-post-video)

Video Post Layout
  • Optimized for video content
  • Displays first video/embed from content in the header area
  • Automatically hides duplicate video in the content body
  • Ideal for video tutorials, interviews, or media-rich posts

Centered (custom-post-centered)

Centered Post Layout
  • All content centered in single column
  • No sidebar distractions
  • Related posts displayed in grid below content
  • Ideal for distraction-free reading

Inline Image (custom-post-inline-image)

Inline Image Post Layout
  • Feature image and title displayed side-by-side
  • Standard content layout with sidebar
  • Good for posts where image is secondary to content

No Image (custom-post-no-image)

No Image Post Layout
  • Clean, text-only layout
  • Featured image hidden from display
  • Minimal, distraction-free reading experience

Table of Contents

Auto-generate a navigable table of contents for long-form posts, making it easy for readers to jump between sections.

Enable:

  1. Edit a post or page in Ghost Admin.
  2. Add the internal tag #table-of-content (type “hash-table-of-content” in the tags field).
  3. Publish the post.

Features:

  • Automatically generates links from all H2 and H3 headings
  • Appears in the sidebar on desktop (hidden on mobile)
  • Sticky positioning - stays visible while scrolling
  • Active section highlighting - current section highlighted as you read
  • Smooth scroll navigation to sections
  • GitHub-style “On this page” design

Best For: Articles over 2000 words with multiple sections, tutorials, guides, documentation

Social Sharing

Social Sharing Dialog - Desktop
Social Sharing Dialog - Mobile

Built-in social sharing dialog with 12 popular platforms, making it easy for readers to share your content.

Platforms Supported: Facebook, X (Twitter), LinkedIn, Email, WhatsApp, Telegram, Threads, Bluesky, Mastodon, Reddit, Pinterest, LINE

Features:

  • Share button automatically appears in post footer
  • Beautifully designed dialog with platform icons
  • One-click link copying with “Copy link” button
  • Mobile-optimized layout
  • Opens in dialog/modal for clean UX

No configuration needed - works automatically on all posts and pages.

Automatic full-screen lightbox for all content images powered by PhotoSwipe, providing an immersive image viewing experience.

Features:

  • Click any image for full-screen view
  • Swipe or use arrow keys to navigate between images
  • Pinch to zoom on mobile
  • Image captions displayed
  • Keyboard accessible (arrow keys, ESC to close)
  • Smooth animations and transitions

No configuration needed - automatically activates for all images in post content.

Scroll Indicator

Show a circular reading progress indicator at the bottom right of the screen:

  1. Go to Settings > Design & branding > Customize.
  2. Under Site-wide, find Show scroll indicator.
  3. Toggle it on or off.
  4. Click Save.

The scroll indicator appears as a circular progress ring that fills as the user scrolls through the page and can be clicked to scroll back to the top.

Post Suggestions

Display related posts at the bottom of each article:

  1. Go to Settings > Design & branding > Customize.
  2. Under Post, find Show post suggestions.
  3. Toggle it on or off.
  4. Click Save.

Comments

Enable Ghost’s built-in commenting system:

  1. Go to Settings > Membership.
  2. Under Access, click Edit for Commenting.
  3. Choose who can comment (Nobody, All members, Paid members).
  4. Click Save.

Page Templates

Luno includes several templates for creating custom pages.

Authors Page

Authors Page

Create a page listing all site authors with their profiles:

  1. Create a new page in Ghost Admin (e.g., title “Our Team”).
  2. Open page settings (gear icon).
  3. Under Template, select Authors.
  4. Set the page URL to /authors.
  5. Publish the page.

Ensure author profiles in Staff settings have a profile image, bio, and any relevant social links filled out.

Tags Page

Tags Page

Create a page listing all tags used on your site:

  1. Create a new page (e.g., title “Topics”).
  2. Open page settings.
  3. Under Template, select Tags.
  4. Publish the page.

Add this page to your site navigation for easy access. For best results, ensure your tags have descriptions and feature images set under Tags in Ghost Admin.

Membership Page

Membership Page

Create a dedicated page to display your membership tiers and allow visitors to subscribe.

  1. Create a new page in Ghost Admin (e.g., title “Become a Member”).
  2. Add a Custom excerpt in the page settings to display a short introductory text below the title.
  3. Add any additional content, like an FAQ section, in the main editor. This will appear below the pricing tiers.
  4. You can also add a Feature image to the page, which will be displayed as a background for the pricing section.
  5. Open page settings (gear icon).
  6. Under Template, select Membership.
  7. Publish the page.

The page will automatically pull in your active tiers from Settings > Membership > Tiers.

Contact Page

Contact Page

Add a contact form to your site:

  1. Sign up for a form service like Formspree or Getform and get your unique form endpoint URL.
  2. Go to Settings > Design & branding > Customize.
  3. Under Site-wide, find Contact form url.
  4. Paste your form endpoint URL.
  5. Click Save.
  6. Create a new page (e.g., title “Contact Us”).
  7. Add any introductory text or contact details in the page editor.
  8. Open page settings.
  9. Under Template, select Contact.

Wide Page Template

Create full-width pages that break out of standard content constraints, perfect for landing pages, portfolios, or visual layouts.

Features:

  • Full-width feature image header with gradient overlay
  • Content area expands to full container width
  • Title and excerpt overlaid on feature image
  • No sidebar or content width restrictions

Setup:

  1. Create a new page in Ghost Admin.
  2. Add your content in the page editor.
  3. Optionally add a feature image for dramatic header effect.
  4. Open page settings (gear icon).
  5. Under Template, select Wide Page.
  6. Publish the page.

Use Cases: Landing pages, full-width product showcases, portfolio pages, visual presentations

Shop Template

Shop Page Template

Specialized template for displaying products in a professional grid layout, ideal for e-commerce or product catalogs.

Features:

  • Full-width feature image header with cover style
  • Ghost product cards automatically arranged in responsive 3-column grid
  • Responsive: 1 column on mobile, 2 columns on tablet, 3 columns on desktop
  • Other content (text, images) spans full width between products

Setup:

  1. Create a new page in Ghost Admin (e.g., title “Products” or “Shop”).
  2. Add Ghost product cards in the editor (use the + menu and select “Product”).
  3. Optionally add introductory text or sections between products.
  4. Add a feature image for an eye-catching header.
  5. Open page settings (gear icon).
  6. Under Template, select Shop.
  7. Publish the page.

Use Cases: Product catalogs, digital downloads showcase, services listing, online shop pages

Sign In and Sign Up Pages

Sign In Page
Sign In Page
Sign Up Page
Sign Up Page

Create custom sign-in and sign-up pages with your own content and styling, or use Ghost’s built-in portal.

Using Ghost Portal (Default):

By default, Luno uses Ghost’s built-in authentication portal for sign-in and sign-up. No additional setup required.

Using Custom Pages:

To use custom sign-in/sign-up pages instead of Ghost’s portal:

  1. Go to Settings > Design & branding > Customize.
  2. Under Site-wide, find Use custom sign-in/sign-up pages.
  3. Toggle it ON.
  4. Click Save.

Creating the Sign In Page:

  1. Create a new page in Ghost Admin (e.g., title “Sign In”).
  2. Add custom content in the page editor (welcome message, instructions, etc.).
  3. Optionally add a feature image that will be displayed on the right side of the page.
  4. Open page settings.
  5. Under Template, select Sign In.
  6. Set the page slug to sign-in for consistent URLs.
  7. Publish the page.

Creating the Sign Up Page:

  1. Create a new page in Ghost Admin (e.g., title “Join Us”).
  2. Add custom content in the page editor (benefits, call-to-action text, etc.).
  3. Optionally add a feature image for visual appeal.
  4. Open page settings.
  5. Under Template, select Sign Up.
  6. Set the page slug to sign-up for consistent URLs.
  7. Publish the page.

Image Fallback: If no feature image is set for the page, the theme will automatically use your site’s cover image as a fallback for the visual side of the layout.

Advanced CSS Customization

Luno allows you to customize visual elements beyond the Ghost admin settings by overriding CSS variables. This gives you fine-grained control over colors, shapes, and sizes without editing theme files.

How to Add Custom CSS:

  1. Go to Settings > Code injection in Ghost Admin.
  2. In the Site Header section, add a <style> tag with your custom CSS variables.
  3. Click Save.

Example:

<style>
  :root {
    /* Color Customization */
    --color-page: #ffffff;                    /* Main background color */
    --color-page-alt: #f3f4f6;                /* Secondary background color */
    --color-content: #374151;                 /* Main text color */
    --color-content-alt: #111827;             /* Headings and emphasis */
    --color-stroke: #e5e7eb;                  /* Border color */

    /* Button Customization */
    --button-border-radius: 0.5rem;           /* Slightly rounded buttons */
    --button-background-color: #2563eb;       /* Button background */

    /* Input Field Customization */
    --input-border-radius: 0.375rem;          /* Slightly rounded inputs */

    /* Branding */
    --site-logo-height: 3rem;                 /* Larger logo */
  }
</style>

Customizable Variables

Color Variables:

  • --color-page - Main background color (Default: #ffffff in light mode)
  • --color-page-alt - Secondary background color (cards, inputs)
  • --color-content - Main text color
  • --color-content-alt - Headings and emphasized text color
  • --color-stroke - Border and separator color

Button Variables:

  • --button-border-radius - Controls button roundness (Default: 2.5rem)
  • --button-background-color - Button background color

Input Field Variables:

  • --input-border-radius - Controls input field roundness (Default: 2.5rem)

Branding Variables:

  • --site-logo-height - Height of your site logo (Default: 2.5rem)

Code Block Variable:

  • --pre-background-color - Background color for code blocks

Best Practices:

  • Test your changes in your browser’s developer tools first before adding them permanently
  • Keep a backup copy of your custom CSS
  • Use color values that maintain good contrast and readability
  • Changes apply site-wide, affecting all buttons, inputs, and styled elements

Development

Luno is a modern Ghost theme built with:

  • Vite for build tooling
  • Tailwind CSS v4 for styling
  • TypeScript for enhanced JavaScript functionality
  • PhotoSwipe for image galleries
  • Infinite scroll for content loading

Development Setup

To edit the theme files:

  1. Download the theme ZIP file from Ghost Admin.
  2. Unzip the file on your local machine.
  3. Open the theme folder in your preferred code editor.

The theme uses Tailwind CSS for styling and TypeScript for scripts. You’ll need to set up a development environment to work with these files.

Setting Up the Development Environment

  1. Ensure you have Node.js installed on your system.
  2. Open a terminal/command prompt in the theme folder.
  3. Run npm install to install the required dependencies.

Working with Tailwind and TypeScript

The theme uses Vite to bundle and compile Tailwind CSS and TypeScript files. To work with these files:

  1. Make your changes in the assets/css/*.css or assets/js/*.ts files.
  2. Run npm run dev to start Vite in watch mode. This will automatically compile your changes.
  3. To build for production, run npm run build.

Important Files and Folders

  • assets/css/: Contains CSS files including variables.css for theme variables
  • assets/js/: Contains TypeScript files including web components
  • partials/: Contains reusable Handlebars template parts
  • locales/: Contains 46 language translation files
  • tailwind.config.cjs: Tailwind configuration
  • vite.config.js: Vite build configuration

Remember to thoroughly test all changes across different devices and browsers before deploying to a live site.

Language Translations

This theme is translated into 46 languages. The translation files are located in the locales/ folder.

LanguageCode
🇿🇦 Afrikaansaf
🇦🇱 Albaniansq
🇸🇦 Arabicar
🇧🇦 Bosnianbs
🇧🇷 Brazilian Portuguesept-BR
🇧🇬 Bulgarianbg
🇪🇸 Catalanca
🇨🇳 Chinesezh
🇹🇼 Chinese (Traditional)zh-Hant
🇭🇷 Croatianhr
🇨🇿 Czechcs
🇩🇰 Danishda
🇳🇱 Dutchnl
🇬🇧 Englishen
🌍 Esperantoeo
🇫🇮 Finnishfi
🇫🇷 Frenchfr
🇩🇪 Germande
🇨🇭 German (Swiss)de-CH
🇬🇷 Greekel
🇭🇺 Hungarianhu
🇮🇸 Icelandicis
🇮🇩 Indonesianid
🇮🇹 Italianit
🇯🇵 Japaneseja
🇰🇷 Koreanko
🇱🇹 Lithuanianlt
🇲🇰 Macedonianmk
🇲🇾 Malayms
🇲🇳 Mongolianmn
🇳🇴 Norwegianno
🇳🇴 Norwegian Nynorsknn
🇵🇱 Polishpl
🇵🇹 Portuguesept
🇷🇴 Romanianro
🇷🇺 Russianru
🏴󠁧󠁢󠁳󠁣󠁴󠁿 Scottish Gaelicgd
🇷🇸 Serbiansr
🇱🇰 Sinhalasi
🇸🇰 Slovaksk
🇸🇮 Sloveniansl
🇪🇸 Spanishes
🇸🇪 Swedishsv
🇹🇭 Thaith
🇹🇷 Turkishtr
🇺🇦 Ukrainianuk
🇺🇿 Uzbekuz
🇻🇳 Vietnamesevi

To use a different language:

  1. In Ghost Admin, go to Settings > General.
  2. Set the “Site language” to the desired language code (e.g., “es” for Spanish).

To modify translations:

  1. Open the corresponding language file in the locales/ folder (e.g., es.json for Spanish).
  2. Edit the translations as needed.
  3. Save the file and rebuild the theme.

Third Party Materials

These resources helped to make this theme possible. A big thank you to the creators and contributors for their work.

JavaScript && CSS

Fonts


Support

If you need additional help with the theme, please contact me at support@luxethemes.com.

Good luck with your site!

All the best,
Stefan from LuxeThemes


Changelog

All notable changes to this theme will be documented here

1.0.0

  • Initial release of the theme