• Hello [name]! Thanks for joining the GMC. Before making any posts in the Tech Support forum, can we suggest you read the forum rules? These are simple guidelines that we ask you to follow so that you can get the best help possible for your issue.

Discussion VS2015 Theme - Flat Visual Studio skin for GMS2 (Light/Dark) - Updated August 25 for GMS2.1

I

iluvfuz

Guest
Updated August 25, 2017 (2.1)

A usable GMS2 theme slapped together from the default dark skin. I'll continue to occasionally update this as I use it, so feel free to point out issues or modify it to another skin. I still plan on replacing icons and cursor images, theming UI elements I didn't get to, and other various improvements.

Aside from ripping off Visual Studio 2015 and moving away from what I feel is a garish GMS2 Dark skin, the intent of this theme is to reduce clutter and make the UI look more native Windows.


Screenshots:
Dark (Green):



Dark (Blue):


Light (Blue):



Downloads:

Dark (Green)

Dark (Blue)

Light (Blue)

Read the README in the download for help with:
- installing the theme
- using the included code color scheme derived from Visual Studio (shown in screenshots above)
- customizing the theme to any color

Included in the download is a super-special bonus gift for you, a VS2015-styled icon that looks more like AMD's that you can slap over the shortcut or pinned tab:
 
Last edited by a moderator:

gnysek

Member
I would love to see better alignment of resource tree (sprite thumbs should be under groups open/close triangle icons, not under group label).
 
D

Derme

Guest
I mistook the blue screenshot for a VS comparison at first glance, so it's certainly accurate.

Thanks for sharing!
 

Dan

GameMaker Staff
GameMaker Dev.
I mistook the blue screenshot for a VS comparison at first glance, so it's certainly accurate.

Thanks for sharing!
I did exactly the same - had to scroll back up and double-check the image. Wow!
 
I

iluvfuz

Guest
I would love to see better alignment of resource tree (sprite thumbs should be under groups open/close triangle icons, not under group label).
Sorry, I'm not entirely sure what you mean. GMS2's explorer has a fairly standard tree list (except for folder icons). Eliminating the indent altogether without indenting the expanded folder and contents results in an in-line list.

Also, added updated links and screenshots to the topic post with "version 1.1"
- most IDE icons replaced with Visual Studio-styled icons (and Photoshop for image editor)
- Python script in theme folder (recolor.py) to quickly customize the theme to any RGB color
- second pass polishing

If you end up using the theme and finding any janky looks, let me know! Still finding where pieces fit together as I use it.
 
Last edited by a moderator:
L

LSGDƎV

Guest
Dude, you are the man! I'm using this on GameMaker Studio 2.0 Trial, and it looks super pleasing. I'm using the Blue variant, and I love it for sure. Thank you for making such a good and flat theme. :)
 
B

Big_Macca_101

Guest
This is possibly the best skin i have seen for any version of GM.... I tip my hat to you!
 
I

iluvfuz

Guest
Updated to 1.2
- cursors reskinned (styled after native Windows Aero cursors for IDE windows and Photoshop tool cursors for image editor)
- fixed up the list-view explorer, windows, docking, image/room editors
- bunch of other polishing and standardization in preparation to allow better automatic recoloring, for a light theme one day...

Glad you guys find it helpful! A lot of trial and error and fixing as things pop up, so I'm happy to save the rest of you the time of theming flat from scratch.
 
C

ChristopherD

Guest
Finally got a chance to install this theme. It's even more wonderful than I had expected. One million thank yous.
 
I

izark

Guest
Installed the blue version, many thanks !!

Edit: My only (constructive) criticism is that the color for functions is light gray, which, for me, is almost impossible to distinguish from white text, so I will change it.
 
Last edited by a moderator:
I

iluvfuz

Guest
Installed the blue version, many thanks !!

Edit: My only (constructive) criticism is that the color for functions is light gray, which, for me, is almost impossible to distinguish from white text, so I will change it.
As always, happy people like it!

I know what you mean about the code color scheme. I couldn't decide on much to color-code. Visual Studio uses a pretty simple three-toned scheme, which I assume the purpose of is to avoid over-highlighting which can clutter and confuse. Think of someone marking up a document with 6 different color highlighters, leaving only occasional spots blank. Once you color functions and local variables on top of what VS does, virtually everything is uniquely colored. I do appreciate that highlighting different functionalities is helpful for skimming long or complex code, and especially helpful for people inexperienced with the language/IDE to understand the logic. I compromised by making the text/brackets, local variables, and function calls grayscale with unique intensities.

