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

Discussion in 'GameMaker Studio 2 Community Tech Support' started by iluvfuz, Mar 13, 2017.

  1. iluvfuz

    iluvfuz Member

    Joined:
    Jun 21, 2016
    Posts:
    16
    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):

    [​IMG]

    Dark (Blue):
    [​IMG]

    Light (Blue):
    [​IMG]


    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:
    [​IMG]
     
    Last edited: Aug 25, 2017
  2. babyjeans

    babyjeans Member

    Joined:
    Dec 3, 2016
    Posts:
    103
    Just started trying out the Green one, it's very aesthetically pleasing!
     
  3. gnysek

    gnysek Member

    Joined:
    Jun 20, 2016
    Posts:
    1,202
    I would love to see better alignment of resource tree (sprite thumbs should be under groups open/close triangle icons, not under group label).
     
  4. Derme

    Derme Member

    Joined:
    Jun 21, 2016
    Posts:
    6
    I mistook the blue screenshot for a VS comparison at first glance, so it's certainly accurate.

    Thanks for sharing!
     
    Jobo likes this.
  5. Elevory

    Elevory Member

    Joined:
    Aug 27, 2016
    Posts:
    37
    Lovely work. Using Dark Blue at the moment.
     
  6. Dan

    Dan YoYo Games Staff YYG Staff

    Joined:
    Apr 15, 2016
    Posts:
    135
    I did exactly the same - had to scroll back up and double-check the image. Wow!
     
  7. FocusedBit

    FocusedBit Member

    Joined:
    Oct 15, 2016
    Posts:
    23
    @iluvfuz - I'd buy you a round but this will have to do ;)

    [​IMG]

    Outstanding!

    Cheers
     
  8. iluvfuz

    iluvfuz Member

    Joined:
    Jun 21, 2016
    Posts:
    16
    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: Apr 10, 2017
  9. flashice2030

    flashice2030 Member

    Joined:
    Mar 30, 2017
    Posts:
    7
    WOW,COOL ,Wish you design more cool theme.
     
  10. LSGDƎV

    LSGDƎV Member

    Joined:
    Mar 9, 2017
    Posts:
    5
    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. :)
     
  11. Big_Macca_101

    Big_Macca_101 Member

    Joined:
    Jun 20, 2016
    Posts:
    112
    This is possibly the best skin i have seen for any version of GM.... I tip my hat to you!
     
  12. Roman Richter

    Roman Richter Member

    Joined:
    Apr 8, 2017
    Posts:
    9
    Thanks, awesome skin! :)
     
  13. ChristopherD

    ChristopherD Member

    Joined:
    Apr 4, 2017
    Posts:
    8
    Thank you, thank you, thank you, thank you, thank you
     
  14. iluvfuz

    iluvfuz Member

    Joined:
    Jun 21, 2016
    Posts:
    16
    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.
     
    ChristopherD and slojanko like this.
  15. Kios

    Kios Member

    Joined:
    Feb 11, 2017
    Posts:
    29
    Really liked the Blue theme! Great work!
     
  16. ChristopherD

    ChristopherD Member

    Joined:
    Apr 4, 2017
    Posts:
    8
    Finally got a chance to install this theme. It's even more wonderful than I had expected. One million thank yous.
     
  17. Kuro

    Kuro Member

    Joined:
    Feb 21, 2017
    Posts:
    237
    Really like these themes. Thank you!
     
  18. rIKmAN

    rIKmAN Member

    Joined:
    Sep 6, 2016
    Posts:
    3,356
    Just installed the blue version, looks very slick!

    Great job and thanks! :)
     
  19. izark

    izark Member

    Joined:
    Jul 20, 2016
    Posts:
    187
    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: Apr 15, 2017
  20. iluvfuz

    iluvfuz Member

    Joined:
    Jun 21, 2016
    Posts:
    16
    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.
     
  21. Ell

    Ell Member

    Joined:
    Apr 2, 2017
    Posts:
    5
    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.
     
  22. iluvfuz

    iluvfuz Member

    Joined:
    Jun 21, 2016
    Posts:
    16
    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.
     
  23. Mick

    Mick Member

    Joined:
    Jun 30, 2016
    Posts:
    669
    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?
     
  24. YellowAfterlife

    YellowAfterlife ᴏɴʟɪɴᴇ ᴍᴜʟᴛɪᴘʟᴀʏᴇʀ Forum Staff Moderator

    Joined:
    Apr 21, 2016
    Posts:
    1,888
    IIRC you have to copy the cursors from the base skin - they are currently not inherited by themes due to... whatever reason.
     
    Mick likes this.
  25. iluvfuz

    iluvfuz Member

    Joined:
    Jun 21, 2016
    Posts:
    16
    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
     
    Mick likes this.
  26. Elevory

    Elevory Member

    Joined:
    Aug 27, 2016
    Posts:
    37
    Awesome, thank you for the update!
     
  27. viking.potato

    viking.potato Member

    Joined:
    Aug 16, 2017
    Posts:
    7
    Loading any of these themes is causing GMS2 to crash for me. Removing them fixes it.
     
  28. mdbussen

    mdbussen Member

    Joined:
    Jul 8, 2016
    Posts:
    56
    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.
     
  29. iluvfuz

    iluvfuz Member

    Joined:
    Jun 21, 2016
    Posts:
    16
    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.
     
  30. offalynne

    offalynne Member

    Joined:
    Aug 25, 2017
    Posts:
    9
    fyi, dropdown arrows in the resource pane are broken by the latest update

    upload_2017-8-24_19-52-9.png
     
  31. Elevory

    Elevory Member

    Joined:
    Aug 27, 2016
    Posts:
    37
    I thought those dropdown arrows looked strange.
     
  32. iluvfuz

    iluvfuz Member

    Joined:
    Jun 21, 2016
    Posts:
    16
    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
     
    offalynne likes this.
  33. Elevory

    Elevory Member

    Joined:
    Aug 27, 2016
    Posts:
    37
    Hooray! Thank you for your hard work. :)

    EDIT: The resource tree looks gorgeous now.
     
  34. untune

    untune Member

    Joined:
    Apr 9, 2017
    Posts:
    15
    Thanks for the quick fix... looking forward to checking it out later!
     
  35. Richard

    Richard Member

    Joined:
    Apr 19, 2016
    Posts:
    78
    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
     
  36. offalynne

    offalynne Member

    Joined:
    Aug 25, 2017
    Posts:
    9
    [​IMG]
     
  37. Edmanbosch

    Edmanbosch Member

    Joined:
    Jan 6, 2017
    Posts:
    180
    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).
     
  38. Mick

    Mick Member

    Joined:
    Jun 30, 2016
    Posts:
    669
    Thanks for the update! I have the same issue as Edmanbosch with the dark green theme, otherwise it looks gooood!
     
  39. iluvfuz

    iluvfuz Member

    Joined:
    Jun 21, 2016
    Posts:
    16
    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!
     
  40. Edmanbosch

    Edmanbosch Member

    Joined:
    Jan 6, 2017
    Posts:
    180
    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?
     
  41. iluvfuz

    iluvfuz Member

    Joined:
    Jun 21, 2016
    Posts:
    16
    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™!
     
    Edmanbosch and rIKmAN like this.
  42. Gadnief

    Gadnief Member

    Joined:
    May 22, 2017
    Posts:
    9
    Great Skin! Use it on windows a lot :) Is it possible to install the skin on OSX?
     
  43. offalynne

    offalynne Member

    Joined:
    Aug 25, 2017
    Posts:
    9
    yep, put the folder in
    /Users/Shared/GameMakerStudio2/Skins
     
    BoltsFellOff likes this.
  44. barret232hxc

    barret232hxc Member

    Joined:
    Sep 11, 2017
    Posts:
    4
    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.
    [​IMG]
    [​IMG]
     
  45. Osoy

    Osoy Member

    Joined:
    Nov 11, 2016
    Posts:
    6
    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!
     
  46. offalynne

    offalynne Member

    Joined:
    Aug 25, 2017
    Posts:
    9
    Not sure if this was broken by a new GMS2 update but horizontal resizing handles in Workspaces aren't showing up (though they are functional if you hover your mouse where they would be)

    [​IMG]

    [​IMG]
     
  47. True Valhalla

    True Valhalla Full-Time Developer GMC Elder

    Joined:
    Jun 20, 2016
    Posts:
    261
    These look fantastic - great work!
     
  48. kburkhart84

    kburkhart84 Firehammer Games

    Joined:
    Jun 26, 2016
    Posts:
    461
    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!
     
  49. flykidsblue1

    flykidsblue1 Member

    Joined:
    Jul 6, 2017
    Posts:
    29
    I tried to use this skin for mac, Unfortunately, it did not work :(
     
  50. 39digits

    39digits Member

    Joined:
    Apr 19, 2018
    Posts:
    3
    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: Apr 19, 2018

Share This Page

  1. This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
    By continuing to use this site, you are consenting to our use of cookies.
    Dismiss Notice