This would be a very nice feature to have, seeing that JetBrains IDEs are so popular.

Hey,

Gauging interest before I have a crack at this: I'm playing with building themes dynamically from brands in https://github.com/antoligy/ft-themer and am wondering if there's appetite to support multiple "modes" (or, really, brands) instead of only Light and Dark.

It seems like a number of subcomponents, as well as all of the logic around naming/selecting colours, is based around there only light and dark themes.
What are your thoughts?

Alex

It seems that the README has broken images:

Also, thanks for adding Nova!

Requesting a template for Textual.

side by side feature will be amazing because every time I change color I have to scroll to see the preview.

Hello! 😸

Support for the Vivaldi browser (specifically the tabs) would be very much appreciated!

Thank you kindly for your consideration on the matter!

Here's Dracula theme for example: https://github.com/dracula/notepad-plus-plus/blob/master/Dracula.xml

Hi !
I think themer is a great idea with a great implementation, however, I really love to be able to export themes and color schemes for both Visual Studio (IDE, not VS Code) and Jetbrain's products (Intellij, Pycharm, PhpStorm, Gogland etc) .
Thanks!

Thanks for this awesome tool!

Looks like themer-vim creates a file that sets colors for guifg and guibg, but is there any chance ctermfg and ctermbg could be supported as well?

This is the format it uses: https://github.com/alacritty/alacritty/wiki/Color-schemes

Pasted here:

# KDE Breeze (Ported from Konsole)
colors:
  # Default colors
  primary:
    background: '#232627'
    foreground: '#fcfcfc'

    dim_foreground: '#eff0f1'
    bright_foreground: '#ffffff'
    dim_background: '#31363b'
    bright_background: '#000000'

  # Normal colors
  normal:
    black: '#232627'
    red: '#ed1515'
    green: '#11d116'
    yellow: '#f67400'
    blue: '#1d99f3'
    magenta: '#9b59b6'
    cyan: '#1abc9c'
    white: '#fcfcfc'

  # Bright colors
  bright:
    black: '#7f8c8d'
    red: '#c0392b'
    green: '#1cdc9a'
    yellow: '#fdbc4b'
    blue: '#3daee9'
    magenta: '#8e44ad'
    cyan: '#16a085'
    white: '#ffffff'

  # Dim colors
  dim:
    black: '#31363b'
    red: '#783228'
    green: '#17a262'
    yellow: '#b65619'
    blue: '#1b668f'
    magenta: '#614a73'
    cyan: '#186c60'
    white: '#63686d'

WhatsApp: https://www.whatsapp.com/
Ramme: https://github.com/terkelg/ramme
Alduin: https://alduinapp.github.io/
Wox: https://github.com/Wox-launcher/Wox
Punk: https://github.com/scholtzm/punk

It would be cool to be able to export Colors/Themes/Styles for Android-Apps.
Colors are defined in xml.

Sample:

<?xml version="1.0" encoding="utf-8"?>
<resources>
	<!-- colors for AppTheme.Blue -->
	<color name="colorPrimary">#3F51B5</color>
	<color name="colorPrimaryDark">#303F9F</color>
	<color name="colorAccent">#FF4081</color>
	<!-- colors for AppTheme.Red -->
	<color name="colorPrimaryRed">#F44336</color>
	<color name="colorPrimaryDarkRed">#D32F2F</color>
	<color name="colorAccentRed">#607D8B</color>
	<!-- colors for AppTheme.Green -->
	<color name="colorPrimaryGreen">#4CAF50</color>
	<color name="colorPrimaryDarkGreen">#388E3C</color>
	<color name="colorAccentGreen">#795548</color>
	<!-- colors for AppTheme.DarkOrange -->
	<color name="colorPrimaryDarkOrange">#FF9800</color>
	<color name="colorPrimaryDarkDarkOrange">#F57C00</color>
	<color name="colorAccentDarkOrange">#9E9E9E</color>
	<color name="black_overlay">#66000000</color>
