Themes

MAKI uses qlementine, thus, themes are fully (or almost fully customizable). Here we provide an example and discuss the different customization options available.

Example

Below we haev the configuration for the default Light Yaru (inspired by the Yaru theme in Ubuntu).

{
  "meta": {
    "name": "Light Yaru",
    "author": "MAKI",
    "version": "1.0.0"
  },
  "animationDuration": 192,
  "backgroundColorMain1": "#f7f7f7ff",
  "backgroundColorMain2": "#ffffffff",
  "backgroundColorMain3": "#efefefff",
  "backgroundColorMain4": "#e5e5e5ff",
  "backgroundColorTabBar": "#fafafaff",
  "backgroundColorWorkspace": "#eeeeeeff",
  "borderColor": "#d6d1ccff",
  "borderColorDisabled": "#e9e7e5ff",
  "borderColorHovered": "#c9c4c0ff",
  "borderColorPressed": "#bcb8b4ff",
  "borderRadius": 6,
  "borderWidth": 1,
  "checkBoxBorderRadius": 4,
  "controlDefaultWidth": 96,
  "controlHeightLarge": 28,
  "controlHeightMedium": 24,
  "controlHeightSmall": 16,
  "dialGrooveThickness": 4,
  "dialMarkLength": 8,
  "dialMarkThickness": 2,
  "dialTickLength": 4,
  "dialTickSpacing": 4,
  "focusAnimationDuration": 384,
  "focusBorderWidth": 2,
  "focusColor": "#e954206a",
  "fontSize": 12,
  "fontSizeH1": 34,
  "fontSizeH2": 26,
  "fontSizeH3": 22,
  "fontSizeH4": 18,
  "fontSizeH5": 14,
  "fontSizeMonospace": 13,
  "fontSizeS1": 10,
  "iconSize": 16,
  "iconSizeExtraSmall": 12,
  "iconSizeLarge": 32,
  "iconSizeMedium": 24,
  "menuBarItemBorderRadius": 2,
  "neutralColor": "#e6e1dcff",
  "neutralColorDisabled": "#efedebff",
  "neutralColorHovered": "#d8d4cfff",
  "neutralColorPressed": "#cac6c2ff",
  "primaryAlternativeColor": "#c64600ff",
  "primaryAlternativeColorDisabled": "#e3b297ff",
  "primaryAlternativeColorHovered": "#ba4200ff",
  "primaryAlternativeColorPressed": "#ae3e00ff",
  "primaryColor": "#e95420ff",
  "primaryColorDisabled": "#f0b7a3ff",
  "primaryColorForeground": "#ffffffff",
  "primaryColorForegroundDisabled": "#ffffff66",
  "primaryColorForegroundHovered": "#ffffffff",
  "primaryColorForegroundPressed": "#ffffffff",
  "primaryColorHovered": "#db4f1eff",
  "primaryColorPressed": "#cd4a1cff",
  "progressBarGrooveHeight": 6,
  "scrollBarMargin": 0,
  "scrollBarThicknessFull": 12,
  "scrollBarThicknessSmall": 6,
  "secondaryAlternativeColor": "#6e6259ff",
  "secondaryAlternativeColorDisabled": "#6e62593f",
  "secondaryAlternativeColorHovered": "#675c54ff",
  "secondaryAlternativeColorPressed": "#61564eff",
  "secondaryColor": "#2d2926ff",
  "secondaryColorDisabled": "#2d292633",
  "secondaryColorForeground": "#ffffffff",
  "secondaryColorForegroundDisabled": "#ffffff3f",
  "secondaryColorForegroundHovered": "#ffffffff",
  "secondaryColorForegroundPressed": "#ffffffff",
  "secondaryColorHovered": "#2a2724ff",
  "secondaryColorPressed": "#282421ff",
  "semiTransparentColor1": "#e9542018",
  "semiTransparentColor2": "#e9542023",
  "semiTransparentColor3": "#e9542028",
  "semiTransparentColor4": "#e954202d",
  "shadowColor1": "#00000022",
  "shadowColor2": "#00000044",
  "shadowColor3": "#00000066",
  "sliderAnimationDuration": 96,
  "sliderGrooveHeight": 4,
  "sliderTickSize": 3,
  "sliderTickSpacing": 2,
  "sliderTickThickness": 1,
  "spacing": 8,
  "statusColorError": "#c7162bff",
  "statusColorErrorDisabled": "#e3a0a8ff",
  "statusColorErrorHovered": "#bb1528ff",
  "statusColorErrorPressed": "#af1326ff",
  "statusColorInfo": "#3584e4ff",
  "statusColorInfoDisabled": "#abc9eeff",
  "statusColorInfoHovered": "#327cd6ff",
  "statusColorInfoPressed": "#2f74c9ff",
  "statusColorSuccess": "#26a269ff",
  "statusColorSuccessDisabled": "#a6d5bfff",
  "statusColorSuccessHovered": "#249863ff",
  "statusColorSuccessPressed": "#218f5cff",
  "statusColorWarning": "#f99b11ff",
  "statusColorWarningDisabled": "#f6d29eff",
  "statusColorWarningHovered": "#ea9210ff",
  "statusColorWarningPressed": "#db880fff",
  "tabBarPaddingTop": 4,
  "tabBarTabMaxWidth": 0,
  "tabBarTabMinWidth": 0,
  "useSystemFonts": false
}

Available properties

TODO