Skip to content

Custom Themes 🎨

David Morais edited this page Apr 26, 2023 · 4 revisions

Custom Themes

With Kuro 9, you cam use your own color palette with Kuro. To do so, simply open the Kuro config JSON from the menu (or hit Ctrl+.) and replace the theme with the theme you want.

Dark Themes 🖤

Kuro Dark (Default Custom)

image

{
        "bgPrimary": "#121212",
        "bgPrimaryTransparent": "#12121233",
        "bgSecondary": "#1F1F1F",
        "bgTertiary": "#111",
        "bgHover": "#1F1F1F",
        "bgHoverSecondary": "#131313",
        "bgHoverTertiary": "#333333",
        "bgActive": "#232323",
        "bgActiveSecondary": "#333333",
        "bgActiveTertiary": "#343434",
        "bgSeparator": "#333333",
        "bgBorder": "#222222",
        "bgScrollbar": "#FFFFFF",
        "fontColorPrimary": "#CCCCCC",
        "fontColorSecondary": "#DDDDDD",
        "fontColorTertiary": "#797775",
        "fontColorWarning": "#A80000",
        "fontColorBrand": "#007262",
        "fontColorDisable": "#A19F9D",
        "bgBrand": "#007262",
        "bgBrandHover": "#1e9484",
        "bgBrandHoverSecondary": "#004c52",
        "bgBrandSecondary": "#004c52",
        "bgBrandDisable": "#303f40 ",
        "red": "#f35863",
        "blue": "#4a7dfd",
        "skyblue": "#3cb9e9",
        "purple": "#7a45bf",
        "green": "#6ec35d"
}

Kuro Black

image

{
        "bgPrimary": "rgba(0, 0, 0, 1)",
        "bgPrimaryTransparent": "rgba(0, 0, 0, 0.2)",
        "bgSecondary": "rgba(10, 10, 10, 1)",
        "bgTertiary": "#222222",
        "bgHover": "#121212",
        "bgHoverSecondary": "#131313",
        "bgHoverTertiary": "#242424",
        "bgActive": "#232323",
        "bgActiveSecondary": "#121212",
        "bgActiveTertiary": "#343434",
        "bgSeparator": "#222222",
        "bgBorder": "#121212",
        "bgScrollbar": "#333333",
        "fontColorPrimary": "#CCCCCC",
        "fontColorSecondary": "#DDDDDD",
        "fontColorTertiary": "#797775",
        "fontColorWarning": "#A80000",
        "fontColorBrand": "#007262",
        "fontColorDisable": "#A19F9D",
        "bgBrand": "#007262",
        "bgBrandHover": "#1e9484",
        "bgBrandHoverSecondary": "#004c52",
        "bgBrandSecondary": "#004c52",
        "bgBrandDisable": "#303f40 ",
        "red": "#C43E1C",
        "blue": "#185ABD",
        "skyblue": "#107c78",
        "purple": "#6355A8",
        "green": "#107C41"
}

Kuro Dracula

image

{
        "bgPrimary": " #282A36",
        "bgPrimaryTransparent": " #282A3633",
        "bgSecondary": " #333648",
        "bgTertiary": " #303342",
        "bgHover": " #3B3E51",
        "bgHoverSecondary": " #474C68",
        "bgHoverTertiary": " #222D6E",
        "bgActive": " #333855",
        "bgActiveSecondary": " #3F456B",
        "bgActiveTertiary": " #2D366C",
        "bgSeparator": " #44475A33",
        "bgBorder": " #44475A33",
        "bgScrollbar": " #44475A33",
        "fontColorPrimary": " #CCCCCC",
        "fontColorSecondary": " #F8F8F2",
        "fontColorTertiary": " #FFFFFF",
        "fontColorWarning": " #FF5555",
        "fontColorBrand": " #0ca993",
        "fontColorDisable": " #A19F9D",
        "bgBrand": "#007262",
        "bgBrandHover": "#089985",
        "bgBrandHoverSecondary": "#39786f",
        "bgBrandSecondary": "#52a79b",
        "bgBrandDisable": "#303f40",
        "red": " #FF5555",
        "blue": " #288BE1",
        "skyblue": " #8BE9FD",
        "purple": " #BD93F9",
        "green": " #50FA7B"
}

Kuro Tokyo

image

{
        "bgPrimary": "#1a1b26",
        "bgPrimaryTransparent": "#1a1b2633",
        "bgSecondary": "#24283b",
        "bgTertiary": "#202129",
        "bgHover": "#242537",
        "bgHoverSecondary": "#36374d",
        "bgHoverTertiary": "#13151e",
        "bgActive": "#2a2b3d",
        "bgActiveSecondary": "#14283b",
        "bgActiveTertiary": "#161925",
        "bgSeparator": "#9aa5ce33",
        "bgBorder": "#9aa5ce33",
        "bgScrollbar": "#9aa5ce33",
        "fontColorPrimary": "#a9b1d6",
        "fontColorSecondary": "#c0caf5",
        "fontColorTertiary": "#b4f9f8",
        "fontColorWarning": "#f7768e",
        "fontColorBrand": "#66eeaa",
        "fontColorDisable": "#6ea6ea",
        "bgBrand": "#007262",
        "bgBrandHover": "#089985",
        "bgBrandHoverSecondary": "#39786f",
        "bgBrandSecondary": "#52a79b",
        "bgBrandDisable": "#303f40",
        "red": "#f7768e",
        "blue": "#7aa2f7",
        "skyblue": "#7dcfff",
        "purple": "#bb9af7",
        "green": "#9ece6a"
}

