Tutorial
Design Philosophy
Getting Started
HotkeyLauncherExtensions
Built-in Features
Window SwitchingWindow ManagementSystem CommandsNora AICloud SyncThemesHTTP ProxyAdvanced Settings
Built-in Extensions
Quick Web SearchFile SearchClipboard HistorySnippetsBookmarksMCPQuick CalculatorAI ScreenshotEmoji FinderEncoding ToolkitIP AddressFake Data GeneratorProcess Killer
Developer Docs
OverviewQuick StartProject StructureCreate Your First ExtensionRun & DebugBuild & PublishDeveloping Sliprail ThemesFAQAPI Docs
Tutorial

Developing Sliprail Themes

Sliprail themes allow you to customize the appearance and feel of the launcher. By creating a theme, you can define styles such as colors, padding, and more.

manifest.json Field Explanation

Each theme requires a manifest.json file to define its metadata. Here are all the supported fields:

  • id: A unique identifier for your theme, used to identify it in the system.
  • main: Points to the primary style file (e.g., main.css). This file is loaded as a standalone sheet. Avoid @import or splitting styles across multiple CSS files.
  • type: Must be set to "Theme", indicating that this is a theme.
  • preview: The local filename of a preview image for the theme, such as preview.png.
  • icon: Optional, an icon for the theme, which can be a URL or data URI.
  • theme: Optional, an object containing the following sub-fields:
    • appearance: Optional, sets the appearance mode of the theme, which can be "Light" or "Dark".
    • extend: Optional, an object that defines how much decorative elements can extend beyond the main window. It includes:
      • top: Top extension distance, a number.
      • right: Right extension distance.
      • bottom: Bottom extension distance.
      • left: Left extension distance.

All fields should be written in JSON format, ensuring correctness.

Theme Styling

Sliprail themes are implemented by loading a main.css file. To customize the interface effectively, you should target the following structural class names:

  • .window: The window container that frames the entire launcher interface. This container is designed specifically for background images, allowing them to extend beyond the main content area for a seamless look. Do not set background colors on .window, as it is only intended for background images.
  • .window-foreground: A special layer for foreground decorative elements (such as character illustrations or overlays). This layer covers the entire window but does not interfere with mouse interactions.
  • .main: The primary rendering container for the launcher's content. This is where you should set background colors and other core visual styles. Note that there is only a 10px gap between this area and the outer window edge. If you add effects like shadows, keep them subtle and within this small space to avoid them being cut off or looking unnatural.
  • .search-input-box: Style the search input container. Since no placeholder is used, avoid applying placeholder-specific styles.
  • .results: The container that holds and displays all search result items.
  • .result-item: Styles for individual search result entries. To ensure the best user experience, please do not add animation or transition effects to this element. Since the list updates instantly as you type, animations can cause a noticeable delay and make the interface feel sluggish. Additionally, avoid customizing the height or adding external spacing (margins/padding) to maintain visual balance.
  • .result-item-selected: Styles for the active or highlighted search result (for example, when navigating with the keyboard).
  • .result-item-title: Styles for the title text of each search result.
  • .result-item-subtitle: Styles for the descriptive subtitle or additional information in each result.
  • .app-icon: Styles the application icon in search results. The default size is 30px. We recommend keeping the default size, but you can modify it if necessary.

Leverage these selectors in your CSS to define layouts, colors, and spacing that match your design vision.

Testing Your Theme

During development, you can easily test your theme:

  1. Open Sliprail settings.
  2. Click on the "All Themes" option.
  3. In the popup window, select "Import unpacked theme".
  4. Browse and select your theme folder to load and test the theme.

Once you are satisfied with your creation, you can use the GenerateThemePreview command to automatically create a high-quality preview image of your theme.

Creating and Publishing Themes

Sliprail themes are simple and consist only of CSS files and images. There are no dependencies to manage, no debugging required, and no packaging needed.

Creating a Public Theme

If you want other users to be able to use your theme:

  1. Create a GitHub Repository: Create a public repository on GitHub to host your theme code.
  2. Register Your Theme: Visit https://account.fengcen.io/developer to create a new Sliprail theme, and provide the GitHub repository link. After registration, you will receive a unique theme ID.
  3. Configure manifest.json: In your theme's manifest.json file, set the id field to the theme ID you obtained.
  4. Develop Your Theme: Write your CSS files and add images as needed.
  5. Publish and Deploy: Push your code to the GitHub repository. After publishing, it usually takes about a day for the theme to become visible in the Sliprail store.

Creating a Private Theme

For themes intended for personal use only:

  1. Create a Private Theme: On https://account.fengcen.io/developer, create a new Sliprail theme with "private" visibility, no GitHub link needed. Obtain the theme ID.
  2. Configure manifest.json: Set the id field in manifest.json.
  3. Develop Your Theme: Create your theme files.
  4. Load Locally: In Sliprail's theme management interface, load the local theme folder for testing.

Theme Discovery

Users can discover and install your themes through the Sliprail store. We encourage creating high-quality themes to enhance the user experience.

Next Steps

Now that you know how to develop Sliprail themes, you can start creating your own and sharing them with the community.