How do themes work?

[kazerniel]

I see a themes option in the program, but it's greyed out for me. How does one use/create themes?

[Serg-Norseman]

Themes are not available in GKv3 only - there are not enough properties of EtoForms components to completely change the appearance. System-dependent themes are possible there, but GKv3 does not use binding to the system theme.

[kazerniel]

Btw I think it might be easiest if I make a Google Sheets documents for the worklist of icons, it lets me embed images in cells.

[Serg-Norseman]

For the partial view, would this icon work then? It implies opening a new copy with that line, and a table might be the closest depiction of what it is?

I support the proposed icon for partial view. For trees, your prototype was quite clear to me, so I silently supported it :) If you find a more interesting option, we will consider it too.

As a hypothetical option, we can also consider increasing the icons for the buttons in the toolbar. Let's try, for example, 32 pixels. I used 24px buttons everywhere - because they were available to me when I started. And there were enough types to cover most of the program's needs. I'm a bad designer, so I didn't try to find other solutions.

If you make the buttons bigger, I would agree to it only for the toolbar, because I really don't want to waste space in other windows and dialogs ))) If you find interesting options, we'll consider them. I'll then specifically separate the glyphs for the main toolbar from the others.

[Serg-Norseman]

Leave an any comment in the issue by themes (#624) - I'll add you as a member so you'll get commit notifications. I find this task interesting enough that I dropped everything else and started working on it. The first commit restoring the topics to GKv3 will be out tonight or tomorrow evening.

[Serg-Norseman]

Btw I think it might be easiest if I make a Google Sheets documents for the worklist of icons, it lets me embed images in cells.

I support.

Fix three points at once:

1. Your design theme - will it be public, with inclusion in the main project repository?
   If public:
2. Сhoose a name for it.
3. How to enter you into the history of the project: under a nickname or a real name?

[Serg-Norseman]

When restoring, I immediately include some extensions and improvements.

One of the first mandatory conditions: if a button in the interface never has text - the icon that is missing in the included theme is replaced with an icon from the default theme (to avoid getting empty toolbars).

[kazerniel]

For trees, your prototype was quite clear to me, so I silently supported it :)

Oh alright, then I misunderstood that comment of yours. So you meant this icon's replacement as unclear? I suppose with that specific depiction of family trees you mentioned before, it could be more like a historical scroll , like in the original. (The 1st icon idea focused on the "exported page" aspect.)

I find this task interesting enough that I dropped everything else and started working on it.

Thanks!! :)

1. Your design theme - will it be public, with inclusion in the main project repository?
   If public:
2. Сhoose a name for it.
3. How to enter you into the history of the project: under a nickname or a real name?

1. Sure, I'm happy for it to be part of the main repository. I only tried git forking/committing once in my life so far, so I'd prefer if you handled the integration aspect :D
2. Hmm "Modern"? Or "Material" if we want to be specific, seeing that so far we only used icons from that set. But "Modern" is probably simpler.
3. I don't want to connect this username with my official name, so "kazerniel" is fine :)

if a button in the interface never has text - the icon that is missing in the included theme is replaced with an icon from the default theme (to avoid getting empty toolbars)

That is fine. I think the only text we're likely to have is the "GED" file extension appearing in the file management icons, so that shouldn't be a translation issue. But even that might be replaced if we find a better indication of file management to combine with the smaller symbols.

I'm too tired to start that spreadsheet today, but hopefully tomorrow!

(Edit: oops this was meant to be a reply in the thread.)

[Serg-Norseman]

Yes, "historical scroll" is better :)

I'm afraid the term "Material" will be incomprehensible to the program's main users. Well, practically everyone outside of IT )))

So let's accept "Modern". From "kazerniel".

[Serg-Norseman]

I have restored the work of themes, and extended it to the main toolbar, three dialogs and toolbars of subordinate tables.

Tomorrow is unlikely, but on Tuesday I will start extending the approach to all other windows, dialogs and toolbars. Along the way, the current list of glyphs of the program will be worked out.

[kazerniel]

Sounds good!

I forgot to respond to this part:

As a hypothetical option, we can also consider increasing the icons for the buttons in the toolbar. Let's try, for example, 32 pixels. I used 24px buttons everywhere - because they were available to me when I started. And there were enough types to cover most of the program's needs. I'm a bad designer, so I didn't try to find other solutions.

I think we can make 24px work everywhere. The most detailed icons were probably the family tree ones, so if those are fine this way, then the rest should be okay too :)

[Serg-Norseman]

In your design I really liked the icons you introduced for attaching/detaching people and families. Be sure to save them in the set - I will add the corresponding types of "glyphs" especially for them.

[Serg-Norseman]

