UI Theme

Question

UI Theme

arcticicestudio opened this issue 7 years ago · 8 comments

Answer 1 · 2018-02-24T07:11:32.000Z

Due to the fact that my current life situation doesn't allow me to spend as much time on my projects as before like also announced on Twitter. I'm happy for every help to get this missing theme feature done to finally release the first version and push it to the package registry.

Unfortunately the Sublime theme API is a pain to work with, especially when it comes to adding custom icons and adjusting the layout for them. SVG images aren't supported, so everything has to be done using PNG images (including multiple files per resolution) which must be designed with transparent space to match the UI layout and the actual icons must be placed kind of pixel-perfect, otherwise icons won't match the UI.

If everyone is interested to help to create these icons I'll upload the source SVG files ☁️

Answer 2 · 2018-02-24T20:08:03.000Z

I would be happy to contribute what I can. I've worked with the Sublime theme API before and might be able to get a simple version going pretty quickly.

Thanks for all the work you've done!

Answer 3 · 2018-03-24T01:22:19.000Z

Any update on this? Looking forward to the release.

Answer 4 · 2018-04-03T05:47:07.000Z

@zpreston123 Unfortunately, without the SVG (and also the PNG) files, there isn't much I can do. I would suggest using the Adaptive theme for now or use one of the community built ones. Here's one I built a while ago but I haven't updated it in a while and it's only passable at best. Ignore the .tmTheme file as that was my (not so great) attempt at trying to create a color scheme before the official one was released.

Answer 5 · 2018-04-03T07:00:51.000Z

Sorry for the delay, but unfortunately my time to work on my projects is really limited at least until August this year (job and studying eating all my time).

Basically the UI theme I've prototyped so far is adapted from the great Material Theme (which is no longer under active development since Sublime Text is an obsolete software compared to other editors like Atom or VS Code), because I refused to get into Sublimes confusing and unnecessarily complicated designed theme API and the fact that most users like to combine the Nord Atom Syntax theme with the Material UI Theme for Atom. I've adjusted some elements to better match the Nord Atom UI theme, but stopped after trying to customize the icons (needs pixel perfect PNGs with transparent space for padding ❔ ❕ ). I planned to use Material Icons for the time being until there's maybe a custom icon set in the distant future.

Answer 6 · 2019-08-02T15:38:28.000Z

This issue has been stale for too long and unfortunately the UI theme API still hasn't improved including design flaws like

SVG images are not currently supported.

Therefore I decided to close this issue for now and skip the development of a UI theme. There are many stable and long-time UI themes available that are playing well with Nord as editor/syntax theme including some adaptive themes.

My free time to work on all of my project, either open source or private, as well as contributions to a lot of other projects on GitHub are fairly limited. I simply don't want to spend a lot of time for a port project whose commercial target application lifetime is almost over due to free and way more advanced open source projects like VS Code or Atom as well as awesome products like the ones from JetBrains (IntelliJ, Goland, Webstorm etc.).

Anyway, the syntax/editor color theme will still be maintained and as of Sublime Text 3 build 3149 the theme API has been refactored to use JSON based themes to make it way simpler and more intuitive with more features. Nord currently uses the now deprecated/legacy .tmTheme format (XML) which will be ported to the new format as well as implementing missing features that have been added in later versions. Please see the corresponding issues in the projects backlog and versions board for more details.

I know the cancellation of the UI theme might be a little bit disappointing, but I also hope you understand my point of view. Maybe the Sublime Text creators notice that they need to tweak their APIs in order to keep the community motivated to create custom content, otherwise the application will go down in the large selection of free and better alternatives.

Answer 7 · 2022-01-17T16:49:26.000Z

This is a quick and dirty attempt that mostly works.

It's not perfect as there are some places I can't find the colour for (e.g. the text box in the find box in the screenshot) but it's 90% of the way there.

Select default dark theme
Select Nord colour scheme
Go to preferences -> customize theme

Add the following:

// Documentation at https://www.sublimetext.com/docs/themes.html
{
	"variables":
	{
		"scroll_bar_bg": "#eceff4",
		"scroll_bar_puck_bg": "#5e81ac",
		"sidebar_bg": "#3b4252",
		"status_bar_bg": "#434c5e",
		"sidebar_label": "#d8dee9",
		"sidebar_label_selected": "#eceff4",
		"sidebar_row_selected": "#4c566a",
		"overlay_bg": "#434c5e",
		"overlay_selected": "#eceff4",
		"sidebar_heading": "#d8dee9",
		"base_hue": "#2e3440",
		"base_tint": "#eceff4",
		"text_fg": "#d8dee9",
		"tool_tip_fg": "#3b4252",
		"tabset_dark_tint_mod": "#000",
		"tabset_dark_bg": "#d8dee9",
		"tabset_medium_dark_bg": "#434c5e",
		"auto_complete_bg_light_tint": "#3b4252",

		"sidebar_scroll_bar_bg": "#81a1c1",
		"sidebar_scroll_bar_puck_bg": "#81a1c1",
		"scroll_bar_dark_bg": "#81a1c1",
		"scroll_bar_puck_dark_bg": "#81a1c1",

		"text_widget_dark_modifier": "blend(#434c5e 0%)",
		"text_widget_light_modifier": "blend(#4c566a 0%)",

	},
	"rules":
	[
		{
			"class": "text_area_control",
			"settings": {
				"inactive_sheet_dimming": true,
			},
			"attributes": ["highlighted"],
			"parents": [{"class": "text_line_control"}],
			"background_modifier": "var(text_widget_light_modifier)",
		},
	]
}

At least it (99%) fits in with the rest of my UI now

edit: Updated the theme, I managed to style the find box and scrollbars as well.

Answer 8 · 2022-09-25T10:48:40.000Z

I came across this issue looking into having a full Sublime Text Nord theme. @TRPB you did a great job with your customization. I added some changes which for were missing or I did not like that much (the command palette input was too blue and luminous for me. Also, I styled the "selected" state for the command palette entries and the "selected" state for the side bar). Here's what I came up with:

// Documentation at https://www.sublimetext.com/docs/themes.html
{
    "extends": "Default.sublime-theme",
    "variables":
    {
        "scroll_bar_bg": "#eceff4",
        "scroll_bar_puck_bg": "#5e81ac",
        "sidebar_bg": "#3b4252",
        "status_bar_bg": "#434c5e",
        "sidebar_label": "#d8dee9",
        "sidebar_label_selected": "#eceff4",
        "sidebar_row_selected": "#4c566a",
        "overlay_bg": "#434c5e",
        "overlay_selected": "#eceff4",
        "sidebar_heading": "#d8dee9",
        "base_hue": "#2e3440",
        "base_tint": "#eceff4",
        "text_fg": "#d8dee9",
        "tool_tip_fg": "#3b4252",
        "tabset_dark_tint_mod": "#000",
        "tabset_dark_bg": "#d8dee9",
        "tabset_medium_dark_bg": "#434c5e",
        "auto_complete_bg_light_tint": "#3b4252",

        "sidebar_scroll_bar_bg": "#81a1c1",
        "sidebar_scroll_bar_puck_bg": "#81a1c1",
        "scroll_bar_dark_bg": "#81a1c1",
        "scroll_bar_puck_dark_bg": "#81a1c1",

        "text_widget_dark_modifier": "blend(#434c5e 0%)",
        "text_widget_light_modifier": "blend(#eceff4 85%)",
    },
    "rules":
    [
        {
            "class": "text_area_control",
            "settings": {
                "inactive_sheet_dimming": true,
            },
            "attributes": ["highlighted"],
            "parents": [{"class": "text_line_control"}],
            "background_modifier": "var(text_widget_light_modifier)",
        },
        {
            "class": "tree_row",
            "attributes": ["selected"],
            "layer0.tint": "color(#5E81AC a(0.65))",
            "layer0.opacity": 0.6,
        },
        {
            "class": "mini_quick_panel_row",
            "layer0.tint": "#5e81ac",
            "layer0.opacity": 0.0
        },
        {
            "class": "mini_quick_panel_row",
            "attributes": ["selected"],
            "layer0.tint": "#5e81ac",
            "layer0.opacity": 0.15
        },
        {
            "class": "mini_quick_panel_row",
            "parents": [{"class": "window", "attributes": ["file_light"]}],
            "attributes": ["selected"],
            "layer0.tint": "#5e81ac",
            "layer0.opacity": 0.5
        },
        {
            "class": "quick_panel_row",
            "layer0.tint": "#5e81ac",
            "layer0.opacity": 0.0
        },
        {
            "class": "quick_panel_row",
            "attributes": ["selected"],
            "layer0.opacity": 0.15
        },
        {
            "class": "quick_panel_row",
            "parents": [{"class": "window", "attributes": ["file_light"]}],
            "attributes": ["selected"],
            "layer0.tint": "white",
            "layer0.opacity": 0.35
        }
    ]
}

Edited 2022-09-25: there were a couple of entries missing that I did not copy before.

UI Theme

Elements

Windows

SIdebar

Tabs

Quick Panel

Views

Panels

Status Bar

Dialogs

Scroll Bars

Inputs

Buttons

Labels

Tool Tips

References