Catppuccin Startpage

🪴 Overview

A minimalistic and customisable startpage featuring the Catppuccin palettes. Designed for both aesthetics and functionality, with seamless hosting on GitHub Pages. This startpage is based on dawn, which offers additional functionality. I have refined the page to match my dotfiles; feel free to explore them as well.

🧠 Main Principles

• Minimalism in all aspects
• Consistency throughout the user interface and codebase
• Simplicity in design and configuration
• Unified style and reduced visual noise

🎨 Supported Palettes

• Latte
• Frappé
• Macchiato
• Mocha

⭐ Features

• Automatic theme switching based on system settings (light/dark mode)
• Customisable startpage / bookmarks manager
• Search bar with multiple engines
• Weather widget
• Clock widget with 12/24-hour format and multiple time zones support

🪵 Usage

1. Fork this repository and clone it
2. Optionally remove the .github directory, as it contains only PR templates, issue labels, etc., that are linked to this repository
3. Update userconfig.js:
   • Set the desired palette: latte / frappe / macchiato / mocha
   • Set your location for the weather widget
   • Update the number of tabs and their banners
   • Update bookmarks and quick links for those you use most

Tip

You can find icons for your bookmarks using tabler-icons.

To reduce icon loading times, you may install the icon font locally and activate the option "localIcons": true in the configuration to disable remote styles.

To improve privacy and loading performance, you can now use local fonts instead of Google Fonts CDN by setting "localFonts": true in your configuration. This feature stores all required fonts (Roboto, Nunito, Raleway, and Material Icons) locally in the repository, eliminating external requests to Google's servers.

As Homepage

• Click the menu button and select Options/Preferences
• Click the home panel
• Click the menu next to 'Homepage and new windows', choose to show custom URLs, and add your GitHub Pages link

As New Tab

You can use different add-ons or extensions for this.

• If you use Firefox-based browsers: Custom New Tab Page and make sure to enable "Force links to open in the top frame (experimental)" in the extension's preferences page
• If you use Chromium-based browsers (Brave / Chrome): Custom New Tab URL

🔎 Search

The search dialogue allows you to display a search bar with various search engines defined in the configuration. To run search dialogue, simply press s and type your query.

To select search engine, simply prefix the query with the corresponding !<id>. By default, the defined search engines are:

• !p: PerplexityAI
• !g: Google
• !d: DuckDuckGo (default)

⏰ Clock

The startpage now features an enhanced clock component with:

• Support for 12-hour and 24-hour time formats
• Multiple clocks for different time zones
• Customisable formatting options
• Locale support for regional time display

You can configure the clock format and add additional time zones in your userconfig.js:

clock: {
  format: "h:i", // 24-hour format
  icon_color: palette.maroon,
},
// Optional: Add multiple clocks for different time zones
additionalClocks: [
  {
    label: "NYC", // Label for the clock
    timezone: "America/New_York", // IANA timezone name (handles DST automatically)
    format: "k:i p", // 12-hour format with leading zero (09:30 PM)
    locale: "en-US", // Locale for date/time formatting
    icon_color: palette.blue // Optional different icon color
  }
],

For full documentation of clock format options, see.

🖼️ Available Banners

banner_01	banner_02	banner_03	banner_04

banner_05	banner_06	banner_07	banner_08

banner_09	banner_10	banner_11	banner_12

banner_13	banner_14	banner_15	banner_16

banner_17	banner_18