Configuration

This guide shows you the configuration file for latest release and provides all the necessary instructions to configure this project. You can also find the default configuration file in settings.json.

Configuration Keys

Username

Changes user name of prompt and page title

"username": "Your Name"

Theme

Theme colors throughout the app

"theme": {
   "name": "Default",
   "backgroundColor": "#121317",
   "windowColor": "#1e212b",
   "textColor": "#e2e2e2",
   "black": "#16161e",
   "red": "#ec6183",
   "green": "#2ed8a2",
   "yellow": "#e8b195",
   "blue": "#2bc3de",
   "magenta": "#d1aff8",
   "cyan": "#62e0e2",
   "white": "#e2e2e2",
   "gray": "#97989d"
}

Wallpaper

You can add wallpapers to your start page, fade in using fancy easings and blur the image.

Tip

For the wallpaper, you can use svg, png, jpg, webp or gif.

"wallpaper": {
   "url": "assets/default-wallpaper.svg", // URL of the image
   "easing": "ease-in-out", // Easing: ease-in, ease-out, ease-in-out
   "fadeIn": true,          // Fade In image after load   
   "blur": true             // Blur image
}

Warning

Safari handles SVG's in a different way. If you encounter issues with wallpapers on Safari, you might need to fix the SVG file or change the wallpaper with an image format such as PNG and JPG.

Terminal

The window and background related settings

"terminal": {
   "fixedHeight": true,  // Locks window height to list view (other views such as help won't change the height)
   "windowGlow": true,   // Enables or disables terminal window border glow
   "windowGlowColor": "#291f3325", // Sets terminal window border glow color
   "textGlow": false,    // Enables text glow
   "opacity": 1,         // Changes terminal window opacity (Between 0 and 1)
   "blur": 0             // Sets terminal background blur to given integer in pixels (Works best with wallpaper and overrides both terminal opacity  and terminal background color)
}

Prompt

The mighty prompt line for your input

"prompt": {
   "ctrlC": true,               // Enable `CTRL+C` key to clear the prompt    
   "placeholder": "command...", // Placeholder text for command line (can be empty)
   "userColor": "green",        // User name color
   "atColor": "gray",           // @ symbol color
   "hostColor": "magenta",      // Browser name display color
   "promptColor": "magenta",    // The prompt symbol color
   "promptSymbol": "❯",         // Prompt symbol (defaults to ❯)
   "caretcolor": "green",       // Caret color (the | symbol on input)
   "selectionBg": "yellow",     // Text selection background color
   "selectionFg": "black"       // Text selection foreground color
},

Fetch

Displays time, date, system and browser information. Trying to mimic neofetch command.

Tip

If the fetch image is svg, png or gif, it should also apply as a favicon.

For fetch.data;

• You can reorder them by changing the order of the array.
• You can remove the ones you don't want to display.
• You can add new ones by adding new items to the array. For example, Sample Title: Sample description will display even without a variable
• Use seperator to add a space between items
• Use colors to display the colors of the theme

"fetch": {
   "timeFormat": "HH:mm",       // Time format
   "dateFormat": "DD/MM/YYYY",  // Date format
   "titleColor": "yellow",      // Title color
   "image": "data/assets/icon.svg",  // Image URL for fetch and favicon
   "data": [
      "Time: {time}",              // Displays time
      "Date: {date}",              // Displays date
      "{seperator}",               // Adds blank line
      "OS: {osName} {osVersion}",  // Displays OS name and OS version
      "Theme: {theme}",            // Displays active start page theme name
      "{seperator}",               // Adds blank line
      "Browser: {browser} {browserVersion}", // Displays browser name and browser version
      "Engine: {engineName}",      // Displays browser engine
      "{seperator}",               // Adds blank line
      "{colors}"                   // Shows theme colors
   ]
}

URL

Configuration for URL launching (ie. github.com)

"urlLaunch": {
   "target": "_self",        // Launches URL with target _self (within same tab) or _blank (new window)
   "hoverColor": "purple"    // URL hover color
},

Search

Defines the default search engine and sets aliases for additional engines

"search": {
   "default": "https://google.com/search?q=", // Search URL
   "target": "_self",                         // URL Target (_self opens within the page)
   "shortcutRegex": "([A-Za-z0-9]+) (.*)",    // Regex for splitting prefix and query
   "shortcuts": [
      {
         "alias": "g",                            // Alias for search engine prefix (ie. g for Google)
         "name": "Google Search",                 // Display name for help command
         "url": "https://google.com/search?q={}"  // URL - command replaces {} with query
      }
   ]
}

Sections

Defines each link group

"sections": { 
   "list": [  // Contains sections
      {
         "title": "Dev",   // Section title
         "color": "green", // Section title color
         "align": "left",  // Text alignment of each section
         "links": [        // Contains section links
            {
               "name": "GitHub",             // Link name
               "url": "https://github.com",  // Link URL
               "icon": "mdi:github"          // Link icon (use https://iconify.design for icons)
            }
         ]
      }
   ]
}