jan-warchol / selenized

Solarized redesigned: fine-tuned color palette for programmers with focus on readability.
MIT License
737 stars 57 forks source link

Microsoft Windows Terminal #110

Open connorjs opened 9 months ago

connorjs commented 9 months ago

As a Selenized user, I would like to use the color schemes in the Windows Terminal.


Opening an issue to track discussion and effort here.

connorjs commented 9 months ago

Sharing my initial progress based on my needs (Light and Black, plus my first guess on tab schemes)

The main question to standardize is what color to use for the tab bar in unfocused mode. I chose the selectionBackground color as a first attempt and liked the look of it. It felt similar to the default color schemes packaged with Windows terminals and originates from the background (which is the active tab color).

I sourced all colors from the Kitty config.


Edit the settings.json file. Posting in JSON snippets.

settings.json snippets ```json { "profiles": { "defaults": { "colorScheme": { "dark": "Selenized Black", "light": "Selenized Light" }, } }, "schemes": [ { "name": "Selenized Black", "black": "#252525", "brightBlack": "#3b3b3b", "red": "#ed4a46", "brightRed": "#ff5e56", "green": "#70b433", "brightGreen": "#83c746", "yellow": "#dedede", "brightYellow": "#efc541", "blue": "#368aeb", "brightBlue": "#4f9cfe", "purple": "#eb6eb7", "brightPurple": "#ff81ca", "cyan": "#3fc5b7", "brightCyan": "#56d8c9", "white": "#777777", "brightWhite": "#F2F2F2", "foreground": "#b9b9b9", "background": "#181818", "cursorColor": "#b9b9b9", "selectionBackground": "#3b3b3b" }, { "name": "Selenized Light", "black": "#E9E4D0", "brightBlack": "#CFCEBE", "red": "#D2212D", "brightRed": "#CC1729", "green": "#489100", "brightGreen": "#428B00", "yellow": "#AD8900", "brightYellow": "#A78300", "blue": "#0072D4", "brightBlue": "#006DCE", "brightPurple": "#C44392", "purple": "#CA4898", "cyan": "#009C8F", "brightCyan": "#00978A", "white": "#909995", "brightWhite": "#3A4D53", "foreground": "#53676D", "background": "#FBF3DB", "cursorColor": "#53676D", "selectionBackground": "#CFCEBE" } ], "theme": { "dark": "selenized-black", "light": "selenized-light" }, "themes": [ { "name": "selenized-black", "tab": { "background": "terminalBackground", "unfocusedBackground": "#3b3b3b" }, "tabRow": { "background": "#3b3b3b", "unfocusedBackground": "#3b3b3b" }, "window": { "applicationTheme": "dark" } }, { "name": "selenized-light", "tab": { "background": "terminalBackground", "unfocusedBackground": "#CFCEBE" }, "tabRow": { "background": "#CFCEBE", "unfocusedBackground": "#CFCEBE" }, "window": { "applicationTheme": "light" } } ], } ```
connorjs commented 9 months ago

I’m unsure how best to actually commit files to ease users applying them to their own settings. (Windows terminal uses a single configuration file.)

Ideally, there’s a common "apply JSON patch" tool (I will research this, and what other Windows Terminal config tools use), or we just share individually, or we share similar to my above post.

connorjs commented 9 months ago

The main question to standardize is what color to use for the tab bar in unfocused mode. I chose the selectionBackground color as a first attempt and liked the look of it. It felt similar to the default color schemes packaged with Windows terminals and originates from the background (which is the active tab color).

Note: I have inversed the choice made for Kitty. I believe this is correct for windows terminal b/c Windows Terminal uses tabs in the traditional tabs UI sense where the active tab "connects" to the body (and I believe is always on top).

I tried the Kitty scheme (inversing my proposal above) and did not like it at all. It felt flipped.

Disclaimer: I am new to Windows (~2 months)

connorjs commented 9 months ago

