Creating your own themes

[jeffvli]

Custom themes are now avaiable in Sonixd (0.5.0+)!

CHANGELOG

0.10.0

• Removed colors.button.link

0.9.0

• Added other.coverArtBorderRadius

0.6.0

• Removed fonts.size.pageTitle

Creating a theme

The recommended method of creating a theme is to copy from one of the following default theme templates and make changes from there. The theme template is strict with no fallbacks, so you will need to make sure that every JSON property is accounted for.

As I find ways to improve the theming, I will try my best to not introduce breaking changes, but this is not guaranteed.

Default Dark

{
  "label": "Default Dark",
  "value": "defaultDark",
  "type": "dark",
  "fonts": {
    "size": {
      "page": "14px",
      "panelTitle": "20px"
    }
  },
  "colors": {
    "primary": "#2196F3",
    "layout": {
      "page": {
        "color": "#D8D8D8",
        "colorSecondary": "#888e94",
        "background": "linear-gradient(0deg, rgba(20,21,24,1) 32%, rgba(25,25,25,1) 100%)"
      },
      "playerBar": {
        "color": "#D8D8D8",
        "colorSecondary": "#888e94",
        "background": "#101010",
        "button": {
          "color": "rgba(240, 240, 240, 0.8)",
          "colorHover": "#FFFFFF"
        }
      },
      "sideBar": {
        "background": "#101010",
        "button": {
          "color": "#D8D8D8",
          "colorHover": "#FFFFFF"
        }
      },
      "titleBar": {
        "color": "#FFFFFF",
        "background": "#101010"
      },
      "miniPlayer": {
        "background": "#141518"
      }
    },
    "button": {
      "default": {
        "color": "#D8D8D8",
        "colorHover": "#FFFFFF",
        "background": "#212227",
        "backgroundHover": "#3C3F43"
      },
      "primary": {
        "color": "#FFFFFF",
        "colorHover": "#FFFFFF",
        "backgroundHover": "#3B89EC"
      },
      "subtle": {
        "color": "#D8D8D8",
        "colorHover": "#D8D8D8",
        "backgroundHover": "transparent"
      },
      "link": {
        "color": "#2196F3",
        "colorHover": "#3B89EC"
      }
    },
    "card": {
      "overlayButton": {
        "color": "#FFFFFF",
        "background": "transparent",
        "opacity": 0.8
      }
    },
    "contextMenu": {
      "color": "#D8D8D8",
      "colorDisabled": "#6A6F76",
      "background": "#151619",
      "backgroundHover": "#292D33"
    },
    "input": {
      "color": "#D8D8D8",
      "background": "#212227",
      "backgroundHover": "#353A45",
      "backgroundActive": "rgba(240, 240, 240, .2)"
    },
    "nav": {
      "color": "#D8D8D8"
    },
    "popover": {
      "color": "#D8D8D8",
      "background": "#151619"
    },
    "slider": {
      "background": "#3C3F43",
      "progressBar": "#888E94"
    },
    "spinner": {
      "background": "rgba(233, 235, 240, 0.3)",
      "foreground": "#2196F3"
    },
    "table": {
      "selectedRow": "rgba(150, 150, 150, .3)"
    },
    "tag": {
      "background": "#3C3F43",
      "text": "#E2E4E9"
    },
    "tooltip": {
      "color": "#D8D8D8",
      "background": "#151619"
    }
  },
  "other": {
    "button": {
      "borderRadius": "15px"
    },
    "coverArtBorderRadius": "5px",
    "coverArtFilter": "none",
    "card": {
      "border": "none",
      "hover": {
        "transform": "none",
        "transition": "none",
        "filter": "none"
      },
      "image": {
        "borderTop": "2px transparent ridge",
        "borderRight": "2px transparent ridge",
        "borderBottom": "2px transparent ridge",
        "borderLeft": "2px transparent ridge",
        "borderRadius": "15px"
      },
      "info": {
        "borderTop": "none",
        "borderRight": "none",
        "borderBottom": "none",
        "borderLeft": "none",
        "borderRadius": "0px"
      }
    },
    "input": {
      "borderRadius": "15px"
    },
    "miniPlayer": {
      "height": "450px",
      "opacity": 0.95
    },
    "panel": {
      "borderRadius": "0px"
    },
    "playerBar": {
      "borderTop": "1px solid rgba(240, 240, 240, .15)",
      "borderRight": "none",
      "borderBottom": "none",
      "borderLeft": "none",
      "filter": "none"
    },
    "tag": {
      "borderRadius": "15px"
    },
    "tooltip": {
      "border": "1px #3c3f43 solid",
      "borderRadius": "5px"
    }
  }
},

Default Light