</resources>

Can I convert from Sublime Text theme to themer?

It would be great to add support to create a theme for linux users of Xorg. The syntax is:

• colors 0-7 are the normal/dark colors
• colors 8-15 are the lighter/bright colors

(I didn't differentiate the bright from the dark colors hex codes in this example)

! general colors
*.foreground: #363f45
*.background: #fff
*.cursorColor: #363f45

! black + grey
*.color0: #0b141a
*.color8: #0b141a

! dark red + red
*.color1: #ff3033
*.color9: #ff4053

! dark green + green
*.color2: #0d8100
*.color10: #0d8100

! dark yellow + yellow
*.color3: #bf8c00
*.color11: #bf8c00

! dark blue + blue
*.color4: #0099ff
*.color12: #0099ff

! dark magenta + magenta
*.color5: #9854ff
*.color13: #9854ff

! dark cyan + cyan
*.color6: #00a5ab
*.color14: #00a5ab

! light grey + white
*.color7: #bbbbbb
*.color15: #bbbbbb

Hi. Before trying out themer, I checked for a license and noticed that none of the repos have a LICENSE file. I see that it's in each package.json's license field, but to make it more immediately obvious, please consider adding the file. GitHub even lets you do it from the UI.

Description

Usage of themer along with @themer/vim causes undefined variable errors

To reproduce

Steps to reproduce the behavior:

1. Use themer template
2. generate

Screenshots

Expected behavior

No errors

Environment information

CLI

Please fill out the following information if you are using the command-line interface. For the web UI, you can delete this section.

• Device [e.g. iPhone6, MacBook Pro]: MacBook Air
• OS [e.g. iOS, macOS]: Arch Linux
• OS version [e.g. 14.0]: Linux 5.8.13, Latest Arch
• Node version [e.g. 14.4.0]: 14.13.0
• themer version [e.g. 3.3.4]: 3.3.4
• Other themer packages and their versions [e.g. @themer/[email protected]]: @themer/[email protected]
• Vim version: 8.2

Additional context

Here's my config file

module.exports.colors = {
    dark: {
        accent0: "#FF4050",
        accent1: "#F28144",
        accent2: "#FFD24A",
        accent3: "#A4CC35",
        accent4: "#26C99E",
        accent5: "#66BFFF",
        accent6: "#CC78FA",
        accent7: "#F553BF",
    
        shade0: "#282629",
        shade1: "#474247",
        shade2: "#656066",
        shade3: "#847E85",
        shade4: "#A29DA3",
        shade5: "#C1BCC2",
        shade6: "#E0DCE0",
        shade7: "#FFFCFF",
    },
}

The problem is the if statement causing the variable to be scoped locally

  
  if &background == 'dark'
    
  let s:guishade0 = "#282629"
  let s:guishade1 = "#474247"
  let s:guishade2 = "#656066"

  . . .
  
  endif

I know the s: is supposed to scope the variable to the script, but for some reason, I get those errors. If I remove the if statements, themer works.

I think users should only need to give the darkest color and the lightest color for the shades. Themer should automatically generate the in-between colors using this formula:

DARK = someRGB
LIGHT = someRGB
N = number of colors we want (8 for themer)
DELTA = (LIGHT-DARK)/(N-1)
COLORS = [DARK+(DELTA*i) for i in range(N)]

It'd be really nice if Themer could support Guake - there's an outdated project out there to convert iTerm2 colors to Guake profiles, but the palette management has since then been simplified.

Would be cool to also have support for Xcode themes. Themes are in a XML format. See examples here.

It would be awesome if it had support for 5k backgrounds.

If anyone else interested, I can take over and submit a PR to provide a Firefox theme.

First of all, thanks for making themer! I have been looking for something like it for a while. I've known about Base16, but I stumbled upon themer today, and it looks a lot more like what I want. The gui and wallpapers are nice touches.

Since there are so many repos, I was just wondering if you have considered making a separate organization for themer. I might create a new template, but I don't know if you would prefer for that to exist under my personal account or under a hypothetical themer organization.

https://gnunn1.github.io/tilix-web/

The result screen in the README (Now check the gen/ folder...) has a nice font. Could you tell its name please?

Error detected while processing /home/blah/.vimrc:
line    6:
E35: No previous regular expression
Error detected while processing /home/blah/.vim/colors/ThemerVim.vim:
line   49:
E121: Undefined variable: s:guishade6
line   50:
E121: Undefined variable: s:ctermshade6
line   58:
E121: Undefined variable: s:guishade2
line   59:
E121: Undefined variable: s:ctermshade2
line   60:
E121: Undefined variable: s:guiaccent3
line   61:
E121: Undefined variable: s:ctermaccent3
line   62:
E121: Undefined variable: s:guiaccent4
line   63:
E121: Undefined variable: s:ctermaccent4
line   64:
E121: Undefined variable: s:guiaccent2
line   65:
E121: Undefined variable: s:ctermaccent2
line   66:
E121: Undefined variable: s:guiaccent5
line   67:
E121: Undefined variable: s:ctermaccent5
line   68:
E121: Undefined variable: s:guiaccent6
line   69:
E121: Undefined variable: s:ctermaccent6
line   70:
E121: Undefined variable: s:guiaccent7
line   71:
E121: Undefined variable: s:ctermaccent7
line   72:
E121: Undefined variable: s:guiaccent4
line   73:
E121: Undefined variable: s:ctermaccent4
line   74:
E121: Undefined variable: s:guiaccent5
line   75:
E121: Undefined variable: s:ctermaccent5
line   76:
E121: Undefined variable: s:guiaccent0
line   77:
E121: Undefined variable: s:ctermaccent0
line   78:
E121: Undefined variable: s:guiaccent0
line   79:
E121: Undefined variable: s:ctermaccent0
line   83:
E121: Undefined variable: s:guiaccent3
line   84:
E121: Undefined variable: s:ctermaccent3
line   85:
E121: Undefined variable: s:guiaccent2
line   86:
E121: Undefined variable: s:ctermaccent2
line   87:
E121: Undefined variable: s:guiaccent2
line   88:
E121: Undefined variable: s:ctermaccent2
line   89:
E121: Undefined variable: s:guiaccent0
line   90:
E121: Undefined variable: s:ctermaccent0
line   94:
E121: Undefined variable: s:guishade3
line   95:
E121: Undefined variable: s:ctermshade3
line   96:
E121: Undefined variable: s:guishade3
line   97:
E121: Undefined variable: s:ctermshade3
line   98:
E121: Undefined variable: s:guishade5
line   99:
E121: Undefined variable: s:ctermshade5
line  100:
E121: Undefined variable: s:guishade3
line  101:
E121: Undefined variable: s:ctermshade3
line  102:
E121: Undefined variable: s:guiaccent3
line  103:
E121: Undefined variable: s:ctermaccent3
line  104:
E121: Undefined variable: s:guiaccent3
line  105:
E121: Undefined variable: s:ctermaccent3
line  106:
E121: Undefined variable: s:guiaccent2
line  107:
E121: Undefined variable: s:ctermaccent2
line  108:
E121: Undefined variable: s:guiaccent2
line  109:
E121: Undefined variable: s:ctermaccent2
line  110:
E121: Undefined variable: s:guiaccent0
line  111:
E121: Undefined variable: s:ctermaccent0
line  119:
E121: Undefined variable: s:guishade1
line  120:
E121: Undefined variable: s:ctermshade1
line  121:
E121: Undefined variable: s:guishade2
line  122:
E121: Undefined variable: s:ctermshade2
line  123:
E121: Undefined variable: s:guishade0
line  124:
E121: Undefined variable: s:ctermshade0
line  125:
E121: Undefined variable: s:guishade1
line  126:
E121: Undefined variable: s:ctermshade1
line  127:
E121: Undefined variable: s:guishade1
line  128:
E121: Undefined variable: s:ctermshade1
line  129:
E121: Undefined variable: s:guiaccent5
line  130:
E121: Undefined variable: s:ctermaccent5
line  131:
E121: Undefined variable: s:guiaccent3
line  132:
E121: Undefined variable: s:ctermaccent3
line  133:
E121: Undefined variable: s:guiaccent2
line  134:
E121: Undefined variable: s:ctermaccent2
line  135:
E121: Undefined variable: s:guiaccent0
line  136:
E121: Undefined variable: s:ctermaccent0
line  137:
E121: Undefined variable: s:guiaccent2
line  138:
E121: Undefined variable: s:ctermaccent2
line  139:
E121: Undefined variable: s:guishade7
line  140:
E121: Undefined variable: s:ctermshade7
line  141:
E121: Undefined variable: s:guishade0
line  142:
E121: Undefined variable: s:ctermshade0
line  143:
E121: Undefined variable: s:guishade4
line  144:
E121: Undefined variable: s:ctermshade4
line  145:
E121: Undefined variable: s:guishade4
line  146:
E121: Undefined variable: s:ctermshade4
line  147:
E121: Undefined variable: s:guishade0
line  148:
E121: Undefined variable: s:ctermshade0
line  149:
E121: Undefined variable: s:guishade0
line  150:
E121: Undefined variable: s:ctermshade0
line  151:
E121: Undefined variable: s:guishade2
line  152:
E121: Undefined variable: s:ctermshade2
line  153:
E121: Undefined variable: s:guishade3
line  154:
E121: Undefined variable: s:ctermshade3
line  155:
E121: Undefined variable: s:guishade2
line  156:
E121: Undefined variable: s:ctermshade2
line  157:
E121: Undefined variable: s:guishade0
line  158:
E121: Undefined variable: s:ctermshade0
line  159:
E121: Undefined variable: s:guishade2
line  160:
E121: Undefined variable: s:ctermshade2
line  161:
E121: Undefined variable: s:guishade6
line  162:
E121: Undefined variable: s:ctermshade6
line  163:
E121: Undefined variable: s:guiaccent4
line  164:
E121: Undefined variable: s:ctermaccent4
line  165:
E121: Undefined variable: s:guiaccent3
line  166:
E121: Undefined variable: s:ctermaccent3
line  167:
E121: Undefined variable: s:guiaccent0
line  168:
E121: Undefined variable: s:ctermaccent0
line  169:
E121: Undefined variable: s:guishade7
line  170:
E121: Undefined variable: s:ctermshade7
line  171:
E121: Undefined variable: s:guishade0
line  172:
E121: Undefined variable: s:ctermshade0
line  173:
E121: Undefined variable: s:guiaccent7
line  174:
E121: Undefined variable: s:ctermaccent7
line  175:
E121: Undefined variable: s:guiaccent0
line  176:
E121: Undefined variable: s:ctermaccent0
line  177:
E121: Undefined variable: s:guiaccent2
line  178:
E121: Undefined variable: s:ctermaccent2
line  179:
E121: Undefined variable: s:guiaccent4
line  180:
E121: Undefined variable: s:ctermaccent4
line  181:
E121: Undefined variable: s:guiaccent1
line  182:
E121: Undefined variable: s:ctermaccent1
line  183:
E121: Undefined variable: s:guishade4
line  184:
E121: Undefined variable: s:ctermshade4
line  185:
E121: Undefined variable: s:guishade5
line  186:
E121: Undefined variable: s:ctermshade5
line  187:
E121: Undefined variable: s:guishade1
line  188:
E121: Undefined variable: s:ctermshade1
line  189:
E121: Undefined variable: s:guishade6
line  190:
E121: Undefined variable: s:ctermshade6
line  191:
E121: Undefined variable: s:guiaccent5
line  192:
E121: Undefined variable: s:ctermaccent5
line  193:
E121: Undefined variable: s:guishade1
line  194:
E121: Undefined variable: s:ctermshade1
line  195:
E121: Undefined variable: s:guiaccent0
line  196:
E121: Undefined variable: s:ctermaccent0
line  197:
E121: Undefined variable: s:guiaccent0
line  198:
E121: Undefined variable: s:ctermaccent0
line  199:
E121: Undefined variable: s:guiaccent4
line  200:
E121: Undefined variable: s:ctermaccent4
line  204:
E121: Undefined variable: s:guiaccent4
line  205:
E121: Undefined variable: s:ctermaccent4
line  206:
E121: Undefined variable: s:guiaccent5
line  207:
E121: Undefined variable: s:ctermaccent5
line  208:
E121: Undefined variable: s:guiaccent0
line  209:
E121: Undefined variable: s:ctermaccent0
line  215:
E108: No such variable: "s:guishade0"
line  216:
E108: No such variable: "s:ctermshade0"

I set background to dark in .vimrc, but the generated readme.md file makes no mention of this being necessary.

set background=dark

I'm not sure if this is supposed to be necessary or not. background was light but I'm not sure what's setting that value, so I just override it right before setting color ThemerVim.

src/resolve.spec.js: "nonexistant" should be "nonexistent"

I have used for a while your tool for color schemes on jetbrains, and i have to manually convert some schemes to be used on my terminal on KDE.
Would you please consider add the template to KDE Konsole colorscheme file.
Thanks in advance

Support for Brackets editor theme exports, please.

brackets.io

powerline-rs template

I implemented support for the powerline-rs program, basically a re-implementation of powerline written in rust. I thought this soft is not vital, so I'd keep it as a third-party plugin. On the other hand, you have vim-lightline in the main project, and powerline-rs is basically the same thing for zsh/bash.

It's available in npm with

npm install themer-powerline-rs

the source code is GPLv2, available here in gitlab. Would you consider adding the link to the community-contributed templates ? That would be fine enough for me.

Thank you for this great soft !

Windows Terminal doesn't have a yellow key, only a bright yellow one.

I have tried out Themer for a few hours and I tried to make a new color scheme for Sublime Text. I had some problem figuring out which accents and shades were used for what in Sublime. I tried to view it manually later but it would be great if it was possible to see it directly in the app when customizing a theme. The mappings could be viewed under a menu or something.

Looks like Swift 4 has broken Themer's generation of Terminal.app palettes. Here's a screenshot of what I mean:

NOTE: This only appears to affect Terminal.app. Everything else exports as expected.

Hey, I just made a color scheme for GNOME terminal for the nova color scheme, and I found themer. It might be cool to add GNOME Terminal support to themer. What do you think?

For some reason when i click on one of the wallpapers preview the website get frozen and after a whiles a dead bird icon pops out , and i have to refresh it to get it to work again

Not sure how tricky it might be to generate a prismjs theme as well. Thanks.

Would be windows only ofcource, the output would be a .reg file, like this example:

https://github.com/neilpa/cmd-colors-solarized/blob/master/solarized-light.reg

I can't express my current theme in the configuration provided:
Desired output:

# black
color0    #282828
color8    #928374

# red
color1    #cc241d
color9    #fb4934

# green
color2    #98971a
color10   #b8bb26

# yellow
color3    #d79921
color11   #fabd2f

# blue
color4    #458588
color12   #83a598

# magenta
color5    #b16286
color13   #d3869b

# cyan
color6    #689d6a
color14   #8ec07c

# white
color7    #a89984
color15   #ebdbb2

Closest configuration:

module.exports.colors = {
  "dark": {
    "shade0" : "#282828",
    "accent0": "#cc241d",
    "shade1" : "#928374",
    "accent1": "#fb4934",
    "shade2" : "#98971a",
    "accent2": "#b8bb26",
    "shade3" : "#d79921",
    "accent3": "#fabd2f",
    "shade4" : "#458588",
    "accent4": "#83a598",
    "shade5" : "#b16286",
    "accent5": "#d3869b",
    "shade6" : "#689d6a",
    "accent6": "#8ec07c",
    "shade7" : "#a89984",
    "accent7": "#ebdbb2"
  }
};

Result: (sorted for cleaner comparison)

# generated by themer-kitty
# dark variant of theme colors.js
foreground #689d6a
background #282828
color0 #282828
color8 #cc241d
color1 #928374
color9 #fb4934
color2 #fabd2f
color10 #83a598
color3 #b8bb26
color11 #b8bb26
color4 #d3869b
color12 #d3869b
color5 #ebdbb2
color13 #ebdbb2
color6 #83a598
color14 #83a598
color7 #689d6a
color15 #a89984

This doesn't allow using the bolded accent colors for terminals as far as I can tell. Is there something I'm doing wrong?

I’d like to request for Telegram support. Currently, Telegram (clients) have different theme formats specifically for:

• Telegram for Desktop
• Telegram for Android
• Telegram for iOS
• Telegram X for Android

The new vscode config can be a good thing as the vscode usage is growing.
Here is the reference: https://code.visualstudio.com/docs/getstarted/theme-color-reference

It would be really nice to be able to export colours/themes to Xcode

The easiest way to distribute/install Firefox themes is with https://color.firefox.com/

It would be really cool if we had a preview link.

Chrome
Firefox (preview)
Sketch palettes

the link on desktop shows this (it does not work on mobile)

I have no idea how GTK themes are colored, but I think this would be a cool idea. It might be more than you can handle, and that's ok.

Big fan of Terminator, if anyone is interested (and it's interesting for the project mantainers), I can do a PR to provide support for this.

Heyo!

I've implemented a Mattermost template. I'd love if it could be incorporated into the README and possibly the site. Thanks!

Not an issue, but wanted to send some appreciation for all your great work on themer. It has made my software development and computer usage extremely delightful. So much so, that you inspired me to whip together https://www.github.com/tomselvi/nightenv which really wouldn't have been possible without it.

Thank you!

Windows terminal has also ability to be customized

I'll preface this issue by saying i have only used the Web UI so far. Oh, and what a great project!

I am currently having to brute-force my way through when using the web UI to make my theme, which is an indication of a underlying problem: The lack of intention for each shade and accent

Specifically accent1 has no other description than "syntax", and is not showcased at all in the code preview in the web UI. It also seems like the literals in the code preview are colored by accent0, which have the description "error, vcs deletion" description. Some colors are both used in the foreground and in the background, making it hard to create a cohesive color experience.

I propose the following:

• Add code examples for more languages.
  Of interest are languages with explicit typing
• Add a terminal example more user can easily recreate locally.
  This makes for a better reference.
• Switch around some of the accents for better consistency, more on that below
• The shade colors should not be used as both foreground (text) and background colors, there should be a clearly defined separation. Perhaps reserve shade 0, 1 and 2 for background and the rest for foreground colors?

While at it, I suggest the following descriptions from either what I've observed to be their primary use, or what i think they should changed into:

Notes:

1. currently used as the font color in the editor ruler
2. borders currently use this, perhaps move borders to shade1? The terminal example also use this color alot, which i believe misrepresents the normal terminal experience
3. currently used as the editor ruler highlight and the color of the unordered list
4. I have seriously no idea where this is used
5. is currently the text-selection color in the web UI, even though shade2 is supposed to be this going by the current description

They should indicate what the colors will be used for in the templates. And also indicate for the template authors where they should use the colors.

This does not have to be the "hard" definition, but perhaps be more like a common guideline. The 'notes' column however is worth noting, since they describe why the current situation confuse me.

I understand a lot of this came as baggage from base16 schemes