Current glyph list:

    Glyph_FileNew,
    Glyph_FileLoad,
    Glyph_FileSave,
    Glyph_FileProperties,
    Glyph_Export,
    Glyph_ExportTable,
    Glyph_Exit,

    Glyph_RecordAdd,
    Glyph_RecordEdit,
    Glyph_RecordDelete,
    Glyph_Search,
    Glyph_Filter,

    Glyph_TreeAncestors,
    Glyph_TreeDescendants,
    Glyph_TreeBoth,
    Glyph_Pedigree,
    Glyph_Maps,
    Glyph_Stats,

    Glyph_Organizer,
    Glyph_Slideshow,
    Glyph_Settings,

    Glyph_Help,
    Glyph_About,

    Glyph_Prev,
    Glyph_Next,
    Glyph_SendMail,
    Glyph_PartialView,

    Glyph_Accept,
    Glyph_Cancel,

    Glyph_ItemAdd,
    Glyph_ItemEdit,
    Glyph_ItemDelete,

    Glyph_LinkJump,
    Glyph_MoveUp,
    Glyph_MoveDown,

    Glyph_Copy,
    Glyph_Cut,
    Glyph_Paste,

    Glyph_ImageSave,
    Glyph_DocPrint,
    Glyph_DocPreview,

    Glyph_Start,
    Glyph_Stop,

    Glyph_Undo, // not used yet
    Glyph_Redo, // not used yet

    Glyph_Attach,
    Glyph_Detach,

[kazerniel]

Thanks, meanwhile I started making the spreadsheet, but the new icons are still missing: https://drive.google.com/drive/folders/1pXJA8x3j-IJLvFuG0Fckk1zlN6Yzb-Fz?usp=sharing

I can add these new glyph names tomorrow, for now I just used the previous list and the files I found in the Resources folder.

We'll have to decide on what would be a meaningful colouring logic of icons. So far I went with this grouping, but it was made somewhat haphazardly and could be improved, e.g. the cyan feels too close to the blue, and I'm not even sure it needs its own hue for just one kind of function.

• $\color{#af2938}{█}$ red: delete, detach, cancel, exit
• $\color{#825b01}{█}$ yellow (which is brown at that lightness): edit, save, export
• $\color{#227702}{█}$ green: create, link, accept
• $\color{#017176}{█}$ cyan: move
• $\color{#0268a5}{█}$ blue: go, jump, open, view
• $\color{#654abb}{█}$ purple: copy, paste, filter

I'm very much open to your input, and I can give it more thought tomorrow as well.

[Serg-Norseman]

The choice of colors, at least for now - I like it. Dark, calm, contrasting. My preferences )))

[kazerniel]

I think I'll change it to

• $\color{#af2938}{█}$ red: delete, detach, cancel, exit
• $\color{#825b01}{█}$ brown: edit, move, paste, save, export
• $\color{#227702}{█}$ green: create, link, copy, accept
• $\color{#0065b0}{█}$ blue: go, jump, open, view, filter
• $\color{#813faa}{█}$ purple: misc. (bookmark, settings, organizer, help, about)

[Serg-Norseman]

Removed one hard to distinguish color? I approve :)

[Serg-Norseman]

Eto.Forms works strangely with toolbars on Wpf backend. I have encountered this before, and I have code for it - it sets a fixed size for toolbar buttons. Since I made a mistake and my old icons for all non-standard sizes are 20x20, and the new ones are 24x24 (which is better and more visible), I will need to make a patch later so that the size of the toolbar buttons is an option in the theme file.

[Serg-Norseman]

I looked and looked... at first I wasn't sure. Now I'm absolutely sure: icons of strictly genealogical context (pedigrees/scroll, trees, possibly maps and statistics) should be a separate color. A good color for this is the scroll - brown? or purple? Perhaps this color should be taken only for the genealogical context. Or choose another one.

Blue is a very nice color, but it feels like it doesn't fit in this case. Purple maybe. Brown seems best.

[Serg-Norseman]

Excellent! I have no objections or additions :)

[kazerniel]

Ok, with the last few icons decided, I think the overall shapes and colours are set. Today I discovered that my vector graphics program has a pixel preview mode, so I started going through all the icons again to make them snap to the pixel grid better and so look sharper. I'll let you know when I'm done with that.

Meanwhile if you have any input on the icons, let me know :) The spreadsheet and the img folder always have the most up-to-date versions.

[Serg-Norseman]

I really like everything! Thank you for your work!

[Serg-Norseman]

If you suddenly have ideas regarding icons for ancestor and descendant circle charts, I will be very glad!

[kazerniel]

Hmm I don't think we could draw them in different shapes that would let the users distinguish them just by that (like with the trees), so I think the only way to go about it would be just using a circle chart icon with an up / down arrow in the corner.

[codersclub]

"Every marker is different for every taste" ;)
The best color is the one that a specific user likes!
Therefore, the best solution would be to put color preferences in the settings section of the selected theme.
And then we can organize competitions - whose theme is more beautiful :)

[Serg-Norseman]

"Every marker is different for every taste" ;) The best color is the one that a specific user likes! Therefore, the best solution would be to put color preferences in the settings section of the selected theme. And then we can organize competitions - whose theme is more beautiful :)

@codersclub I think you don't understand what is being discussed here.

We are discussing the colors of semantic groups of icons in a specific design theme by @kazerniel. This is his design theme, the icons he proposed.

What are you proposing? Customization and dynamic color change in icons?!

But design colors in general are configurable in theme files. This feature has existed for several years. There are three experimental themes of mine and now there will be a theme by @kazerniel. There are no others yet. And no contests are possible, because no one else has even tried to propose anything yet.

[kazerniel]

Btw originally the modern icons are svg vector files, so if they were embedded in that format, technically their colour could be set via code, though I don't know how well the current programming framework would handle this, just wanted to put it out there 😅

[Serg-Norseman]

I released on the 14th, and today I was sent a question about multimedia and there was a theme with your icons on the screenshot :)
Apparently the user liked it :)

[kazerniel]

Yay :) I haven't yet finished sharpening all the icons, so I guess the finished set will go in a later release.

[Serg-Norseman]

We have opensource. I try, if possible, to make releases with finished functions. But often with large tasks it is impossible. Help has not been updated for 2 or 3 years. Only in this release I updated everything completely. And the mobile version had to be postponed for 1-2 versions.

In the theme, the colors still need to be worked out - they do not match the icons. But it is necessary to take into account that the colors of the toolbars and menu in GKv3 still do not work. A complete bummer - I can not get from the top level of Eto.Forms to WPF restrictions.

[kazerniel]

As the set is now nearing finishing, I added the licensing info the the spreadsheet. Most of it is Apache v2.0 as the vast majority of icons have been modified from the Material Design Icons set, with some Open Sans font used in the GED ones (SIL Open Font License v1.1) and the religion symbols from Wikipedia are all public domain.

[kazerniel]

@Serg-Norseman Hey, I think maybe Google didn't notify you about some comments I left on the spreadsheet, so copying them here:

1. Are you happy with the Ancestors' / Descendants' Circle icons?
2. I'm a bit confused about what dimensions the Info icon file should be. The 14x14 modern icon (not counting the margin) is rendered 15x15 in my GEDKeeper. What file dimensions I should optimise sharpness for?

[Serg-Norseman]

I ask you to forgive me: when I was looking at the document, I didn't notice the cell comment icon :)

Yes, I liked the icons of the circle diagrams, everything is fine. Considering the inconvenient essence of these diagrams, which somehow needs to be shown in a small icon - they turned out very well! Thank you!

Regarding the "Info" icon in the tree - I looked at the code, I had an incorrect formula there, not tied to the actual size of the image. I fixed it, the change will come out with the next release. Or maybe I'll release a patch in a few weeks.

I have a question: don't you want to try to adjust the colors in the theme so that they better suit your icons? I tried to come up with something, but my attempts were no good.

[kazerniel]

I have a question: don't you want to try to adjust the colors in the theme so that they better suit your icons? I tried to come up with something, but my attempts were no good.

I can give it a try, but I'm not familiar with how themes are managed in the program. Should I do a mock-up, or are background and border colours defined somewhere I can see?

[Serg-Norseman]

https://github.com/Serg-Norseman/GEDKeeper/blob/master/themes/Modern.yaml

[Serg-Norseman]

In GKv2 all settings work. In GKv3 the settings of color Strip (toolbar), Menu - unfortunately are not supported.

The file is reloaded only when the program is started.

[kazerniel]

@Serg-Norseman Apologies I've been quite busy in recent weeks, but regarding the modern theme colours, now that I'm looking at that YAML file and testing out how it controls the theme, I'm a bit confused because many entries don't seem to affect any element that I can find. (Not sure if it matters, but I'm running the app on Windows 10.)

So to try to make sense of it, I put together a little documentation (highlighted elements with yellow bg and red text):

Editor + EditorText: most of the text and dropdown fields in the UI - only exception I found was the Sex dropdown)

Screenshots

Control + ControlText: the tabs and background of the main grid, sidebar and status bar

Screenshot

Window + WindowText: ⚠ can't find anything it would affect

Dialog + DialogText: ⚠ can't find anything it would affect

ButtonFace: background of all enabled buttons except the default button in the dialog

Screenshot

ButtonText: shared between default and non-default buttons (included in screenshot above)

AccentButton: background of the default button in the dialog

Screenshot

ButtonBorder: ⚠ can't find anything it would affect

Strip: ⚠ can't find anything it would affect

Dropdown: ⚠ can't find anything it would affect

MenuBorder: ⚠ can't find anything it would affect

MenuItemSelected: ⚠ can't find anything it would affect

Link: links in the right sidebar

Screenshot

Grid: background of the list of entries

Screenshot

GridText: ⚠ can't find anything it would affect

GridHeader + GridHeaderText: ⚠ can't find anything it would affect

Tab: ⚠ can't find anything it would affect

TabHighlight: ⚠ can't find anything it would affect

TabSelected: ⚠ can't find anything it would affect

HighlightReadabilityRows: ⚠ can't find anything it would affect (also can't find an option to turn it on in case it's off by default)

HighlightUnparentedIndi: ❔ can't test it, option is greyed out

HighlightUnmarriedIndi: ❔ can't test it, option is greyed out

HighlightInaccessibleFiles: ❔ didn't test it, my trees don't have any files attached

[Serg-Norseman]

I will check all the points of the questions on the themes. But I would recommend working on the theme first in GKv2 - because all the problematic points in the third version work normally in the second.