I added the other schemes and made some changes. Re-capping my methodology.

  1. Use the Selenized terminal colors (sourced from Kitty files) for the schemes values
  2. Configure the tabs with the following

    • tab.background: $background (the active tab)
    • tab.unfocusedBackground: $selectionBackground (the inactive tabs)
    • tabRow.background: $black (the tab row behind the tabs)
    • tabRow.unfocusedBackground: $brightBlack (the tab row behind the tabs when the terminal application is not in focus)

    _Note: $brightBlack matches $selectionBackground, but I only realized that afterwards

  3. Wire up theme and profiles.defaults.colorScheme
{
    "schemes": [
        {
            "name": "Selenized Black",
            "black": "#252525",
            "brightBlack": "#3b3b3b",
            "red": "#ed4a46",
            "brightRed": "#ff5e56",
            "green": "#70b433",
            "brightGreen": "#83c746",
            "yellow": "#dedede",
            "brightYellow": "#efc541",
            "blue": "#368aeb",
            "brightBlue": "#4f9cfe",
            "purple": "#eb6eb7",
            "brightPurple": "#ff81ca",
            "cyan": "#3fc5b7",
            "brightCyan": "#56d8c9",
            "white": "#777777",
            "brightWhite": "#dedede",
            "foreground": "#b9b9b9",
            "background": "#181818",
            "cursorColor": "#b9b9b9",
            "selectionBackground": "#3b3b3b"
        },
        {
            "name": "Selenized Dark",
            "black": "#174956",
            "brightBlack": "#325b66",
            "red": "#fa5750",
            "brightRed": "#ff665c",
            "green": "#75b938",
            "brightGreen": "#84c747",
            "yellow": "#dbb32d",
            "brightYellow": "#dbb32d",
            "blue": "#4695f7",
            "brightBlue": "#58a3ff",
            "purple": "#f275be",
            "brightPurple": "#ff84cd",
            "cyan": "#41c7b9",
            "brightCyan": "#53d6c7",
            "white": "#72898f",
            "brightWhite": "#cad8d9",
            "foreground": "#adbcbc",
            "background": "#103c48",
            "cursorColor": "#adbcbc",
            "selectionBackground": "#325b66"
        },
        {
            "name": "Selenized Light",
            "black": "#e9e4d0",
            "brightBlack": "#cfcebe",
            "red": "#d2212d",
            "brightRed": "#cc1729",
            "green": "#489100",
            "brightGreen": "#428b00",
            "yellow": "#ad8900",
            "brightYellow": "#a78300",
            "blue": "#0072d4",
            "brightBlue": "#006dce",
            "purple": "#ca4898",
            "brightPurple": "#c44392",
            "cyan": "#009c8f",
            "brightCyan": "#00978a",
            "white": "#909995",
            "brightWhite": "#3a4d53",
            "foreground": "#53676d",
            "background": "#fbf3db",
            "cursorColor": "#53676d",
            "selectionBackground": "#cfcebe"
        },
        {
            "name": "Selenized White",
            "black": "#ebebeb",
            "brightBlack": "#cdcdcd",
            "red": "#d6000c",
            "brightRed": "#bf0000",
            "green": "#1d9700",
            "brightGreen": "#008400",
            "yellow": "#c49700",
            "brightYellow": "#af8500",
            "blue": "#0064e4",
            "brightBlue": "#0054cf",
            "purple": "#dd0f9d",
            "brightPurple": "#c7008b",
            "cyan": "#00ad9c",
            "brightCyan": "#009a8a",
            "white": "#878787",
            "brightWhite": "#282828",
            "foreground": "#474747",
            "background": "#ffffff",
            "cursorColor": "#474747",
            "selectionBackground": "#cdcdcd"
        }
    ],
    "theme": {
        "dark": "selenized-black",
        "light": "selenized-light"
    },
    "themes": [
        {
            "name": "selenized-black",
            "tab": {
                "background": "#181818",
                "unfocusedBackground": "#3b3b3b"
            },
            "tabRow": {
                "background": "#252525",
                "unfocusedBackground": "#3b3b3b"
            },
            "window": {
                "applicationTheme": "dark"
            }
        },
        {
            "name": "selenized-dark",
            "tab": {
                "background": "#103c48",
                "unfocusedBackground": "#325b66"
            },
            "tabRow": {
                "background": "#174956",
                "unfocusedBackground": "#325b66"
            },
            "window": {
                "applicationTheme": "dark"
            }
        },
        {
            "name": "selenized-light",
            "tab": {
                "background": "#fbf3db",
                "unfocusedBackground": "#cfcebe"
            },
            "tabRow": {
                "background": "#e9e4d0",
                "unfocusedBackground": "#cfcebe"
            },
            "window": {
                "applicationTheme": "light"
            }
        },
        {
            "name": "selenized-white",
            "tab": {
                "background": "#ffffff",
                "unfocusedBackground": "#cdcdcd"
            },
            "tabRow": {
                "background": "#ebebeb",
                "unfocusedBackground": "#cdcdcd"
            },
            "window": {
                "applicationTheme": "light"
            }
        }
    ],
    "profiles": {
        "defaults": {
            "colorScheme": {
                "dark": "Selenized Black",
                "light": "Selenized Light"
            },
        }
    }
}
Ricq commented 2 months ago

This change seems similar to pull request #88 that has already been open since 2020. I haven't checked your approach versus that one, but it seems this has been on the list of more people, and is waiting to be merged for about 4 years now.