@orychalk's Dark

image

"theme": { "bgPrimary": " #4e536e", "bgPrimaryTransparent": " #282A3633", "bgSecondary": " #333648", "bgTertiary": " #4e536e", "bgHover": " #3B3E51", "bgHoverSecondary": " #474C68", "bgHoverTertiary": " #333855", "bgActive": " #3B3E51", "bgActiveSecondary": " #3F456B", "bgActiveTertiary": " #333648", "bgSeparator": " #4e536e33", "bgBorder": " #4e536e33", "bgScrollbar": " #FFFFFF33", "fontColorPrimary": " #FFFFFF", "fontColorSecondary": " #FFFFFF", "fontColorTertiary": " #FFFFFF", "fontColorWarning": " #FF5555", "fontColorBrand": " #ffaa7f", "fontColorDisable": " #A19F9D", "bgBrand": "#ff557f", "bgBrandHover": "#f25179", "bgBrandHoverSecondary": "#39786f", "bgBrandSecondary": "#52a79b", "bgBrandDisable": "#303f40", "red": " #FF5555", "blue": " #FFFFFF", "skyblue": " #8BE9FD", "purple": " #BD93F9", "green": " #50FA7B" } }

Light Themes 🤍

Sepia

image

    "theme": {
        "bgPrimary": "#E5D79B",
        "bgPrimaryTransparent": "#E5D79B33",
        "bgSecondary": "#F0E8C5",
        "bgTertiary": "#D7CEAB",
        "bgHover": "#E9DEB0",
        "bgHoverSecondary": "#E7DFB7",
        "bgHoverTertiary": "#ECDA92",
        "bgActive": "#ECDA92",
        "bgActiveSecondary": "#D9C67A",
        "bgActiveTertiary": "#DCD09B",
        "bgSeparator": "#B9B08F",
        "bgBorder": "#ECDA92",
        "bgScrollbar": "#A19F9D",
        "fontColorPrimary": "#333333",
        "fontColorSecondary": "#000000",
        "fontColorTertiary": "#797775",
        "fontColorWarning": "#A80000",
        "fontColorBrand": "#5aaf90",
        "fontColorDisable": "#A19F9D",
        "bgBrand": "#5aaf90",
        "bgBrandHover": "#089985",
        "bgBrandHoverSecondary": "#39786f",
        "bgBrandSecondary": "#52a79b",
        "bgBrandDisable": "#303f40",
        "red": "#C43E1C",
        "blue": "#185ABD",
        "skyblue": "#18bdbd",
        "purple": "#7719AA",
        "green": "#31752F"
    }

Leaf

image

    "theme": {
        "bgPrimary": "hsl(120deg 50% 78%)",
        "bgPrimaryTransparent": "hsl(120deg 50% 78% / 50%)",
        "bgSecondary": "#b7d5b7",
        "bgTertiary": "hsl(120deg 40% 78%)",
        "bgHover": "hsl(120deg 55% 78%)",
        "bgHoverSecondary": "hsl(120deg 30% 78%)",
        "bgHoverTertiary": "#hsl(120deg 44% 78%)",
        "bgActive": "hsl(120deg 90% 85%)",
        "bgActiveSecondary": "hsl(120deg 66% 85%)",
        "bgActiveTertiary": "hsl(120deg 80% 85%)",
        "bgSeparator": "hsl(120deg 50% 25%)",
        "bgBorder": "hsl(120deg 50% 35%)",
        "bgScrollbar": "hsl(120deg 50% 60%)",
        "fontColorPrimary": "#263626",
        "fontColorSecondary": "#536e53",
        "fontColorTertiary": "#4a4a4a",
        "fontColorWarning": "#A80000",
        "fontColorBrand": "#5aaf90",
        "fontColorDisable": "#7a8f86",
        "bgBrand": "#5aaf90",
        "bgBrandHover": "#089985",
        "bgBrandHoverSecondary": "#39786f",
        "bgBrandSecondary": "#52a79b",
        "bgBrandDisable": "#303f40",
        "red": "#c55e6c",
        "blue": "#4f74b3",
        "skyblue": "#165f6a",
        "purple": "#42166a",
        "green": "#578525/-/*"
    }

@orychalk's Light

image

 "theme": { "bgPrimary": " #e9e9e9", "bgPrimaryTransparent": " #282A3633", "bgSecondary": " #fafafa", "bgTertiary": " #ffffff", "bgHover": " #5294e2", "bgHoverSecondary": " #5aa9f0", "bgHoverTertiary": " #5294e2", "bgActive": " #5aa9f0", "bgActiveSecondary": " #cf0003", "bgActiveTertiary": " #2663ce", "bgSeparator": " #4e536e33", "bgBorder": " #4e536e33", "bgScrollbar": " #FFFFFF33", "fontColorPrimary": " #222222", "fontColorSecondary": " #000000", "fontColorTertiary": " #777777", "fontColorWarning": " #FF5555", "fontColorBrand": " #ee6335", "fontColorDisable": " #A19F9D", "bgBrand": "#ff557f", "bgBrandHover": "#f25179", "bgBrandHoverSecondary": "#39786f", "bgBrandSecondary": "#52a79b", "bgBrandDisable": "#303f40", "red": " #ff007f", "blue": " #1d4b9c", "skyblue": " #5555ff", "purple": " #9b00e9", "green": " #478f6a" } }

Contributing

Use our Discussions page to share your themes