Change the looks

Customizing the design

The background

One of the most common customizations in any theme is probably the background image. Sugar supports any file format supported by Qt5. This includes but is not limited to JPEG, PNG, GIF, BMP and TIFF. Transparency is fully supported.
When choosing your Background= make sure to optimize it if your system is on the lower end. The value must be a case sensitive string matching exactly the name of your file provided in the root directory of the theme.
To make life easier the string can be an absolute path to a file in a directory writable by a regular user.

Considerations

• To achieve a pleasant visual effect in your login screen opt for detailed close-ups over far distanced shots and cut off on purpose. This will make your brain think there's more to the image than in fact it has to offer and let your device or screen appear bigger than it actually is.

• Usually your screen will be wider than it is high. Sugar hands forty percent of the screens width to the interface and the rest to the background. This results in the background being roughly a square on most wide screens.
  Why is this of interest you say?
  By default Sugar has ScaleImageCropped= set to true. This will make your picture fill proportionally into the remaining sixty percent of your screens width and crop everything off that results out of bounds. So in most cases using a landscape oriented image the excess will get cut off equally on its sides and a portrait oriented image will get cut off equally on its top and bottom.
  Thus a good rule of thumb is to have your area of interest be roughly a square in the center of the image.

• On the contrary if you change ScaleImageCropped= to false the picture will make sure to fit itself into your screen even if this means that there may be white space left over. Using a landscape oriented image this will mean whitespace on top and bottom and vice versa if using a portrait oriented image it will result in extra whitespace on the sides. This will visually throw off the design of the theme with most image material with one exception:

Exploiting illustrations

If you had a real nice illustration that is in itself a closed form (like any of these) you should actually set ScaleImageCropped= to false to not have anything cut off and make the whole picture fit into your screen. This can also be a very nice effect. The theme comes with one of these illustrations so you can try it out right away.

The interface elements

Overall color scheme

• ThemeColor= is pretty straight forward. It will change the default color used for all elements in the interface when not active or hovered. The actual colors of hover and focus states are variations of this. The provided value must be a string containing a HEX color value such as "#AA33FF" or a SVG color after the SVG naming conventions supported by Qt5.

• AccentColor= will independently set a color for when you hover or give keyboard focus (TAB) to the different interface elements. It's a good idea to make this a contrasting color to your before set theme color. Same rules apply as for ThemeColor.

Layout and controls

• RoundCorners= will—guess what—round the corners of the user name and password input field and the login button. Can be left empty if you just want sharp clean rectangles. The value can be any positive integer but will activate anti-aliasing on the effected elements which in turn can appear more blurry than with sharp corners.

• ScreenPadding= is also quite verbose as it lets you reserve a white space around your whole screen. The default is 0, no white space at all. If you let this empty it will create a pre-defined value that is default to the Qt Quick component that is used for this. The value can be any positive integer.

• Font= will change the default system font selected by SDDM. This refers to the name of the font-family as in "Noto Sans" or "DejaVu Serif". It is your responsibility to make sure that the font is available to the X root user. Please refer to the Arch wiki if in doubt. Value must be a string with the font family name matching exactly that of the fonts internals.

• FontSize= accepts any positive integer and should usually be somewhere in between 10 and 20 depending on your screen resolution since it sets the fonts in points rather than in pixel. This variable should only be given a fixed value if you have problems reading the interface because of very small typography.