Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Microsoft Windows Terminal #110

Open
connorjs opened this issue Sep 29, 2023 · 5 comments
Open

Microsoft Windows Terminal #110

connorjs opened this issue Sep 29, 2023 · 5 comments

Comments

@connorjs
Copy link

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
Copy link
Author

connorjs commented Sep 29, 2023

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
{
    "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
Copy link
Author

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
Copy link
Author

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
Copy link
Author

connorjs commented Sep 29, 2023

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
Copy link

Ricq commented May 7, 2024

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants