Themes: Ideas, Feedback, Accessibility, Discussion

[iamnbutler]

Starting a discussion to share and get feedback on all things themes.

The docs page for themes can be found here: docs.zed.dev/configuration/themes

[iamnbutler]

One thing I want for Zed themes in the future is to be able to dynamically shift the colors of a theme. For example: Higher/lower contrast or saturation modes.

I'd love to eventually ship something like a colorblind filter (shift hue/saturation based on color blindness type – Example)

Something like this would be a ways off though.

[johnm]

Yes, so many themes are really washed out.

I'm less interested in something automated to change those things and much more excited by the ability to quickly and easy fork an existing theme and tweak it to my preferences.

I don't even care if it's a gui-ish thing to edit theme, just that it's fast and easy to fork/tweak the colors. But I definitely won't say no to a decent gui. :-)

[johnm]

Big +1 to support the different types of color blindness. I think that would be very helpful during collaboration.

[etsea117]

As someone with Deuteranomaly, I would love a theme and/or a way to adjust themes to improve visibility. All the themes currently look like they've faded from being in the sun too long.

[ghost]

could an experimental feature be added for custom themes following the same theme formatting and syntax, etc. that is already used for the current themes that we want to use.. so maybe we can make and break and tinker with it to help... i know there is no time table yet for custom themes.. i know it would be extremely experimental yet maybe some of us could use it if u implemented something basic so we can do some of the legwork in our usual day to day as i have a feeling some of us will want to tinker anyways based on what i have read so far.. although.. we wouldn't have any support on it because until u got around to it we would be sort of data gathering and sharing as we learn to help.. idk.. random idea... maybe this is beneficial?..

[Daeraxa]

I'd love to see the barrier of entry to theming be lower than it often is so that people can easily create and share themes.
I really like the approach Lapce has taken to theming with a simple GUI layout to select a colour against a list of different items which can then be exported and shared. I can easily see this being extended with a colour picker and some other nice things to make it really quite easy.

[iamnbutler]

Yeah we have lots of plans™️ around this, but there is a lot to consider, and we have to sequence priorities. These are some old designs that explore this idea:

[johnm]

Yeah we have lots of plans™️ around this, but there is a lot to consider, and we have to sequence priorities. These are some old designs that explore this idea:

If/when you go down that rabbit hole, please do allow for the settings of the editor chrome to be separate/separable from the settings for the editing pieces.

[ghost]

can some of us be able to play with those settings while u are sequencing said priorities.. maybe we can help during?.. unless u are talking about having to hard code the GUI with it... to hold us off until then maybe a css based basic sytax for theme switching with a link within or something or having a page on the git here with the themes available.. at first i get there may be more legwork.. i loved Atom myself and really wanna see this project take off! maybe this helps?

[pedrosouza458]

wow, i really like this, it should be great to have, good luck

[MatthiasGrandl]

I would like to request the option to set different themes for light/dark system preferences. My system theme preference changes throughout the day and I really appreciate it if my editor changes automatically with it.

[johnm]

Yes! I manually do this at least twice everyday.

[ghost]

or even a basic line of code to enable auto switching on a variable timer based on preferred personal input, that could be configured within the configuration file possibly... if that is helpful for the above idea to help streamline the thought and idea to practical application for real time usage.. had that thought.. maybe this helps the devs?..

[iamnbutler]

This isn't ready yet, but the system we are working on now will help enable this!

[Aeolun]

Aww, I was hoping to be able to create my own theme. Just exposing the underlying theme format is fine (I don't need a whole UI), but it's a bit sad to have themes without customization. Even Fleet has only light/dark, but at least you can change it.

To be honest, I'm not quite sure why this is something that I think is indispensable.

[ghost]

it is mentioned that they are working on custom themes yet there is no time table..

[Moshyfawn]

@LL-Program, please avoid spamming Zed community platforms with your promotional material.

[ghost]

the issue i have noticed and it may be something simple.. though it is infuriating.. when i try to add a line to config file it auto updates and reverts as if needed for formatting within a second... have tried removing my auto save i added.. is this a bug?..

[ghost]

i found it! okay the autosave feature with milliseconds forces auto indenting and makes it extremely painful to add lines to config file, may be a bug within the coded formula on back end?.. or just me... essentially by switching auto save to off the issue is resolved, yet that seems to suggest the autosave feature may be a tad buggy on the millisecond timer... TL::DR seems to cause the file to force indent for proper syntax which i get for the config file then does the said autosave.. .. anyone else have issue?.. anyone know of solution?.. going to do auto save feature last i suppose on config file in meantime.. will update when i make it to my website i am coding to practice in once configured to see if issue persists beyond the config file itself.

[ghost]

another solution.. on_focus_change prevent said issue.. so there is that.. hope that helps devs on the timer setting for the autosave feature via milliseconds.. so maybe add an else statement to the variable on back end so when the auto save is done via timer it doesnt auto indent like the other variables then it wont be such a headache and feel pretty much useless unless given a ridiculous amount of time to save tho I forsee that even that would be an issue because u may be lines of code in and then it autosaves in the window and ur work is scrubbed at least on the line your working on... maybe this helps.?

[iamnbutler]

I'm not sure what this has to do with themes. You probably will have better luck posting this as a separate discussion or issue.

[resistor4u]

I'm aware it may be controversial, but I believe the best text editors are the ones that allow users to configure window transparency. I am not talking about cosmetic blurs, which IMHO are worthless wastes of CPU cycles. What I'm talking about is the main window to have a background view with an editable alpha level. For Macs, TextMate up to version 2.0-rc.13 enabled this, but it was removed in later versions. As I understand it, the feature was removed because the methods it implemented were deprecated or removed in more modern Mac SDKs. iTerm enables this feature still, and also does it very, very well. It's been on my TODO to look into exactly how iTerm does it. Mac's native Terminal.app also implements configurable window transparency.

It's an essential feature to me, and I cannot be alone. It's essential because laptop screen space is limited, and if you find yourself drafting documents, then it's an incredible time-saver to have different versions pulled up you can re-write without copy-pasting or breaking your stride to cmd + tab to the other window. I will have yesterday's draft pulled up and today's draft slightly overlapping it, so that I can see what I've written through the window of today's draft. Sublime Text apparently enables this for Windows users, but it's a no-go for Mac. I don't think Atom had this feature. BBEdit definitely does not have it. So, I've kept TextMate 2.0-rc.13 around, and have (superstitiously?) refrained from upgrading MacOS beyond 10.15.7 for fear that the transparency feature will break.

At a high design level, it makes sense to implement window transparency as theme that users can enable and tweak, if they like.

[johnm]

Yep, so many of these features (and, frankly, underlying philosophy) are why I'm still using Emacs after multiple decades.

[viniciuspalma]

Coming from iTerm and neovim, I also miss the opportunity to watch my videos or series at the same time that I code in one screen :D

[StuartMW-YL]

Like this? (LHS: Zed, Centre: nvim, RHS: iTerm)

You can use the below to customise Zed's background:

experimental.theme_overrides": {
    "background.appearance": "blurred",
    "background": "#282A3650", 

[mtwebb]

Before I had access to the beta, I read the docs, as such I started to associate the theme used there with zed. I appreciate it's not the riot of color found in most themes. I don't see it in the list of experimental themes (Andromeda is close). I think the below theme is a good addition to the default set:

[sriranggd]

I also vote for a theme with higher contrast. The existing ones (especially the light themes) look a bit washed out and dull.

A light theme with slightly higher contrast would greatly help me in using Zed daily at work. I created a separate discussion about this here : https://github.com/zed-industries/feedback/discussions/841 .

[SilentGlasses]

I think to start with, having the option to edit a CSS file of sorts where we can enter the primary set of colors would be a good start.
I am using Warp Terminal at the moment and the way they do it is via a Theme_Name.yaml file where you can add HEX color codes like this:

terminal_colors:
  bright:
    green: "#20b96c"
    magenta: "#1c834f"
    red: "#1c7f4c"
    cyan: "#1db267"
    white: "#1ed174"
    black: "#183024"
    blue: "#1e9358"
    yellow: "#24ea8f"
  normal:
    red: "#1c7f4c"
    green: "#20b96c"
    cyan: "#1db267"
    white: "#1ed174"
    blue: "#1e9358"
    black: "#183024"
    yellow: "#24ea8f"
    magenta: "#1c834f"
background: "#13241b"
foreground: "#1ed174"
accent: "#1ed174"
details: "darker"

This would allow basic users to generate a new theme by only needing to apply their colors to one place. I created a retro Green theme for Warp by just needing to select the right shades of green...

[SilentGlasses]

If you will go with a proper UI option, I think so far from the screenshots shared, this is the most useful and appealing way to do it.

[ghost]

Suggestion: More padding or spacing between the 'enable night shift" and the color squares above it

[ghost]

Question: This is probably a dumb question, but is there a list of all themes in Zed? I checked the Themes and Configuration tabs here...

Suggestion: In the themes tab of https://zed.dev/docs/configuration/configuring-zed there should be a table of built-in Zed themes and maybe some featured community themes.

[ghost]

I’d assumed that (VSCode has same settings) but wasn’t sure; I didn’t want to mess anything up and have to reinstall 😅

Like you said, I think it’d be helpful to add that to the Command Palette under the theme selector option.

[JosephTLyons]

Yeah, it should be there, that might be a bug. I opened an issue for it.

[khairulhaaziq]

We don't have any community themes yet because we don't have a system in place to load in custom themes. Themes are currently baked into Zed. We plan to allow for custom themes in the future, we just haven't had the time to put the code in place.

There is a theme selector in Zed:

Command palette > "theme selector: toggle"

This is crucial, please put this in the docs ASAP. cc @iamnbutler

[ghost]

@khairulhaaziq +1

[iamnbutler]

Apologies, I wasn't aware finding themes was an issue people were having. There is an update to the docs deploying now that should explain clearly the ways of picking a theme!

[photex]

I think CLion / IntelliJ have the gold standard for theme setup.

It’s stack based. You have General at the bottom, then "Language Defaults" (universal language concepts like keyword, string, number, and so on without any specifics), and finally Language specific things on top (letting you make customizations for syntax that isn't universally applicable). You can edit the scheme via the gui and you get a preview of the theme in the context you’re working with.

Visual Studio might be an example of the absolute worst way to theme.

[ghost]

From what you’ve described, that sounds amazing!!!! I think Visual Studio Code has a decent theming system - live previews of themes in a web editor. Not to mention a third party web app for making themes! 😀

[photex]

I guess I should be more clear that I was referring to Visual Studio proper (or whatever we're saying to differentiate it from Code and MonoDevelop Visual Studio Mac)

[ghost]

Oh no I understood you were referring to the .NET IDE Visual Studio. From what I’ve seen of it, I agree with you; the theming sucks

[dmitriid]

The downside to IntelliJ is that it's very hard to figure out how to customise non-editor areas: tree views, gutters etc.

I'd split code and non-code in a theme, but have both of them as stacks as you described.

[darrenbarklie]

I'm not familiar with CLion / IntelliJ setup (could you post a screenshot for reference @photex?), but I wonder if I'm imagining something similiar... For me, a palette of tones in a row of squares doesn't afford much context about the application of a theme.

I thought about presenting a "vertical slice" of directories, files, git status, editor windows, code blocks, syntax highlights, linting, with an editor window modal to allow real-time, contextual editing of most contexts within a single screen. Not unlike the VSCode live preview of themes, but with opportunity for realtime modification on top.

[georgemaine]

Would love to create or edit themes — just exposing the API would be enough while y'all figure out how to innovate in this area

[LoongLjt]

[Nicoka11]

Not the best place to ask but considering they gone for a completely native solution, with a custom renderer using rust it's probably not any time soon

[mhenrixon]

I would love to see something like this:

In Sublime Text, I have a plugin installed that handles color coding based on string length. This is very beneficial to how my brain works. The plugin can be fount at: https://github.com/mhenrixon/Sublime-Colorcoder

Curious if you'd be open to such a thing?

[shot-codes]

I can't live without Tonskys Alabaster theme. Everything else looks like an absolute mess after becoming accustomed to it. Also, the ability to color the text background instead of foreground is great for light color schemes (there's an example in the repo for Alabaster)

https://github.com/tonsky/sublime-scheme-alabaster

[apol76]

With the shell bottom pane using the same colors as the code on top of it, the two windows-parts are more or less indestinguishable for me. So for themes that come in pairs (light and dark variant), it would be great to have the upper part (code) use the dark theme of the pair, with the lower part (shell) use the light theme of the pair. Or vice versa.

I'm however not sure about the rest of the gui, I guess it should look like the shell pane, so that the code stands out from the rest of the window.

[mattly]

Seconding the request to add color to backgrounds as well as foregrounds -- it does help a lot with lighter themes. I still miss this feature from emacs or atom when using vscode.

[combdn]

Can we have an option to turn off syntax highlighting altogether? I’m unsure why, but my brain struggles to perceive the code if it’s colored like a Christmas tree. (In my own theme, I just use a dimmed color for the comments.)

It might be an unpopular thing, but I guess it is the simplest request to implement 😅

[shot-codes]

Have a look at Alabaster. I feel the same as you and once I discovered it I am unable to use anything else.

https://github.com/tonsky/sublime-scheme-alabaster

You can find ports for neovim and vscode if you are interested.

[overvale]

I really admire the work that's gone into the Modus Themes. According to the docs:

The Modus themes are designed for accessible readability. They conform with the highest standard for color contrast between combinations of background and foreground values. For small sized text, this corresponds to the WCAG AAA standard, which specifies a minimum rate of distance in relative luminance of 7:1.

Included are a few variations that target different kinds of color blindness. Seems like a worthy effort.

[koozz]

I like the Nord theme, it's easy to apply it to a lot of apps and have a unified color theme throughout your system.

[matthewgapp]

Is it just me or is it hard to see things in Zed? Something about the contrast or brightness makes it very hard to see, regardless of theme, which is one of the main reasons it's not my go-to editor yet.

[johnm]

Yeah, that drives me bonkers. At least now that we can start playing with the themes, I'll end up trying to override some values of some existing themes.

[overvale]

User Themes are now in preview. I've ported a few VSCode themes already.

[tecandrew]

finding it hard to customize the terminal text color to make it more readable like in VS Code's theme of Catppuccin

The highlighted line in Zed (right side) is hard to read with the light blue as the background

[tecandrew]

other difficult parameters to identify is the color of the correctly searched & highlighted text in the editor. can't seem to find the 'lightBlue' color in self.context in https://zed.dev/schema/themes/v0.1.0.json

in vscode's theming there are clear parameters for this

[noidwasavailable]

Where can I find the specs for the syntax object?

At https://zed.dev/schema/themes/v0.1.0.json, I can see:

"syntax": {
    "description": "The styles for syntax nodes.",
    "default": {},
    "type": "object",
    "additionalProperties": {
        "$ref": "#/definitions/HighlightStyleContent"
    }
},

I have tried

• https://zed.dev/schema/themes/v0.1.0/definitions/HighlightStyleContent.json
• https://zed.dev/schema/themes/definitions/HighlightStyleContent/v0.1.0.json
• https://zed.dev/schema/themes/definitions/HighlightStyleContent.json
• https://zed.dev/schema/themes/v0.1.0/#/definitions/HighlightStyleContent.json
  and others so far but no catch...!

[noidwasavailable]

I think a good addition to a theme generator workflow is to have a dummy file or a UI that shows you all the different parts of the selected theme. I really like on zed how I can open zed: open default keymap and see all the different options without having to worry about editing my default settings or something accidentally.

There are many aspects to a theme that are difficult to try out or test because they are not that common of an occurrence, such as unreachable, or key names which you are left guessing what they mean, such as variable.special or string.special.symbol.

Having a file, or even better, a piece of UI on a panel which shows you how different lines on your theme JSON affects how your editor looks would be a great UX to create your own themes.

[teziovsky]

Is there any guide on how to develop new themes in zed? 🤔 I mean step by step?

[jordy25519]

playing with an imported vscode theme via the zed tool (zed left, vscode right)

seems like vscode has more granular awareness of language syntax. see pub,impl,fn,strct all keywords same color while in vscode they differ

[james-gough-op]

Is there any ability to color folders and files yet?

Based on whether they've changed, are open etc.

[Takk8IS]

🟢 Brings the nostalgic essence of vintage green phosphor monitors to your Zed editor. This theme is crafted to offer a unique and immersive visual experience, capturing the original charm of early computing displays. Available in both dark and light versions, the Green Monochrome Monitor Theme transforms your coding environment with its distinct green-on-black and green-on-light-green aesthetics.

https://github.com/Takk8IS/green-monochrome-monitor-theme-for-zed

Green Monochrome Monitor Dark Theme

Green Monochrome Monitor Light Theme

Experience the originality and unique aesthetics of the Green Monochrome Monitor Theme and take your coding journey back to the era of early computing displays.

[mattly]

this is not the place to submit themes, you can submit them over here

[Takk8IS]

Thank you very much for referring me to the appropriate place. =)

[andreasvirkus]

It'd be great if I could set/persist different themes per project, so I could more easily distinguish between the active window and get context quickly.

(Sorry if this isn't the correct discussion for it or if it's already possible today)