Celeste Dark Sublime Text Theme

Celeste Dark.sublime-color-scheme

{
    // Rough modified version of Celeste to darken it up
    "name": "Celeste Dark",
    "author": "Sublime HQ Pty Ltd",
    "variables":
    {
        // These colors are part of the hashed range
        // and should only be used in non-source
        "purple": "hsla(260, 50%, 70%, 1)",
        "blue": "hsla(200, 70%, 55%, 1)",
        "teal": "hsla(170, 70%, 55%, 1)",
        "green": "hsla(130, 70%, 55%, 1)",
        // End of hashed range colors
        "red": "hsla(0, 70%, 85%, 1)",
        "orange": "hsla(25, 90%, 70%, 1)",
        "dark_orange": "hsla(10, 90%, 70%, 1)",
        "yellow": "hsla(50, 100%, 70%, 1)",
        "brown": "hsla(30, 30%, 75%, 1)",
        "light_brown": "hsla(30, 30%, 85%, 1)",
        "dark_brown": "hsla(30, 30%, 30%, 1)",
        "magenta": "hsla(335, 100%, 75%, 1)",
        "light_gray": "#f6f6f6",
        "dark_gray": "#333",
        "black": "#222",
        "whitesmoke": "rgb(253, 253, 253)"
    },
    "globals":
    {
        "foreground": "var(whitesmoke)",
        "background": "var(black)",
        "caret": "var(magenta)",
        "selection": "color(var(light_gray) a(0.08))",
        "selection_border": "color(var(light_gray) a(0.3))",
        "inactive_selection": "color(var(light_gray) a(0.06))",
        "line_highlight": "#333",
        "highlight": "var(magenta)",
        "find_highlight": "var(yellow)",
        "find_highlight_foreground": "var(dark_brown)",
        "active_guide": "var(red)",
        "stack_guide": "var(orange)",
        "shadow": "#bbb",
        "accent": "var(orange)",
        "misspelling": "var(dark_orange)",
        "fold_marker": "var(yellow)",
    },
    "rules":
    [
        {
            "scope": "text",
            "foreground": "#ccc"
        },
        {
            "scope": "source - comment - string - keyword - punctuation - storage - entity - source.css",
            "foreground": ["var(green)", "var(purple)"]
        },
        {
            "scope": "comment",
            "foreground": "#999",
            "font_style": "italic"
        },
        {
            "scope": "entity.name - entity.name.tag - entity.name.section",
            "foreground": "var(orange)",
            "background": "#1e1e1e",
        },
        {
            "scope": "entity.other.inherited-class",
            "foreground": "var(dark_orange)",
            "background": "#1e1e1e",
        },
        {
            "scope": "support.function.builtin, support.class.builtin, variable.language",
            "foreground": "var(whitesmoke)",
            "font_style": "italic"
        },
        {
            "scope": "keyword.operator",
            "foreground": "#777"
        },
        {
            "scope": "keyword, constant.language",
            "foreground": "var(whitesmoke)",
            "font_style": "italic"
        },
        {
            "scope": "constant.numeric",
            "foreground": "var(red)"
        },
        {
            "scope": "constant.character",
            "foreground": "var(dark_orange)"
        },
        {
            "scope": "storage, support.type.sys-types",
            "foreground": "var(whitesmoke)",
            "font_style": "italic"
        },
        {
            "scope": "string",
            "foreground": "var(brown)",
        },
        {
            "scope": "punctuation.definition.string",
            "foreground": "var(light_brown)"
        },
        {
            "scope": "punctuation",
            "foreground": "#777"
        },
        {
            "scope": "meta.function-call variable.parameter",
            "foreground": "var(light_brown)"
        },
        {
            "scope": "invalid.illegal",
            "background": "var(red)",
        },
        {
            "scope": "invalid.deprecated",
            "background": "var(red)",
        },
        // HTML
        {
            "scope": "entity.name.tag",
            "foreground": "var(blue)"
        },
        // HTML/CSS
        {
            "scope": "entity.other.attribute-name",
            "foreground": "var(teal)"
        },
        {
            "scope": "entity.other.attribute-name.id",
            "foreground": "var(orange)"
        },
        // CSS
        {
            "scope": "support.type.property-name",
            "foreground": "var(purple)"
        },
        {
            "scope": "support.type.vendor-prefix",
            "foreground": "var(blue)"
        },
        {
            "scope": "entity.other.pseudo-class",
            "foreground": "var(green)"
        },
        // Markdown
        {
            "scope": "markup.heading.1 entity.name.section",
            "foreground": "var(blue)",
            "font_style": "bold"
        },
        {
            "scope": "markup.heading.2 entity.name.section",
            "foreground": "var(blue)"
        },
        {
            "scope": "entity.name.section",
            "foreground": "var(teal)"
        },
        {
            "scope": "markup.italic",
            "foreground": "var(black)",
            "font_style": "italic"
        },
        {
            "scope": "markup.bold",
            "foreground": "var(black)",
            "font_style": "bold"
        },
        {
            "scope": "markup.list punctuation.definition.list_item",
            "foreground": "var(dark_orange)"
        },
        {
            "scope": "markup.raw",
            "background": "#202020"
        },
        {
            "scope": "markup.raw constant.other.language-name",
            "foreground": "var(green)",
            "font_style": "italic"
        },
        {
            "scope": "meta.table.header - punctuation",
            "font_style": "bold"
        },
    ]
}

Hi, can you please thell me how to load this because it's giving me an error about it's not xml !

yes can i now how to load this thing into my sublime settings, tht'd be very helpful.

@AsadullahFarooqi @OMGitsRC In Sublime Text, go to Preferences > Browse Packages, enter the User directory, and put this file there. It will then show up as a color scheme in the preferences.

I made my own dark version of the classic Celeste them a few years ago. I now switched to VSCode Do you know any way to have the same behavior on VSCode ?

I would also LOVE this for my switch to VSCode if you have any ideas on how to convert

@hpetiot @erosika I have a basic extension published for this theme on VS Code now, on the Marketplace and GitHub.

I didn't find an existing tool for directly converting Sublime's theme format, and some of the features that Sublime supports aren't in VS Code either, but this is fairly close. I plan on adding a light theme variant based on the original Celeste in Sublime Text as well.

I'm also working on adding it to the Open VSX registry so it can be easily installed in non-Microsoft builds.