Share your C2 themes

  • Hi everyone, :)

    If anyone is interested, I just built a tool for editing C2 color themes.

    I still have some features to add, but if you want to try it out, you can get it from the WIP post I just made for it:

    Color Theme Editor for C2

    Screenshot

    Themes

    I also have two themes to post. :)

    fi_Clean.xml

    This is the theme that I currently use. It's very close to the default C2 theme, but the colors of comments and variables are a little lighter and softer, and so they don't break up the event sheet as much, which I find makes it easier to scan over events. Variables are a little less yellow-green.

    The other main difference is that comment text is tinted instead of solid black, which I find makes it much easier to visually separate comment text from event text at a glance. This makes it easier for me to scan just comments or just events. When everything is the same color it just looks a little visually cluttered to me, though I might just be used to other IDEs where comments are often colored differently from the code.

    Also the insert marker is neon pink, because no one can stop me. (Actually also just for visual clarity. Nothing else is that color.)

    (Left image is "fi_Clean", right image is the default C2 theme for comparison)

    fi_Autumn.xml

    This is one of a few test themes that I created with my theme editor tool. There are others at the WIP link above, but having not had much time to test them out yet, this one seems the most practical at a glance, as well as being strangely pleasant. :)

  • I just finished an update of my theme editor, and put it up as release-2 . :)

    Color Theme Editor for C2 - release 2

    Below are a few of the themes I've created with the new version, so far.

    Themes

    fi_Gallium.xml

    When selected:

    fi_Hydrogen.xml

    fi_Hydrogen_selC2.xml (same, but uses C2 orange color for selection.)

    When selected:

    When selected: (fi_Hydrogen_selC2.xml version)

    fi_SedonaCandyShop.xml

    A weird ice cream looking theme, because why not.

    When selected:

    fi_AmigaWB.xml

    Just for fun I tried making a theme based on the classic Amiga Workbench OS colors.

    Google images - Amiga Workbench

    The original OS used just 4 colors for the UI, Black, White, Orange, and Blue.

    The cursor could use 4 of it's own colors as well, usually Black, Red, Tan, and transparent.

    I used the cursor Red color as the insert marker.

    The version below uses the 4 colors as a base, but has a few shades for differentiation. I tried making the entire theme using only the exact 4 colors, and it's possible, but it's a bit harsh.

    (That said, even with the more lax approach to color authenticity taken below, the result isn't exactly a UI design masterpiece.)

    When selected:

  • Excuse me if this isn't the place to ask, but what exactly are themes? It's just customising the look of your program from the regular basic white? Or is it something on a functional scale as well?

  • Hey Kraplanta,

    Themes are custom color palettes, that can re-skin event sheet colors, expression editor colors, and layout colors.

    Though they mainly tend to be targeted at just event sheet colors, from what I've seen.

    Applying a theme

    There are some themes that come with Construct other than the basic white-ish theme.

    You can try out one of the other themes by doing the following:

    • Start Construct 2.
    • From the main menu choose File > Preferences, then choose the "Colors" tab.
    • From the "Choose theme" drop-menu, pick a theme to try. (I think C2 comes with 4.)
    • Click the "Load selected theme" button, to apply the colors.
    • Click the "Ok" button to close the preferences window.
    • Finally, any event sheets you had open will need to be closed and reopened for the new theme to take full effect. (Otherwise you'll usually have all the fill colors from the new theme, and all the edge colors from the prior theme, and it looks weird.)

    Installing a theme

    On Win7, any xml theme files you download should be placed in this path:

    "Program Files\Construct 2\themes"

    Remember, you don't have to restart C2 to test new themes, but you do have to close event sheets and reopen them to see the theme change take full effect.

    Were you interested in trying or making a theme?

  • Bundle of 25 themes

    I just put together a bundle of all the themes I've created with my theme editor so far.

    There are 25 themes, about 20 unique themes, with a few of them accompanied by additional variations.

    There are previews of all of them below. For each theme preview, there are two images, showing the base colors and the selection colors.

    This bundle includes a few updates and redesigns of some of my previously posted themes.

    So, I recommend that if you have any of my previous themes installed, delete them before installing this bundle.

    All my themes have filenames beginning with "fi_", which should make them easy to find and remove.

    As always, all feedback and suggestions are welcome.

    Download

    C2 themes - Fisholith bundle v1.zip

    Where to install them

    On Win7, xml theme files are placed in this path:

    "Program Files\Construct 2\themes"

    You don't have to restart C2 to test new themes, but you do have to close event sheets and reopen them to see the theme change take full effect.

    Theme previews

    fi_AmigaWB

    fi_Autumn

    fi_Clean

    fi_CleanGallium

    fi_Felt

    fi_Flat

    fi_Gallium

    fi_Hydrogen

    fi_Hydrogen_selC2

    fi_Marble

    fi_NeonPhoenix

    fi_NightSky

    fi_RedTail

    fi_RedTail_selPink

    fi_Sandy

    fi_ScirraSite

    fi_ScirraSite_selOrange

    fi_SeaNav

    fi_SedonaCandyShop

    fi_SlateAzure

    fi_SlateIndigo

    fi_SlateNixie

    fi_SlateNixie_OliveAccent

    fi_SlateNixie_VioletAccent

    fi_SpruceWoods

  • Try Construct 3

    Develop games in your browser. Powerful, performant & highly capable.

    Try Now Construct 3 users don't see these ads
  • Hi everyone! Here is my first theme done with fisholit's color tool. I called it : Justice_Night !

    EventSheet Font : Consolas Normal 9pt

    <?xml version="1.0" encoding="utf-8" ?>
    <c2theme>
        <eventsheet_background>3086101</eventsheet_background> 
        <event_background>5316886</event_background> 
        <event_background_sel>9829804</event_background_sel> 
        <event_border>2494217</event_border> 
        <event_border_sel>4979827</event_border_sel> 
        <event_number>16777215</event_number> 
        <event_number_sel>3395861</event_number_sel> 
        <event_heirarchy_line>15775033</event_heirarchy_line> 
        <event_heirarchy_line_sel>14478294</event_heirarchy_line_sel> 
        <condition_background>4927285</condition_background> 
        <condition_background_sel>12517065</condition_background_sel> 
        <condition_border_sel>9829804</condition_border_sel> 
        <condition_object_text>15581540</condition_object_text> 
        <condition_object_text_sel>2894892</condition_object_text_sel> 
        <condition_separator>15775033</condition_separator> 
        <condition_separator_sel>2814549</condition_separator_sel> 
        <condition_text>16777215</condition_text> 
        <condition_text_sel>2894892</condition_text_sel> 
        <invalid_condition_text>1645052</invalid_condition_text> 
        <action_background>5778465</action_background> 
        <action_background_sel>12517065</action_background_sel> 
        <action_border_sel>2814549</action_border_sel> 
        <action_object_text>9365476</action_object_text> 
        <action_object_text_sel>4079166</action_object_text_sel> 
        <action_separator>9823997</action_separator> 
        <action_separator_sel>2814545</action_separator_sel> 
        <action_text>9829884</action_text> 
        <action_text_sel>4079166</action_text_sel> 
        <link_text>2302777</link_text> 
        <group_background>5012946</group_background> 
        <group_background_sel>7077002</group_background_sel> 
        <group_border>5052171</group_border> 
        <group_border_sel>2814549</group_border_sel> 
        <group_text>3086101</group_text> 
        <group_text_sel>2894892</group_text_sel> 
        <inactive_group_text>5131854</inactive_group_text> 
        <inactive_group_text_sel>8172914</inactive_group_text_sel> 
        <group_description>539777</group_description> 
        <group_description_sel>4079166</group_description_sel> 
        <inactive_group_description>10492690</inactive_group_description> 
        <inactive_group_description_sel>8172914</inactive_group_description_sel> 
        <expand_box>8916863</expand_box> 
        <expand_box_sel>6579300</expand_box_sel> 
        <expand_box_border>5704017</expand_box_border> 
        <expand_box_border_sel>6579300</expand_box_border_sel> 
        <include_background>3086101</include_background> 
        <include_background_sel>9829805</include_background_sel> 
        <include_border>8403765</include_border> 
        <include_border_sel>2814549</include_border_sel> 
        <include_text>12146768</include_text> 
        <include_text_sel>4079166</include_text_sel> 
        <eventvar_background>9823997</eventvar_background> 
        <eventvar_background_sel>9829805</eventvar_background_sel> 
        <eventvar_border>2804210</eventvar_border> 
        <eventvar_border_sel>2814548</eventvar_border_sel> 
        <eventvar_text>2894892</eventvar_text> 
        <eventvar_text_sel>2894892</eventvar_text_sel> 
        <eventvar_description>9737375</eventvar_description> 
        <eventvar_description_sel>6579300</eventvar_description_sel> 
        <comment_background>4607175</comment_background> 
        <comment_background_sel>12517064</comment_background_sel> 
        <comment_border>0</comment_border> 
        <comment_border_sel>2814545</comment_border_sel> 
        <comment_text>16777215</comment_text> 
        <comment_text_sel>2894892</comment_text_sel> 
        <insert_mark>15775033</insert_mark> 
        <exp_error_underline>1645052</exp_error_underline> 
        <exp_stringliteral>2039712</exp_stringliteral> 
        <exp_number>10420383</exp_number> 
        <exp_operator>16646192</exp_operator> 
        <exp_object>33025</exp_object> 
        <exp_behavior>879269</exp_behavior> 
        <exp_bracket>13158600</exp_bracket> 
        <exp_badbracket>10395389</exp_badbracket> 
        <exp_text>6842472</exp_text> 
        <exp_selected_text>16777215</exp_selected_text> 
        <exp_background>16777215</exp_background> 
        <exp_selection>16683078</exp_selection> 
        <exp_caret>0</exp_caret> 
        <layoutview_background>11644331</layoutview_background> 
        <layout_border>0</layout_border> 
        <layoutview_collisionpoly>1645052</layoutview_collisionpoly> 
        <debugger_breakborder>1645052</debugger_breakborder> 
        <debugger_breakbackground>13225470</debugger_breakbackground> 
    </c2theme>[/code:28hf93na]
    
    [img="http://image.noelshack.com/fichiers/2016/39/1475401167-theme-justice-night.png"]
  • fisholith this is awesome, thanks!

  • ---

    Hey very cool Bro7hers.

    You might already know, but you can save example images like the ones I include in my posts with the "Save Preview" button at the top of the application. It will save a preview of the normal colors or the selected colors depending on which is visible when clicked.

    I made some preview images of your Justice_Night theme as an example,

    --- Cassianno

    Thanks Cassianno!

    If you get a chance to make a theme you'd like to share, I'd love to see it.

    Just a heads up, there are still a few things I'd like to get around to adding in to the program, but the main one is that the "condition boarder" and "action boarder" are currently the only elements not shown in the selection preview mode, but I'll add that into the next update when I have time to get to it. In the mean time, it generally suffices to make them a lighter or darker shade of their respective background colors.

  • Is it possible to change the styles, too ? Or just the sheet colors ?

  • Hey Rco250jmx,

    To my knowledge, there's no reasonable way to change the styles, because they are developed by Microsoft, and are hardcoded into a convoluted cross-section of DLLs and other miscellaneous system files, which are not intended to be editable. So unfortunately as far as Styles go, you really only have the options provided.

    I created a visual reference sheet of all available styles (2nd image below) to make it easier to brows them.

    * "Visual studio 2012 Dark" (2nd from bottom) is good for dark themes.

    * "Carbon" (2nd from top) is also good for dark themes. It is not as dark as 2012 Dark, but is the only other Style with a non-white property bar background color.

    First a quick reference for the 3 most important styles, those being the default style and the only two dark styles:

    The 3 important styles

    All Styles

    As an aside since, alspal, Arima, sqiddster, Katala, and Tetriser, discussed the usability of dark themes earlier in this thread, some of you might be interested in the Style reference sheet as well.

    Also, credit to Colludium who I think was the first to mention the " Visual studio 2012 Dark" Style in this thread.

    As you can see from the chart, 2012 Dark really is the best (and almost the only) Style choice to pair with dark themes.

    Hope that helps out.

  • No change the styles not possible

  • fisholith - can you please post your editor and themes again ? thanks

  • i realize this topic is a bit old, but i'm looking to download the bundled theme that was offered previously;

    anybody know if they are still available?

  • Hey heater19 and justifun, :)

    This is the latest themes bundle:

    Themes Bundle - Fisholith Themes v2.zip

    My themes bundle and my Theme Editor are downloadable in the first post of my Editor thread:

    construct.net/en/forum/construct-2/works-in-progress-feedback-requests-24/color-theme-editor-for-c2-rele-111846

Jump to:
Active Users
There are 1 visitors browsing this topic (0 users and 1 guests)