UI Theme #6
Comments
|
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 ☁️ |
|
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! |
|
Any update on this? Looking forward to the release. |
|
@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 |
|
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. |
arcticicestudio
added
the
Hacktoberfest
|
This issue has been stale for too long and unfortunately the UI theme API still hasn't improved including design flaws like
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 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. |
arcticicestudio
added
status-blocked
and removed
Hacktoberfest
|
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.
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. |
|
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. |
Create the UI theme
Nord.sublime-themewith support for all available elements according to the Nord Design Guideslines.Elements
Windows
title_bar🚧edit_window(no direct styling, only used inparentsfield)switch_project_window(no direct styling, only used inparentsfield)SIdebar
sidebar_container🚧sidebar_tree🚧tree_row(used as subclass within other sidebar classes)sidebar_heading🚧sidebar_label🚧close_button🚧disclosure_button_control🚧icon_folder🚧icon_folder_loading🚧icon_folder_dup🚧icon_file_type🚧Tabs
tabset_control🚧tab_control🚧tab_label🚧tab_close_button🚧scroll_tabs_left_button🚧scroll_tabs_right_button🚧show_tabs_dropdown_button🚧Quick Panel
overlay_control🚧quick_panel🚧mini_quick_panel_row🚧quick_panel_row🚧quick_panel_label🚧quick_panel_path_label🚧Views
text_area_control(no direct styling, used by the color scheme, can be used inparentsfield)grid_layout_control🚧minimap_control🚧fold_button_control🚧popup_controlauto_complete_popup(auto complete popup container)popup_controlhtml_popup(Show Definitions and third-party packages container)auto_complete🚧table_row🚧auto_complete_label🚧Panels
panel_control🚧find_panelreplace_panelfind_in_files_panelinput_panel(container available via the API and used for actions like file renaming)console_paneloutput_panel(container available via the API and used for build results)switch_project_panelpanel_grid_control(layout container)panel_close_button🚧Status Bar
status_bar🚧panel_button_control🚧status_container🚧status_button🚧Dialogs
dialog🚧progress_bar_control🚧progress_gauge_control🚧Scroll Bars
scroll_area_control🚧scroll_bar_control🚧scroll_track_control🚧scroll_corner_control🚧puck_control🚧Inputs
text_line_controldropdown_button_controlButtons
button_control🚧icon_button_group(grid controlling the spacing of related icon buttons)icon_button_control🚧icon_regex🚧icon_case🚧icon_whole_word🚧icon_wrap🚧icon_in_selection🚧icon_highlight🚧icon_preserve_case🚧icon_context🚧icon_use_buffer🚧Labels
label_control🚧title_label_controlTool Tips
tool_tip_control🚧tool_tip_label_control🚧References
🚧 Work in progress
The text was updated successfully, but these errors were encountered: