Compile error + theme writing

[ValiantCuriosity]

Safari Browser error:

[4ian]

Is it working in Chrome? It does not seem related to the browser.

Have you properly run npm installor yarn install?

[ValiantCuriosity]

Seems to be working for me now. I’m using Safari. I’ve figured out some of the file structure. Loaded GD into Code. Added a newTheme, but when I refresh the browser, the preferences selector in GD doesn’t show the newTheme. I’ll keep working. Thank you for helping me to limp along. -R

On Oct 22, 2018, at 12:47 AM, Florian Rival notifications@github.com wrote:

Is it working in Chrome? It does not seem related to the browser.

Have you properly run npm installor yarn install?

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/4ian/GDevelop/issues/712#issuecomment-431761410, or mute the thread https://github.com/notifications/unsubscribe-auth/Akhlbq-ZjwkW-DZJfY1_rgZFdnO_hUOjks5unXgBgaJpZM4Xyv2_.

[4ian]

Yes you have to add it to this file: https://github.com/4ian/GDevelop/blob/master/newIDE/app/src/UI/Theme/index.js

As the comment explain, duplicate the folder of DefaultTheme for example, rename it, then import it at the top of the file and add it to the "themes" objects :) Should appear in the list of themes.

[ValiantCuriosity]

NewTheme isn't displaying in the GD selector. It is just a copy of the Default theme. I'm struggling a bit with this. Yes, I've followed the instructions numerous of times. Should I be referencing the NewTheme somewhere else too? TIA

Here is what my code looks like:

[4ian]

You don't have anything that is displayed in the preferences? That should be all you need in theory. The preferences dialog is read the theme from the themes object.

[ValiantCuriosity]

On Oct 22, 2018, at 2:53 PM, Florian Rival notifications@github.com wrote:

You don't have anything that is displayed in the preferences? That should be all you need in theory. The preferences dialog is read the theme from the themes object.

No, there is nothing displayed in the preferences. I don’t want to give up, but I can’t figure out what is wrong.

GD is running on the local server. It does force me to open a game template. There is no option for blank, but that shouldn’t matter.

I did have some issues with permissions, but I got that taken care of so I know the new theme is being saved properly. I’ve double checked it.

Sorry to be such a pain. -R

You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/4ian/GDevelop/issues/712#issuecomment-432003351, or mute the thread https://github.com/notifications/unsubscribe-auth/AkhlbmGToaEY3ZECBS2t0tItSWMt_tnpks5unj5pgaJpZM4Xyv2_.

[4ian]

Strange because I just tested and it worked:

Is the development server properly running? You should see this in your terminal:

Try to stop and relaunch it.

[ValiantCuriosity]

Lots of “Permission Denied”. Thinking that is a problem. Nothing saying “Compiled Successfully”. I don’t know how to fix the”Permission Denied” issues. I tried using the “Info” and I thought that worked, but it didn’t . I’m using Visual Studio Code as you instructed. I’m more used to Brackets but GD is too big for Brackets. I also had ES6 errors, but I have corrected that issue in VS Code. Going to stop working for today. I’ll try again tomorrow. -R

On Oct 22, 2018, at 3:09 PM, Florian Rival notifications@github.com wrote:

Strange because I just tested and it worked:

https://user-images.githubusercontent.com/1280130/47322328-7516f780-d64f-11e8-8af8-daca28b9b012.png https://user-images.githubusercontent.com/1280130/47322338-7a744200-d64f-11e8-9535-53f6bc09bf5b.png Is the development server properly running? You should see this in your terminal: https://user-images.githubusercontent.com/1280130/47322362-89f38b00-d64f-11e8-84b8-6f8338104a66.png Try to stop and relaunch it.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/4ian/GDevelop/issues/712#issuecomment-432008457, or mute the thread https://github.com/notifications/unsubscribe-auth/AkhlbiadAhGeH4Jvw8txtw2ss9Bo5KCYks5unkIvgaJpZM4Xyv2_.

[4ian]

If you have permissions error, there is definitely something going very wrong behind the scenes. Check your installation of Node.js and consider re-installing it. There should not have been any ES6 error to fix too it's very strange. Make sure to git clone GDevelop folder into a directory where you have read/write rights, like your home folder.

[ValiantCuriosity]

This still isn’t working for me. I started over completely again. Everything checks out when tested. There are no errors. When I build the project, I receive the following:

"The project was built assuming it is hosted at ./. You can control this with the homepage field in your package.json."

"The build folder is ready to be deployed.”

I’m just using the GD web app for now.

How do I deploy this? Maybe that is my problem. I don’t get anything similar to what you sent me in your terminal. Maybe I’m using the wrong syntax? When I run the build by selecting index.html, I still only see the two them selectors. The new theme isn’t there. I know that I must be missing something. TIA -R

On Oct 22, 2018, at 3:09 PM, Florian Rival notifications@github.com wrote:

Strange because I just tested and it worked:

https://user-images.githubusercontent.com/1280130/47322328-7516f780-d64f-11e8-8af8-daca28b9b012.png https://user-images.githubusercontent.com/1280130/47322338-7a744200-d64f-11e8-9535-53f6bc09bf5b.png Is the development server properly running? You should see this in your terminal: https://user-images.githubusercontent.com/1280130/47322362-89f38b00-d64f-11e8-84b8-6f8338104a66.png Try to stop and relaunch it.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/4ian/GDevelop/issues/712#issuecomment-432008457, or mute the thread https://github.com/notifications/unsubscribe-auth/AkhlbiadAhGeH4Jvw8txtw2ss9Bo5KCYks5unkIvgaJpZM4Xyv2_.

[4ian]

You don't need to run yarn build or npm run build. Only follow for now the section "Development" of the README: https://github.com/4ian/GDevelop/blob/master/newIDE/README.md#development

You only need to do npm install and npm start (or yarn and yarn start). This will install the dependencies and then compile and run the web-app. To open it, enter localhost:3000 in your browser.

[ValiantCuriosity]

On Oct 23, 2018, at 2:01 PM, Florian Rival notifications@github.com wrote:

You don't need to run yarn build or npm run build. Only follow for now the section "Development" of the README: https://github.com/4ian/GDevelop/blob/master/newIDE/README.md#development https://github.com/4ian/GDevelop/blob/master/newIDE/README.md#development You only need to do npm install and npm start (or yarn and yarn start). This will install the dependencies and then compile and run the web-app. To open it, enter localhost:3000 in your browser.

This isn’t the problem. I’ve worked through the steps over and over again for two days now. I can’t see the NewTheme. I have GD running just fine in the web browser and also ran it in electron, but I have yet to see the NewTheme added to the GD preferences selector.

I guess I need to give up. I had wanted to help with GD. I’ve never had these issues using ionic, onsenui, or other frameworks. I am not an expert, but have used Terminal. I know I am probably missing a small step, but I’ve taken way too much of your time. Thank you for trying to help.

-R

[4ian]

No no we're going to figure out what the problem is :) Can you do a simple change in a file and see if the web-app is 1) reloading and 2) properly updated?

For example, open MainFrame/Editors/StartPage/index.js and change the sentence "GDevelop is an easy-to-use game creator with no programming language to learn." by something else. Save the file. Normally, the terminal where you've run npm start should indicate shortly that it is recompiling, and then shortly after the web-app (that you opened on localhost:3000 should reload).

Can you confirm me if this is working? If not send me a screenshot of your editor, terminal and browser.

[ValiantCuriosity]

It worked! 😀 You are kind. Thank you for helping me. I will try to keep working with this to see what I can do. 😀

I can now see a drop down menu below the Default Theme and Instead of “Dark”, I have Visual Studio Code with the theme drop down for Visual Studio Code! -R

On Oct 23, 2018, at 2:35 PM, Florian Rival notifications@github.com wrote:

No no we're going to figure out what the problem is :) Can you do a simple change in a file and see if the web-app is 1) reloading and 2) properly updated?

For example, open MainFrame/Editors/StartPage/index.js and change the sentence "GDevelop is an easy-to-use game creator with no programming language to learn." by something else. Save the file. Normally, the terminal where you've run npm start should indicate shortly that it is recompiling, and then shortly after the web-app (that you opened on localhost:3000 should reload).