I'll take another look at it when I can, but I do sort of lean toward Microsoft's default. Color coding is great for visually jumping through code, but I also often find in excess it leads to relying on pattern-finding/scavenger-hunting than understanding the code (which is vital with other people's code or returning to your own code a few days/weeks/months later). Ideally, the language (and GML does its part) and the code itself should generally be self-descriptive like with any other written language, annotated by comments as necessary. But I also realize GM's code editor is still pretty basic compared to VS' robust editor, meaning we don't have features like being able to mouse-over for summaries, quickly see/jump to a variable or function's definition, refactoring features, etc. Although I'll tweak the colors further, I'm comfortable with the middleground I've reached right now.

I know everyone has their own preferences, though. I assume a lot of people downloading this already have their own color scheme set up, so the default wouldn't affect them. But if you were forced to switch and prefer GM's default, you can copy over styles_code_editor.json from the default dark theme at Dark\Styles to VS Dark\Styles. Resetting to default then will return it to normal. Or, like you did, tweak colors yourself and they will persist across themes.
 
E

Ell

Guest
Just wanted to drop in and say this is a brilliant theme! A nice alternative to the stock themes. It is especially nice for myself as I use VS frequently.
 
I

iluvfuz

Guest
Updated to 1.3
- skinned start page
- skinned Marketplace library
- skinned other auxiliary UI to limited extents
- various other fixes and changes

Continuing to tweak things as they come up. Will bring out a light theme (matching VS2015's light theme) relatively soon. Shoot me a request if you want a custom color accent besides green or blue and don't want to run the included Python script.
 

Mick

Member
Nice skin! I especially like the coloured buttons for saving etc., makes it easier to navigate. I'm having one issue though, when using the theme, the custom mouse cursors are gone. Is this by design or is there a bug in the skin / IDE?
 

YellowAfterlife

ᴏɴʟɪɴᴇ ᴍᴜʟᴛɪᴘʟᴀʏᴇʀ
Forum Staff
Moderator
Nice skin! I especially like the coloured buttons for saving etc., makes it easier to navigate. I'm having one issue though, when using the theme, the custom mouse cursors are gone. Is this by design or is there a bug in the skin / IDE?
IIRC you have to copy the cursors from the base skin - they are currently not inherited by themes due to... whatever reason.
 
I

iluvfuz

Guest
Nice skin! I especially like the coloured buttons for saving etc., makes it easier to navigate. I'm having one issue though, when using the theme, the custom mouse cursors are gone. Is this by design or is there a bug in the skin / IDE?
By design...or, at least, to my taste for the Visual Studio look. They were deliberately replaced by as close to a copy of Windows cursors (at 100% display scale) as I could manage. Guess it worked! I recommend replacing or deleting the specific Windows cursors you don't like, rather than replacing or deleting the entire Cursors folder.

Updated to 2.0
- added light theme!
- skin additional UI (Ctrl+T GOTO modal, runtime settings, survey, notifications)
- numerous other fixes and tweaks

The light theme has a few quirks I didn't iron out (unless someone happens to know):
- workspace window titlebar labels cannot be set differently when focused, follows the general "label" color
- image and room editor mouse coordinates in the status bar hardcoded to white, making it unreadable on light backgrounds
 
V

viking.potato

Guest
Loading any of these themes is causing GMS2 to crash for me. Removing them fixes it.
 
M

mdbussen

Guest
Loading any of these themes is causing GMS2 to crash for me. Removing them fixes it.
same for me. Only tried the Dark Blue skin but GMS2 never came back after it restarted to load the new skin. Every time I try and start GMS2 I can see the process start up in Windows Task Manager and then close itself for some reason. I deleted the folder associated with this skin in the GUI/skins folder and now GMS2 loads up correctly.
 
I

iluvfuz

Guest
I'll look into it soon. The Start screen did change with the latest version, so I'll update that, but I'm not seeing any breaking issues like that even on a fresh installation. Maybe try uninstalling and reinstalling GMS if you're able to (user settings persist)?

Otherwise, not really sure what it could be. The themes don't include any layout changes and any bad styling sheets should fall back to the default Dark theme.
 
I

iluvfuz

Guest
Celebrate GMS2.1! We get an integrated debugger, nicer logo, and finally have proper code editor font rendering! Made a quick pass, mostly to fix the bigger issues.

Updated to 2.1
- sharper IDE toolbar icons and stylized closer to VS
- reskinned the new Resources tree (thanks @offalynne)
- reskinned the new Start menu (from last release)
- skinned the new debugger buttons
 
R

Richard

Guest
You have a new folder as well ;)
C:\ProgramData\GameMakerStudio2\Skins

This should mean you won't have to keep re-adding them after every update
 
E

Edmanbosch

Guest
Seems cool, although horizontal separators and tree lines for the Resource Tree don't seem to appear with the VS Light Blue theme. It's also really hard to see the icon for extensions in the Resource Tree(same theme).
 

Mick

Member
Seems cool, although horizontal separators and tree lines for the Resource Tree don't seem to appear with the VS Light Blue theme. It's also really hard to see the icon for extensions in the Resource Tree(same theme).
Thanks for the update! I have the same issue as Edmanbosch with the dark green theme, otherwise it looks gooood!
 
I

iluvfuz

Guest
Seems cool, although horizontal separators and tree lines for the Resource Tree don't seem to appear with the VS Light Blue theme. It's also really hard to see the icon for extensions in the Resource Tree(same theme).
This is intended since Visual Studio's tree menus don't use them, and I prefer the look myself (now if only there were folder icons)!

But this is a quick tweak if you have a minute or two to:
1. Open up the downloaded VS skin folder
2. Open the Styles folder
3. Open styles_treeview.json in a text editor
4. Scroll all the way to the bottom to where you see the "resourcetree_colours" key
5. Change the first two zeroes to FF for the values of horizontal_separator and treeline, from "#00..." to "#FF..."
6. Restart GameMaker

I can add it as an option to the Python script if you'd like, but I figure most people won't use it and I don't want to add a bunch of alternate downloads!
 
E

Edmanbosch

Guest
This is intended since Visual Studio's tree menus don't use them, and I prefer the look myself (now if only there were folder icons)!

But this is a quick tweak if you have a minute or two to:
1. Open up the downloaded VS skin folder
2. Open the Styles folder
3. Open styles_treeview.json in a text editor
4. Scroll all the way to the bottom to where you see the "resourcetree_colours" key
5. Change the first two zeroes to FF for the values of horizontal_separator and treeline, from "#00..." to "#FF..."
6. Restart GameMaker

I can add it as an option to the Python script if you'd like, but I figure most people won't use it and I don't want to add a bunch of alternate downloads!
Why not just make it show normally? There is an option in the preferences to disable it for those who don't like it.
And what about the issue with the extensions icon I mentioned?
 
I

iluvfuz

Guest
Why not just make it show normally? There is an option in the preferences to disable it for those who don't like it.
And what about the issue with the extensions icon I mentioned?
On that note, you can also go into the Preferences > Resource Tree > Colours and jack the alpha slider to 255, but I do encourage people to edit the theme files directly and even branch off their own themes if desired (will probably add a -clean option to the script to remove temporary files and comments). I don't know how much I'll maintain this since I'm not regularly using GMS2, so I don't mind at all if someone uses anything from this theme as reference or a basis.

The theme as-is (kinks and limitations aside) is what I prefer out-of-the-box and what looks closest to Visual Studio as per the intent of the theme, so the above is the same reasoning for replacing the workspace background, editor controls, code color scheme, and previously the spacing of the resource tree items.

Oh, and you're right that the Extensions icon is unskinned. I'll be sure to get to that soon™!
 
G

Gadnief

Guest
Great Skin! Use it on windows a lot :) Is it possible to install the skin on OSX?
 
does anyone know how to change the color for rooms which are inherited. This room has a parent room so all the layers get highlighted in this color which makes it hard to read. I just wanna know how/where I need to go to edit this.

 
O

Osoy

Guest
I work all day in Visual Studio for a living (non game related) and your Dark theme for GMS2 is a god send, thank you very much!
 

kburkhart84

Firehammer Games
Wow, that dark blue theme is basically Visual Studio as I know it! I just grabbed it. Thanks for the work you put into it!
 
3

39digits

Guest
I tried to use this skin for mac, Unfortunately, it did not work :(
You can right-click on the app and select "Open Package Contents" then browse to Contents/MonoBundle/GUI/Skins and put the folder in there. I'm not sure yet what impact that would have when GameMaker gets its next update though.

Edit: But putting the skins in /Users/Shared/GameMakerStudio2/Skins worked for me.
 
Last edited by a moderator:
Top