Share your C2 themes

Discussion of tools and resources for game developers

Post » Wed Mar 16, 2016 8:14 am

Godot theme, well you judge it: godot engine theme

Image

Theme is updated to match current Godot syntax highlighting.
ImageImageImage
B
79
S
33
G
16
Posts: 599
Reputation: 16,161

Post » Wed Apr 20, 2016 12:25 pm

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
Image



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)
Image Image


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. :)
Image
B
21
S
13
G
8
Posts: 306
Reputation: 5,458

Post » Wed Apr 27, 2016 3:11 pm

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
Image
When selected:
Image



fi_Hydrogen.xml
fi_Hydrogen_selC2.xml (same, but uses C2 orange color for selection.)
Image
When selected:
Image
When selected: (fi_Hydrogen_selC2.xml version)
Image



fi_SedonaCandyShop.xml
A weird ice cream looking theme, because why not.
Image
When selected:
Image



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.) :)

Image
When selected:
Image
B
21
S
13
G
8
Posts: 306
Reputation: 5,458

Post » Sat May 07, 2016 4:13 am

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?
B
8
S
2
Posts: 28
Reputation: 536

Post » Sat May 07, 2016 2:52 pm

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:

  1. Start Construct 2.
  2. From the main menu choose File > Preferences, then choose the "Colors" tab.
  3. From the "Choose theme" drop-menu, pick a theme to try. (I think C2 comes with 4.)
  4. Click the "Load selected theme" button, to apply the colors.
  5. Click the "Ok" button to close the preferences window.
  6. 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?
B
21
S
13
G
8
Posts: 306
Reputation: 5,458

Post » Fri May 13, 2016 3:01 pm

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
ImageImage

fi_Autumn
ImageImage

fi_Clean
ImageImage

fi_CleanGallium
ImageImage

fi_Felt
ImageImage

fi_Flat
ImageImage

fi_Gallium
ImageImage

fi_Hydrogen
ImageImage

fi_Hydrogen_selC2
ImageImage

fi_Marble
ImageImage

fi_NeonPhoenix
ImageImage

fi_NightSky
ImageImage

fi_RedTail
ImageImage

fi_RedTail_selPink
ImageImage

fi_Sandy
ImageImage

fi_ScirraSite
ImageImage

fi_ScirraSite_selOrange
ImageImage

fi_SeaNav
ImageImage

fi_SedonaCandyShop
ImageImage

fi_SlateAzure
ImageImage

fi_SlateIndigo
ImageImage

fi_SlateNixie
ImageImage

fi_SlateNixie_OliveAccent
ImageImage

fi_SlateNixie_VioletAccent
ImageImage

fi_SpruceWoods
ImageImage
B
21
S
13
G
8
Posts: 306
Reputation: 5,458

Post » Sun Oct 02, 2016 9:42 am

Hi everyone! Here is my first theme done with fisholit's color tool. :) I called it : Justice_Night !

EventSheet Font : Consolas Normal 9pt

Code: Select all
<?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>


Image
Image
B
9
S
3
G
2
Posts: 66
Reputation: 1,600

Post » Fri Oct 21, 2016 6:57 pm

@fisholith this is awesome, thanks!
English is not my native language. Sorry for any mistakes and feel free to correct me if needed.
B
14
S
5
G
3
Posts: 110
Reputation: 3,225

Post » Tue Oct 25, 2016 10:08 am

--- @Bro7hers
Hey very cool Bro7hers. :D

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, :)
Image
Image



--- @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.
B
21
S
13
G
8
Posts: 306
Reputation: 5,458

Previous

Return to Tools and Resources

Who is online

Users browsing this forum: No registered users and 3 guests