Can you confirm me if this is working? If not send me a screenshot of your editor, terminal and browser.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/4ian/GDevelop/issues/712#issuecomment-432429255, or mute the thread https://github.com/notifications/unsubscribe-auth/AkhlbpF4XabhfcK4AxWQzHFcBLnsOEJIks5un4u2gaJpZM4Xyv2_.

[4ian]

Cool, let me know if you come up with something or have other questions :) I'll be less available until the end of the week as I'll be at React Conf for talking about GDevelop.

[ValiantCuriosity]

On Oct 23, 2018, at 4:30 PM, Florian Rival notifications@github.com wrote:

Cool, let me know if you come up with something or have other questions :) I'll be less available until the end of the week as I'll be at React Conf for talking about GDevelop https://conf.reactjs.org/event.html?FlorianRival.

I'm taking you up on your offer of more help. I’ve been having fun with the themes. I’m having trouble finding. how to change the color of the Scene Properties header bar and the Scene Properties Objects header. I’ve gone through everything several times and I have removed every reference to the color purple that I can find. The header still stays purple! Can you tell me where the change for these headers are referenced in the code?

I’m excited for you about the conference. I’m sure that audience will be impressed with your work. GDevelop is beautifully done.

-R

[ValiantCuriosity]

Oh, another thing as I’m looking at all of the files. It appears as though the Toolbar icons can not be easily re-colored to match a different theme. I’ve found them and “played” a little, but seems as though changing one in the code will change it in all of the themes. If that is true, it limits the color spectrum to include the blue or somehow match it. Is my assumption correct? Thank your for being patient with my questions. GDevelop is HUGE. I need GPS to find my way around. LOL The good news is that I understand little of what is going on.;-) -R

On Oct 23, 2018, at 4:30 PM, Florian Rival notifications@github.com wrote:

Cool, let me know if you come up with something or have other questions :) I'll be less available until the end of the week as I'll be at React Conf for talking about GDevelop https://conf.reactjs.org/event.html?FlorianRival.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/4ian/GDevelop/issues/712#issuecomment-432457886, or mute the thread https://github.com/notifications/unsubscribe-auth/Akhlbh-iYZdFwve6fCWLn62mXVyD8AXDks5un6aCgaJpZM4Xyv2_.

[4ian]

The header still stays purple! Can you tell me where the change for these headers are referenced in the code?

It's in Mosaic.css. By the way in all the .css file of your theme, you should change mosaic-gd-default-theme, gd-table-default-theme and gd-events-sheet-default-theme (or the equivalent for dark theme) to something like gd-XXX-your-theme and update mosaicRootClassName, eventsSheetRootClassName and tableRootClassName in the index.js (these classnames are used to distinguish between the CSS files for each theme).

It appears as though the Toolbar icons can not be easily re-colored to match a different theme.

It's true, they are simple image for now. One option would be to:

• add a color in the theme, as a key, like "toolbarIconColor"
• In UI/ToolbarIcon.js, import the theme (using ThemeConsumer).
• FInally, in UI/ToolbarIcon.js, use the value of toolbarIconColor to apply a css filter , like hue-rotate (https://css-tricks.com/almanac/properties/f/filter/#article-header-id-4).

This way, themes could have each their own colors, but we would still only need one set of files (we don't want to duplicate the icons, would be too much hassle to maintain).

[ValiantCuriosity]

You are brilliant! Thank you. I’m going to have a lot of fun learning this. I’ll keep you posted. No guarantees that you will like whatever I come up with, but it is a good learning exercise for me. Thanks again for all of your help and good humor. I hope that you have a “most excellent” conference. Sending all my best thoughts your way.

-R

On Oct 24, 2018, at 10:10 PM, Florian Rival notifications@github.com wrote:

The header still stays purple! Can you tell me where the change for these headers are referenced in the code?

It's in Mosaic.css. By the way in all the .css file of your theme, you should change mosaic-gd-default-theme, gd-table-default-theme and gd-events-sheet-default-theme (or the equivalent for dark theme) to something like gd-XXX-your-theme and update mosaicRootClassName, eventsSheetRootClassName and tableRootClassName in the index.js (these classnames are used to distinguish between the CSS files for each theme).

It appears as though the Toolbar icons can not be easily re-colored to match a different theme.

It's true, they are simple image for now. One option would be to:

add a color in the theme, as a key, like "toolbarIconColor" In UI/ToolbarIcon.js, import the theme (using ThemeConsumer). FInally, in UI/ToolbarIcon.js, use the value of toolbarIconColor to apply a css filter , like hue-rotate (https://css-tricks.com/almanac/properties/f/filter/#article-header-id-4 https://css-tricks.com/almanac/properties/f/filter/#article-header-id-4). This way, themes could have each their own colors, but we would still only need one set of files (we don't want to duplicate the icons, would be too much hassle to maintain).

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/4ian/GDevelop/issues/712#issuecomment-432916648, or mute the thread https://github.com/notifications/unsubscribe-auth/Akhlbvl01G89RDjf8ZSMwE6_6JN3F9Akks5uoUfMgaJpZM4Xyv2_.

[ValiantCuriosity]

Hi Florian,

I hope that the conference went well.

I’ve been busy trying to add a theme to GDevelop5. It is harder than it seems at first, but I’m having fun doing it. :-)

Sadly, as I’ve mentioned before, I’m not a very knowledgeable coder. I don’t even know React. I’ve done a little with Angular so React is somewhat understandable in form.

I apologize, but I don’t understand how to use Theme Consumer. Could you give me an example of the syntax so that I could try importing via ThemeConsumer? I’ve made attempts, but nothing has worked for me.

Also, I don’t understand how to set up the value of the “toolbarIconColor in ToolbarIcon.js.

Finally, I wonder how to use a gradient instead of a solid color. Is that possible?

I know that you are busy and this is not of high importance. Reply only when you have the desire.

Thank you for helping me so much and for your contribution of GDevelop5. You are a talented coder and designer. I am enjoying reading all of the interesting projects that people are doing to help.

-R

On Oct 24, 2018, at 10:10 PM, Florian Rival notifications@github.com wrote:

The header still stays purple! Can you tell me where the change for these headers are referenced in the code?

It's in Mosaic.css. By the way in all the .css file of your theme, you should change mosaic-gd-default-theme, gd-table-default-theme and gd-events-sheet-default-theme (or the equivalent for dark theme) to something like gd-XXX-your-theme and update mosaicRootClassName, eventsSheetRootClassName and tableRootClassName in the index.js (these classnames are used to distinguish between the CSS files for each theme).

It appears as though the Toolbar icons can not be easily re-colored to match a different theme.

It's true, they are simple image for now. One option would be to:

add a color in the theme, as a key, like "toolbarIconColor" In UI/ToolbarIcon.js, import the theme (using ThemeConsumer). FInally, in UI/ToolbarIcon.js, use the value of toolbarIconColor to apply a css filter , like hue-rotate (https://css-tricks.com/almanac/properties/f/filter/#article-header-id-4 https://css-tricks.com/almanac/properties/f/filter/#article-header-id-4). This way, themes could have each their own colors, but we would still only need one set of files (we don't want to duplicate the icons, would be too much hassle to maintain).

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/4ian/GDevelop/issues/712#issuecomment-432916648, or mute the thread https://github.com/notifications/unsubscribe-auth/Akhlbvl01G89RDjf8ZSMwE6_6JN3F9Akks5uoUfMgaJpZM4Xyv2_.

[ValiantCuriosity]

Oh, forgot. You might want to correct this sentence in "newIDE/app/src/InstancesEditor/InstancePropertiesEditor/index.js”.

It isn’t really bad English, but might read better as "Click on an instance in the scene to display its properties”. “On”could be used. I suppose it depends on how your are looking at the scene editor. I tend to feel as though I’m “in” the Scene Editor when working there.

Along with that…how do I change only the text color of this sentence via css? I’d like to make it lighter for my theme. As it stands now, it uses the background color (I think).

Thanks again and again. You are teaching me a lot.

-R

[4ian]

You might want to correct this sentence in

Fixed, thanks :)

Along with that…how do I change only the text color of this sentence via css? I’d like to make it lighter for my theme. As it stands now, it uses the background color (I think).

If you look at EmptyMessage.js, you'll find that it is implemented using BackgroundText.js. You can find the style here and see that there is muiTheme.emptyMessage.shadowColor. This means that in the theme you can define emptyMessage: { shadowColor: } to set the color of the text shadow. The color of the text itself is not in theme if I'm not mistaken.

If you want to redefine it in your theme, you would need to add it in the theme object (in emptyMessage.textColor for example), then use it in the BackgroundText component:

Something like:

const BackgroundText = (props: Props) => (
  <ThemeConsumer>
    {muiTheme => (
        <span
          style={{
            ...styles.messageStyle,
            color: muiTheme.emptyMessage.textColor,
            textShadow: `1px 1px 0px ${muiTheme.emptyMessage
              .shadowColor}`,
            ...props.style,
          }}
          title={props.tooltipText}
        >
          {props.children}
        </span>
    )}
  </ThemeConsumer>
);

Could you give me an example of the syntax so that I could try importing via ThemeConsumer

See BackgroundText. ThemeConsumer is called a component with a "render child function" in React (hence the weird syntax: <ThemeConsumer>{muiTheme => ( ... )}</ThemeConsumer>).

Also, I don’t understand how to set up the value of the “toolbarIconColor in ToolbarIcon.js.

In ToolbarIcon, you can see iconStyle which is the styling applied to the object (it's CSS, it's just that it's written in JavaScript). The filter CSS property is used to apply greyscale. You should search how to use other filter in CSS to apply a color or a gradient. If you manage to do this, we can then "wrap" the component in a <ThemeConsumer />, like BackgroundText, to read some parameter from the theme (typically the color to be used).

[4ian]

I don’t even know React. I’ve done a little with Angular so React is somewhat understandable in form.

Yes it's no problem, React is actually quite fast to understand when you have learnt the basics. If you feel to lost, read the documentation, "Main Concepts", notably what is a component, what are props: https://reactjs.org/docs/components-and-props.html - it should be well explained there :)

[4ian]

I'll close the issue as there are no bugs here. Feel free to ask here for other questions though :)

[ValiantCuriosity]

I haven’t been able to work on the theme for a few days. I got back to it today. I’ve managed to change the toolbar icon colors, but I can’t find where the Project Menu icons are defined. What file are these colors defined in?

Thank you… making slow progress.

This issue has been closed. Should I keep using it to ask questions or start something new?

-R

On Oct 31, 2018, at 4:52 PM, Florian Rival notifications@github.com wrote:

Closed #712 https://github.com/4ian/GDevelop/issues/712.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/4ian/GDevelop/issues/712#event-1939331670, or mute the thread https://github.com/notifications/unsubscribe-auth/Akhlbi-b4z9bZyj8l15NuBmJyLfvwZH9ks5uqje-gaJpZM4Xyv2_.

[zatsme]

Are you planning on making the themes easier to change, it appears to be quite complicated and many files involved?

[4ian]

Are you planning on making the themes easier to change, it appears to be quite complicated and many files involved?

I don't think it's particularly complicated: all the content of a theme is in 3 files that are inside the theme folder. Once you've copied these in a new theme, it should be fairly easy to make changes. Also upgrading the UI framework at some point to its new version (Material-UI) will need to update all the themes, so it's something to take into account.

What is complicated here is that modifying the color of icons is not supported for now - but we can add it and I've given a few hints about how to do it for toolbar :)

but I can’t find where the Project Menu icons are defined. What file are these colors defined in?

Look in ProjectManager/index.js Note that again there is no support for color filtering: icons are inserted directly like this: <ListIcon src="res/ribbon_default/new32.png" />

This being said, it should be fairly easy to extract this into a new component ProjectMangerIcon - much like ToolbarIcon, which reads the color from theme (using ThemeConsumer) and apply it to the icon.

Should I keep using it to ask questions or start something new?

If it's related to the theme, questions can continue here

[ValiantCuriosity]

Florian,

Thank you. I’ll take a look to see what I can do. The hardest part for me to understand is how to add using the ThemeConsumer. If I can ever get a new theme completely added successfully, I will add the steps into the documents. I have a way to go though. I am making progress. Enjoying the learning too. I know that I’m very elementary and I appreciate your patience.

Zak, It isn’t too hard to make the overall theme changes by copying a theme and then changing the colors there, but it is hard for me to figure out the syntax to read from the them consumer. I’m wrestling with that. ;-)

It would be a neat addition to allow people to input their own colors for individual themes, but GD is meant for games and most people are probably perfectly happy with the two themes which I think are very nice. I just enjoy playing around with graphics stuff.

-R

On Nov 5, 2018, at 9:38 AM, Florian Rival notifications@github.com wrote:

Are you planning on making the themes easier to change, it appears to be quite complicated and many files involved?

I don't think it's particularly complicated: all the content of a theme is in 3 files that are inside the theme folder. Once you've copied these in a new theme, it should be fairly easy to make changes.

What is complicated here is that modifying the color of icons is not supported for now - but we can add it and I've given a few hints about how to do it for toolbar :)

but I can’t find where the Project Menu icons are defined. What file are these colors defined in?

Look in ProjectManager/index.js Note that again there is no support for color filtering: icons are inserted directly like this:

This being said, it should be fairly easy to extract this into a new component ProjectMangerIcon - much like ToolbarIcon, which reads the color from theme (using ThemeConsumer) and apply it to the icon.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/4ian/GDevelop/issues/712#issuecomment-435965224, or mute the thread https://github.com/notifications/unsubscribe-auth/AkhlbhN2Z13FMKGYDQm9jIkaO4RVG2twks5usHezgaJpZM4Xyv2_.

[ValiantCuriosity]

I’m wondering. In the Event Editor, when a condition or event is selected, there is a margin on both the right and left side of the selected area. That is, the color doesn’t go all the way across the condition or action. Is this expected behavior? I am assuming that it is expected, but I just want to be sure. See the included screen grab below:

-R

On Nov 5, 2018, at 12:41 PM, valiantcuriosity@gmail.com wrote:

Florian,

Thank you. I’ll take a look to see what I can do. The hardest part for me to understand is how to add using the ThemeConsumer. If I can ever get a new theme completely added successfully, I will add the steps into the documents. I have a way to go though. I am making progress. Enjoying the learning too. I know that I’m very elementary and I appreciate your patience.

Zak, It isn’t too hard to make the overall theme changes by copying a theme and then changing the colors there, but it is hard for me to figure out the syntax to read from the them consumer. I’m wrestling with that. ;-)

It would be a neat addition to allow people to input their own colors for individual themes, but GD is meant for games and most people are probably perfectly happy with the two themes which I think are very nice. I just enjoy playing around with graphics stuff.

-R

On Nov 5, 2018, at 9:38 AM, Florian Rival <notifications@github.com mailto:notifications@github.com> wrote:

Are you planning on making the themes easier to change, it appears to be quite complicated and many files involved?

I don't think it's particularly complicated: all the content of a theme is in 3 files that are inside the theme folder. Once you've copied these in a new theme, it should be fairly easy to make changes.

What is complicated here is that modifying the color of icons is not supported for now - but we can add it and I've given a few hints about how to do it for toolbar :)

but I can’t find where the Project Menu icons are defined. What file are these colors defined in?

Look in ProjectManager/index.js Note that again there is no support for color filtering: icons are inserted directly like this:

This being said, it should be fairly easy to extract this into a new component ProjectMangerIcon - much like ToolbarIcon, which reads the color from theme (using ThemeConsumer) and apply it to the icon.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/4ian/GDevelop/issues/712#issuecomment-435965224, or mute the thread https://github.com/notifications/unsubscribe-auth/AkhlbhN2Z13FMKGYDQm9jIkaO4RVG2twks5usHezgaJpZM4Xyv2_.

[ValiantCuriosity]

Another css question related to the background yellow comment color in the Events editor.

I’m trying to change the background comment color in my theme. I can’t get the change to be recognized. I have searched all the files and can’t find any other reference to the #E8DC59 color, but I notice that the two included GD themes both show a yellow comment background. AFAIKT, the default theme should not be#E8DC59. It is coded for rgb(27, 143, 1).

What am I missing here? How can I change the background of the comment to something other than #E8DC59? TIA -R

Dark: .gd-events-sheet-DarkTheme-theme .instruction-parameter.expression { color: #E8DC59; }

Default: .gd-events-sheet-default-theme .instruction-parameter.expression { color: rgb(27, 143, 1); }

On Oct 31, 2018, at 4:52 PM, Florian Rival notifications@github.com wrote:

Closed #712 https://github.com/4ian/GDevelop/issues/712.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/4ian/GDevelop/issues/712#event-1939331670, or mute the thread https://github.com/notifications/unsubscribe-auth/Akhlbi-b4z9bZyj8l15NuBmJyLfvwZH9ks5uqje-gaJpZM4Xyv2_.

[ValiantCuriosity]

Along with how/where to find the styling for the Events background comments, where do I find the events and table icons. I’d like to change their colors too. TIA -R

On Nov 5, 2018, at 9:38 AM, Florian Rival notifications@github.com wrote:

Are you planning on making the themes easier to change, it appears to be quite complicated and many files involved?

I don't think it's particularly complicated: all the content of a theme is in 3 files that are inside the theme folder. Once you've copied these in a new theme, it should be fairly easy to make changes.

What is complicated here is that modifying the color of icons is not supported for now - but we can add it and I've given a few hints about how to do it for toolbar :)

but I can’t find where the Project Menu icons are defined. What file are these colors defined in?

Look in ProjectManager/index.js Note that again there is no support for color filtering: icons are inserted directly like this:

This being said, it should be fairly easy to extract this into a new component ProjectMangerIcon - much like ToolbarIcon, which reads the color from theme (using ThemeConsumer) and apply it to the icon.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/4ian/GDevelop/issues/712#issuecomment-435965224, or mute the thread https://github.com/notifications/unsubscribe-auth/AkhlbhN2Z13FMKGYDQm9jIkaO4RVG2twks5usHezgaJpZM4Xyv2_.

[4ian]

See the included screen grab below:

I can't see it, I think you attached it to your email as an answer but GitHub do not support this. You have to post your answer from GitHub to add images ;)

GD is meant for games and most people are probably perfectly happy with the two themes which I think are very nice.

I definitely don't exclude the idea of having themes customizable directly in the editor, but this is really a "nice to have" feature and I think for now it's more important to focus on other features :)

I’m trying to change the background comment color in my theme.

Unfortunately, for now, colors of groups, comments and links are hardcoded (they can't be changed from the theme). This is because groups and links support having a custom color given by the user (even if this feature is not exposed in GD5). I might add this support though if you come up with a good theme and think it's important.

events and table icons

icons are inserted as <img> in Instruction.js: https://github.com/4ian/GDevelop/blob/master/newIDE/app/src/EventsSheet/EventsTree/Instruction.js#L192

There again, you would need to apply a filter if you want to have all icons with a custom color :)

[ValiantCuriosity]

On Oct 24, 2018, at 10:10 PM, Florian Rival notifications@github.com wrote:

add a color in the theme, as a key, like "toolbarIconColor" In UI/ToolbarIcon.js, import the theme (using ThemeConsumer).

I’m still not successful in figuring out how to do the above.

I’ve tried it many ways, but it is never recognized in ToolbarIcon.js. I expect my lack of knowledge is at fault here.

First, I added the construct to my theme’s index.js:

const toolbarIconColor = 'brightness(100%) sepia(1) hue-rotate(132deg) saturate(103.2%) drop-shadow(1px 1px 1px rgba(0,0,0,0.9))’;

Then I tried to add the ThemeConsumer to ToolbarIcon.js by changing the code that you showed me for background text, but the icons don’t change. They work perfectly when I add the style to the but, of course, that changes the icons in every theme.

I wonder, would you help me again? I apologize for my lack of knowledge. I’ve started a docuwiki so that others can follow my progress and so that I will have a reference for themes too. When I get this done, I’ll ask you to look at it and be sure that it seems correct.

Thank you again and again. -R

[4ian]

First, I added the construct to my theme’s index.js:

Are you sure you've added it to the themeobject in index.js?

If yes, then it should be accessible from the variable muiTheme that is given by ThemeConsumer.

It's hard to guess what is wrong without seeing your commited code. What I recommend is that you get familiar with debugging tools like the Chrome Debugger and add a few "console.log" in the code to log the objects and check if there are as you expect them to be :) Notably, check the content of muiTheme.

You can also publish your code on a branch on GitHub, will be easier to see where you are. But console.log and a bit of debugging can help to see if things are working as you think they are.