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

[theming] Separate workbench theme and syntax theme #25986

Open
hungys opened this issue May 5, 2017 · 38 comments
Open

[theming] Separate workbench theme and syntax theme #25986

hungys opened this issue May 5, 2017 · 38 comments
Assignees
Milestone

Comments

@hungys
Copy link
Contributor

@hungys hungys commented May 5, 2017

After upgrading to VS Code 1.12, I noticed that the workbench theme of the built-in Monokai color theme had been changed. However, I preferred the default workbench theme a lot.

But in VS Code, there are only two types of themes: Color Theme and Icon Theme, and the workbench theme is tightly coupled with the syntax theme in the Color Theme category.

In contrast, Sublime Text separates theme into color_scheme and theme in the preferences. For example, I can choose Material style for the workbench and Monokai for the syntax highlighting. Does the team have plan to separate them and let users have more flexibility to customize their editor?

By the way, I found that some of theme extensions use .json as their theme file (including the built-in Monokai), but the official documentation only mentions that we can use yo code to generate theme extension with an existing .tmTheme file. Is there any documentation for clarifying their difference and also the schema of the .json file?

@hungys hungys changed the title Separate workbench theme and syntax theme [Feature Request] Separate workbench theme and syntax theme May 5, 2017
@hungys
Copy link
Contributor Author

@hungys hungys commented May 5, 2017

As #25985 mentioned, maybe the theme of Integrated Terminal should also be separated. Doesn't really like how zsh's agnoster theme was rendered in Monokai theme :(

Integrated Terminal with Monokai theme

@egamma
Copy link
Member

@egamma egamma commented May 5, 2017

@egamma egamma changed the title [Feature Request] Separate workbench theme and syntax theme Separate workbench theme and syntax theme May 5, 2017
@anaganisk
Copy link

@anaganisk anaganisk commented May 5, 2017

do textmate themes support workbench theming yet? or are the restricted to JSON type theme files?

@bpasero bpasero added the themes label May 5, 2017
@aeschli
Copy link
Contributor

@aeschli aeschli commented May 5, 2017

Workbench theming is restricted to the new JSON color theme format. But you can keep your text mate theme together with the new JSON file.
Just use the code yeoman generator and create a theme extension. As input pass in your current tmTheme.

@aeschli
Copy link
Contributor

@aeschli aeschli commented May 5, 2017

We currently have no plans to separate workbench themes and syntax themes in the UI.

@aeschli aeschli added this to the Backlog milestone May 5, 2017
@bpasero bpasero added the workbench label May 5, 2017
@equinusocio
Copy link

@equinusocio equinusocio commented May 5, 2017

Please if you do that, make it as flaggable setting. @hungys you can always customise your workbench color through settings

@anaganisk
Copy link

@anaganisk anaganisk commented May 5, 2017

@aeschli I just figured out I can convert tmTheme file to JSON file, using vscode yo generator. So I guess its not much of a problem.

@hungys
Copy link
Contributor Author

@hungys hungys commented May 5, 2017

@aeschli

  1. Is the JSON color theme format documented anywhere? I see most of the guides telling us to use yo code with an existing tmTheme file. In addition, how to keep them together with single theme contribution point?
  2. Thanks. I hope this would be considered in future release.

@equinusocio
I know we can manually configure them, but considering for the user experience, I think there're benefits to separate them (like how Sublime Text did).

@anaganisk
How did you do that? I've tried yo code but the generated theme extension project is always composed with tsTheme file, even creating an empty project.

@equinusocio
Copy link

@equinusocio equinusocio commented May 5, 2017

@hungys If you want to convert a textmate theme to json you can also use any of the online converter tools. I converted my material theme textmate to yaml and then to json because you can't convert directly XML to JSON.

@anaganisk
Copy link

@anaganisk anaganisk commented May 5, 2017

@hungys
update yo generator-code to latest version

# run
yo code
     _-----_     ╭──────────────────────────╮
    |       |    │   Welcome to the Visual  │
    |--(o)--|    │   Studio Code Extension  │
   `---------´   │        generator!
    ( _´U`_ )    ╰──────────────────────────╯
    /___A___\   /
     |  ~  |
   __'.___.'__
 ´   `  |° ´ Y `

? What type of extension do you want to create? New Color Theme
? Do you want to import or convert an existing TextMate color theme?
  Import an existing theme but keep it as tmTheme file.
> Import an existing theme and inline it in the Visual Studio Code color theme file.
  Start fresh

select the second option

> Import an existing theme and inline it in the Visual Studio Code color theme file.

and copy the existing tmTheme as usual by file or link

@equinusocio
Copy link

@equinusocio equinusocio commented May 5, 2017

I noticed that some scopes are different form textmate, so you have to do a full check fo the xml.

@hungys
Copy link
Contributor Author

@hungys hungys commented May 5, 2017

@anaganisk
Thank you. Seems that I installed generator-code just few hours before the latest release...LOL I now have the new option to do that :)

@equinusocio
You can check the latest Yo generator. It can convert tsTheme to json automatically now.

@equinusocio
Copy link

@equinusocio equinusocio commented May 5, 2017

Yes i know. The problem is that some of the tmTheme's scopes are different in vsc. So the convert is not 1:1 but this is OT :)

@aeschli
Copy link
Contributor

@aeschli aeschli commented May 5, 2017

I'll have to add documentation on the format the color-theme file. But if you name your file ending with the -color-theme.json (e.g mytheme-color-theme.json) and open it in VSCode you will get tooling support (suggest, validation, hovers...).

There are basically two things to provide in the color-theme JSON:

color: a object with properties documented here: https://code.visualstudio.com/docs/getstarted/theme-color-reference

tokenColors the location of your tmTheme file, or the content of that file as JSON.

@Tyriar
Copy link
Member

@Tyriar Tyriar commented May 5, 2017

Related for the terminal, allowing a background color distinct from the panel: #24735

@FezVrasta
Copy link

@FezVrasta FezVrasta commented May 25, 2017

Could you at least allow to apply multiple themes together and define the order of them? Doing so, a theme could simply define the syntax highlighting theme and override the one of a "complete" theme that defines all the UI colors as well.

I don't think this would be quite a big change, I could work on it by myself if you like the idea.

@lehni
Copy link

@lehni lehni commented Oct 31, 2017

I think it's a mistake to not allow this separation.

GUI themes and syntax color highlighting are two very different concerns. Styling a GUI often has to do with making the software feel right in its context of a desktop OS along with other apps in use, while the syntax color highlighting is a question of what a programmer is used to from other editors, and will most likely try to preserve, or not suddenly strongly deviate from.

I've switched from Sublime Text 3, where I had my own syntax theme for the past 10 years, a modified version of TextMate's LAZY scheme if I remember correctly, converted over to Sublime Text 2 and then 3.

I've now tried a bunch of VSCode themes, and really like the GUI in some, and the Syntax highlighting in others. And while I can of course achieve this by manually creating a new theme, I don't understand why they're together when they're speaking of such different domains, and all they share is the fact that it's a bunch of collected colors and styles.

@equinusocio
Copy link

@equinusocio equinusocio commented Oct 31, 2017

@lehni They're not speaking of such different domains. A theme must provide a complete user experience. UI and syntax highlighting are in the same app context. Check this theme

screen shot 2017-10-31 at 10 17 40

It provide a full custom user experience combining a custom UI and a custom color syntax that fetch the mood of the UX. They are in the same domain, they are in the same UX flow.

I agree with you that having a way to set a different syntax scheme is a must, but they are not different domains.

@lehni
Copy link

@lehni lehni commented Oct 31, 2017

I'm not saying the two domains can't align style-wise, and some people may like this, but I personally find it more problematic if they do, as everything starts looking like one soup.

Having a separation between the UI and the code, also in terms of color, is helpful to the perception. For example, you're not setting all UI in the same monospaced font and type-size that is used for the code either, and if you did, it would be confusing because it would be harder to make a distinction between them.

@bpasero bpasero removed the workbench label Nov 16, 2017
@zeshanshani
Copy link

@zeshanshani zeshanshani commented Nov 22, 2017

Same problem here as @lehni. Been using Sublime for over 6 years now. I loved Cobalt2 theme by Wes Bos, but its syntax color highlighting doesn't match my preference.

Have you considered offering these two options yet? @aeschli - I think it's most needed for Sublime users.

Of course, I can try to adopt the new habits here but it would be wonderful if you consider offering different color highlighting theme option as an optional setting.

@zeshanshani
Copy link

@zeshanshani zeshanshani commented Nov 22, 2017

@equinusocio lol, I may not use some of those features at all, but color syntax? That I have to deal with every time 😄

Just kidding though, I loved VS Code so far. Haven't tested all of its features, but it sure looks very powerful.

@leonardofaria
Copy link

@leonardofaria leonardofaria commented Nov 22, 2017

@zeshanshani I am at the same case - Cobalt2 fan but don't like a dark editor.

The workaround that I did:

  • I am using Cobalt2 theme
  • I copied a few stuff from macOS Classic theme and I am changing manually - it is not 100% perfect however it better than keeping all the interface dark.

If you are curious, here are my settings: https://gist.github.com/leonardofaria/1f89b4a15e89a2d98db7bdd22ec99284#file-settings-json-L35

@zeshanshani
Copy link

@zeshanshani zeshanshani commented Nov 28, 2017

@leonardofaria Sorry I missed your response. Thanks for the settings. Unfortunately, that didn't work for me. I was actually looking for changing the code syntax highlighting while keeping the overall look of Cobalt2 theme same. What you have is the opposite I suppose.

I kinda adopted the VS Code behavior so I'm ignoring the syntax highlighting issue. But, it'd be wonderful if they can add this feature because I love Twilight (SL) color scheme.

@leonardofaria
Copy link

@leonardofaria leonardofaria commented Nov 28, 2017

@zeshanshani yeah, your approach (adding cobalt2 syntax highlighting) also works and it is probably better because Wes' theme is defined as a dark theme and the icons are high contrast-ones. I didn't find a way to revert this icon setting.

@zeshanshani
Copy link

@zeshanshani zeshanshani commented Nov 30, 2017

@leonardofaria yes, it's by default dark version. I'm a huge fan of dark themes, so it works best for me. Maybe we should submit a feature request to release a light version as well with some high-res icons. :)

@190n
Copy link

@190n 190n commented Apr 4, 2018

Is this issue still active? I'd really appreciate this feature.

I use Linux. On Linux, VS Code can't change the color of the titlebar, so almost all themes look wrong:

vsc

I can work around this using some themes that match the colors of common GTK themes. But this is far from ideal. I can't have a separate syntax highlighting theme; I'm stuck with whatever the author of that extension chose.

@Tyriar
Copy link
Member

@Tyriar Tyriar commented Apr 4, 2018

@190n we added the workbench.colorCustomizations setting to override whatever theme keys you want. If you can theme the title bar on Linux (I'm not 100% sure), then you should be able to do it here.

@190n
Copy link

@190n 190n commented Apr 4, 2018

@shalanah
Copy link

@shalanah shalanah commented May 31, 2018

Hi, I'm trying to make the switch from Brackets to VSCode, it has been a long time coming... and hard since I love Bracket's UI so much. I've been trying to recreate Bracket's UI generally speaking in VSCode. Brackets has a dark nav area and a light editor area as one of its themes.

I'd really love if you could separate editor light/dark from the rest of the UI light/dark (sidebar nav etc), or make those elements that are tied to uiTheme easily accessible in theming or workbench.colorCustomizations.

I especially notice this issue with some btns that are tied to uiTheme (mostly on hover, ie: in source control and hovering over a file name there are a couple of icons that appear only on hover) and the editor text cursor color. It seems that you can get the btn colors to work or the text cursor (contrast wise) but not both since they are tied to uiTheme.

@ShinobiWPS
Copy link

@ShinobiWPS ShinobiWPS commented Aug 17, 2018

@shalanah You can customize almost anything specifically in VS COde, I'm doing it myself specifiyng different color/properties per-theme.
So yeah youc an have Black something and white something else it's in documentation on workbench customization section.

these are mines:

    "[Parasol]": {
      "list.inactiveSelectionBackground": "#5ec4ff",

      "editorGroupHeader.tabsBorder": "#292929",
      "editorGroup.border": "#292929",

      "tab.unfocusedInactiveForeground": "#9e9e9e",

      "sideBarSectionHeader.background": "#9e9e9e",
      "sideBarSectionHeader.foreground": "#fff",

      "tab.activeBackground": "#2eb2ff",
      "tab.activeForeground": "#fff",

      "statusBar.background": "#292929",
      "statusBar.foreground": "#e0e0e0",
      "statusBar.border": "#2eb2ff",
    },


    "[Monokai Pro (Filter Spectrum)]": {

      "editor.selectionBackground":"#818181",
      "editor.selectionHighlightBackground": "#818181",
      "editor.wordHighlightBackground":"#818181",

      "scrollbarSlider.background": "#ffffff85",

      "editorGroupHeader.tabsBorder": "#41ff70",

      "sideBarSectionHeader.background": "#4b4b4b",
      "sideBarSectionHeader.foreground": "#f1e364",

      "list.activeSelectionBackground": "#ffffff",
      "list.activeSelectionForeground": "#000",
      "list.inactiveSelectionBackground": "#ffffff",
      "list.inactiveSelectionForeground": "#000",

      "statusBar.background": "#424242",
      "statusBar.foreground": "#ffffff",
      "statusBar.border": "#41ff70",
      "statusBarItem.hoverBackground": "#47c1fa",

      "activityBar.foreground": "#ffffff",
      "activityBarBadge.background": "#41ff70",

      "tab.activeBackground": "#666666",
      "tab.activeForeground": "#ffffff"
    },

focused/unfocused is like 'hovered' or 'not'

@lexicalunit
Copy link

@lexicalunit lexicalunit commented Dec 19, 2018

I prefer the Solarized Light theme for my code editing, but I want the application to look like a native macOS application. Separation of syntax and UI theme makes perfect sense.

Atom with a native macOS theme and solarized syntax:
atom

Xcode with a solarized syntax:
screen shot 2018-12-18 at 4 38 41 pm

With VSCode I must chose: Native macOS theme or solarized light theme. It doesn't really make any sense.

@noraj
Copy link
Contributor

@noraj noraj commented Jan 13, 2019

It is very embarrassing when you found the perfect UI theme but that the associated syntax highlight colors suck or are incomplete. As far as I remember Atom had separated UI colors and syntax colors. So a theme would be able to install a new syntax color but your are not forced to use it.

@scratchmex
Copy link

@scratchmex scratchmex commented Feb 1, 2019

I think it would be great to separate syntax theme and UI theme as Atom does because that bring more customization to the user. I'm with @noraj, is a shame you found a great UI theme with a syntax highlight that sucks

@MostHated
Copy link

@MostHated MostHated commented Mar 28, 2019

I am with everyone else. I think it is rather important to have separate application and syntax highlighting. I have a very specific setup I like to use that I use in Rider, PyCharm, I was able to set it up in Atom, hell, I was even 95% able to do it in Notepad++ but I can't do it in VS Code because the two typical themes I mix, I can only have one or the other.

@hsoto92
Copy link

@hsoto92 hsoto92 commented Jul 2, 2019

Bumping this thread in case there's some hope on adding this feature? The community is asking for it.

@ShinobiWPS
Copy link

@ShinobiWPS ShinobiWPS commented Jul 12, 2019

+1 for this feature,actually since almost ever editors had this feature

@Zireael
Copy link

@Zireael Zireael commented Aug 20, 2019

Please allow separate syntax theme.
It could be as simple as choosing one theme for windows looks and another theme for syntax looks.

@aeschli aeschli self-assigned this Oct 28, 2019
@aeschli aeschli modified the milestones: Backlog, Backlog Candidates Oct 28, 2019
@aeschli aeschli changed the title Separate workbench theme and syntax theme [theming] Separate workbench theme and syntax theme Oct 28, 2019
@vscodebot
Copy link

@vscodebot vscodebot bot commented Jan 15, 2020

🙂 This feature request received a sufficient number of community upvotes and we moved it to our backlog. To learn more about how we handle feature requests, please see our documentation.

Happy Coding!

@vscodebot vscodebot bot modified the milestones: Backlog Candidates, Backlog Jan 15, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
You can’t perform that action at this time.