Question Trying to make a dark theme

Hi,
Most of my time spent in my webtrees site is in the evening, more or less in the dark, and I've been missing a dark theme that I like. The last days I've spent some time trying to implement one, based on the example theme. The goal is only to alter the colors and other CSS attributes. I have no previous experience in this area (CSS and web development), so it's probably full of stupid mistakes (because I don't really realize what I'm doing). It is heavily influenced by the GitHub dark theme as a reference (should probably move away from those colors to avoid theft...). I think it's starting to look pretty decent now, however there are a few things I can't really understand how to solve.

* How to make the tables have rounded outer borders (without the inner cells covering them). I've tried many things but never really got it the way I want it.
* Changing the color of the collapse arrow (that is blue on the screenshot)
* Getting rid of the thick blue line that appears after expanding (can also be seen on the screenshot)

 

Link to page from screenshot.
 

You can try Justblack ( github.com/JustCarmen/webtrees-theme-justlight ). Customizations could be made based on this theme.

Sure, I have been using and also looking at the source code for that theme. I just wanted something a bit different.

I want to make something based on the minimal theme, with as few changes as possible.

ekdahl wrote:

* Changing the color of the collapse arrow (that is blue on the screenshot)
 

This has been solved, by adding this CSS (new images for the arrows with other colors):

ekdahl wrote:

* Getting rid of the thick blue line that appears after expanding (can also be seen on the screenshot)

 

Was solved with the following CSS addition:

I have a new question. In this folder I see there are some icons. How can for example the chart icon be used in front of the chart menu button?

With the following CSS, I can set some text where I want the icon to be, but how can the icon be referenced and put there instead?

use
content: url('/public/favicon-32.png');

Thanks for the answer, but that does not answer my question.
The question is how and if the inline SVGs already provided with webtrees can be used (from CSS), not how I can add my own image and link to that.

Anyway, for now I provided the fontawesome font with the module and use font icons instead. But since the icons I wanted to use are already included with webtrees I wanted to use those, but am unsure how.

In the last weeks I did some more work on this and added palette selection, icons for menus and also some fixes. I'm aware that there are still some issues that needs to be fixed, but I think it's getting closer to a usable state.
Feel free to take a look  here
Source code is available  here

I like your theme! Especially the "dark dimmed" palette.

Thank you!
I like that palette too, it's easy on the eyes.

Hello

I like it a lot!
Is it possible to view the Google, Bing, OpenStreetMap pictograms for the places? on my site, they are not displayed!
Jean-Luc






arbrelelievre.yj.fr/webtrees/index.php?r...ASCALINE-CHEVALLIER#

Thanks!
If I understand correctly, you mean the small links to Google Maps, OSM etc. after coordinates.
This theme is based on the minimal theme and displays the same icons as that theme (like this ). I see that colors and other themes have other icons for the map services.

I'll see what I can do. Unfortunately there doesn't seem to be brand icons for those services from fontawesome, so to use official logos is probably the best path, or use the same icons as the other themes.

I've added custom icons for map links now. Please update and let me know if it looks ok, @JLL.

Hi @ekdahl,

Congrats for the nice work. I really enjoy the light high contrast pallete.

Could you please fix the double end parentheses typo in "resources/css/theme.css:175"?

As a suggestion, it would be nice to be able to configure the default pallete (it's currently hardcoded).

Thanks.

Cheers

Thank you!
Fixed the typo.
Added an issue  for the default palette selection.

Hi Ekdahl,

nice theme with great selections of palettes to choose from. I've noticed that the shortcut icon/url with the dropdown menu for the different charts and families is missing in the individual boxes, such as in the tab listing family members, as well as in the different charts, see list below and images below.
The icon/url shortcuts can be seen in the minimal theme of webtrees but not the github theme:
- In the Favorites block with individuals listed as a favorite
- In the Families Tab for individuals listed under respective family
- In the Family Chart when viewing families with spouses
- Menu - Charts - Ancestors
- Menu - Charts - Family book
- Menu - Charts - Hourglass chart
- Menu - Charts - Pedigree

Regards, gudjonsi

Hello

Changing the Google icons, etc., works well, great and thank you!
Using this layout, I noticed a few small details:
-the character * put at the end of a first name, is not taken into account: it allows to underline the usual first name.
-in multiple choice with a matchcode when entering, the different choices not very readable, visible, especially in black color mode: see image capture!

J-LUC

Thanks for the reports!
- Highlighting of the first name has been added
- Styling of suggestion box while entering e.g. place names should also be fixed
- The invisible chart link is yet to be fixed, but an issue report has been created here

ekdahl wrote:

... It is heavily influenced by the GitHub dark theme as a reference (should probably move away from those colors to avoid theft...)
 

Looks like that will not be needed since the whole "Primer Design System" for GitHub is MIT licensed, so should be fine to use all colors etc. as is.
Primer CSS
Primer Design System