{
  "label": "Default Light",
  "value": "defaultLight",
  "type": "light",
  "fonts": {
    "size": {
      "page": "14px",
      "panelTitle": "20px"
    }
  },
  "colors": {
    "primary": "#285DA0",
    "layout": {
      "page": {
        "color": "#000000",
        "colorSecondary": "#4c4c4c",
        "background": "linear-gradient(0deg, rgba(255,255,255,1) 64%, rgba(220,220,220,1) 100%)"
      },
      "playerBar": {
        "color": "#FFFFFF",
        "colorSecondary": "#888e94",
        "background": "#212121",
        "button": {
          "color": "rgba(240, 240, 240, 0.8)",
          "colorHover": "#FFFFFF"
        }
      },
      "sideBar": {
        "background": "#212121",
        "button": {
          "color": "#D8D8D8",
          "colorHover": "#FFFFFF"
        }
      },
      "titleBar": {
        "color": "#FFFFFF",
        "background": "#212121"
      },
      "miniPlayer": {
        "background": "rgba(255,255,255,1)"
      }
    },
    "button": {
      "default": {
        "color": "#575757",
        "colorHover": "#000000",
        "background": "#DFDFE2",
        "backgroundHover": "#D2D2D6"
      },
      "primary": {
        "color": "#FFFFFF",
        "colorHover": "#FFFFFF",
        "backgroundHover": "#347AD3"
      },
      "subtle": {
        "color": "#575757",
        "colorHover": "#575757",
        "backgroundHover": "transparent"
      },
      "link": {
        "color": "#575757",
        "colorHover": "#575757"
      }
    },
    "card": {
      "overlayButton": {
        "color": "#FFFFFF",
        "colorHover": "#FFFFFF",
        "background": "transparent",
        "backgroundHover": "#285DA0",
        "opacity": 0.8
      }
    },
    "contextMenu": {
      "color": "#575757",
      "colorDisabled": "#BABABA",
      "background": "#FFFFFF",
      "backgroundHover": "#D2D2D6"
    },
    "input": {
      "color": "#000000",
      "background": "#F7F7F7",
      "backgroundHover": "#E5E5EA",
      "backgroundActive": "rgba(0, 0, 0, .2)"
    },
    "nav": {
      "color": "#000000"
    },
    "popover": {
      "color": "#000000",
      "background": "#FFFFFF"
    },
    "slider": {
      "background": "#3C3F43",
      "progressBar": "#888E94"
    },
    "spinner": {
      "background": "rgba(0, 0, 0, 0.3)",
      "foreground": "#285DA0"
    },
    "table": {
      "selectedRow": "rgba(150, 150, 150, .5)"
    },
    "tag": {
      "background": "#DFDFE2",
      "text": "#000000"
    },
    "tooltip": {
      "color": "#000000",
      "background": "#FFFFFF"
    }
  },
  "other": {
    "button": {
      "borderRadius": "15px"
    },
    "coverArtBorderRadius": "5px",
    "coverArtFilter": "none",
    "card": {
      "border": "none",
      "hover": {
        "transform": "none",
        "transition": "none",
        "filter": "none"
      },
      "image": {
        "borderTop": "2px transparent ridge",
        "borderRight": "2px transparent ridge",
        "borderBottom": "2px transparent ridge",
        "borderLeft": "2px transparent ridge",
        "borderRadius": "15px"
      },
      "info": {
        "borderTop": "none",
        "borderRight": "none",
        "borderBottom": "none",
        "borderLeft": "none",
        "borderRadius": "0px"
      }
    },
    "input": {
      "borderRadius": "15px"
    },
    "miniPlayer": {
      "height": "450px",
      "opacity": 0.95
    },
    "panel": {
      "borderRadius": "0px"
    },
    "playerBar": {
      "borderTop": "1px solid rgba(240, 240, 240, .15)",
      "borderRight": "none",
      "borderBottom": "none",
      "borderLeft": "none",
      "filter": "none"
    },
    "tag": {
      "borderRadius": "15px"
    },
    "tooltip": {
      "border": "1px #3c3f43 solid",
      "borderRadius": "5px"
    }
  }
},

Adding your custom theme

WARNING: Any changes made to the themesDefault setting in the config will be overridden on application start

Adding custom themes to Sonixd is a straightforward process:

1. Open the Sonixd application
2. Navigate to the Other tab in the Config page
3. Click the Open settings JSON button in the Advanced panel (Make sure that .json files in your OS have a default application)
4. Copy your JSON theme configuration into the themes array in the settings file and save
5. Navigate to the Look & Feel tab in the Config page and select your new theme!

"themes": [
  // your theme goes in here
],

Contribute your theme to Sonixd

I am open to accepting community-created themes!

1. Fork the repository
2. Open the repository to the file setDefaultSettings.ts
3. Search for the line settings.setSync('themesDefault',
4. Format and add your theme to the end of the themesDefault array
5. Commit and push to your local/remote forked branch
6. Create a pull request from your forked branch into my repository