Web based family history software

Question Trying to make a dark theme

  • ekdahl
  • Topic Author
  • Offline
  • New Member
  • New Member
More
4 months 3 weeks ago #1 by ekdahl
Trying to make a dark theme was created by ekdahl
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.
 

Please Log in or Create an account to join the conversation.

More
4 months 3 weeks ago #2 by mp
Replied by mp on topic Trying to make a dark theme
You can try Justblack ( github.com/JustCarmen/webtrees-theme-justlight ). Customizations could be made based on this theme.

Martin - ffp.bauschaffen.de

Please Log in or Create an account to join the conversation.

  • ekdahl
  • Topic Author
  • Offline
  • New Member
  • New Member
More
4 months 3 weeks ago #3 by ekdahl
Replied by ekdahl on topic Trying to make a dark 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.

Please Log in or Create an account to join the conversation.

  • ekdahl
  • Topic Author
  • Offline
  • New Member
  • New Member
More
4 months 3 weeks ago #4 by ekdahl
Replied by ekdahl on topic Trying to make a dark theme

* 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):
Code:
[dir] .accordion-button.collapsed::after {     background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%238F95A0'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e"); } [dir] .accordion-button:not(.collapsed)::after {     background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%238F95A0'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e"); }

Please Log in or Create an account to join the conversation.

  • ekdahl
  • Topic Author
  • Offline
  • New Member
  • New Member
More
4 months 3 weeks ago #5 by ekdahl
Replied by ekdahl on topic Trying to make a dark theme

* 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:
Code:
[dir] .accordion-button:focus {     box-shadow: 1px 1px #30363D !important; }

Please Log in or Create an account to join the conversation.

  • ekdahl
  • Topic Author
  • Offline
  • New Member
  • New Member
More
4 months 2 weeks ago #6 by ekdahl
Replied by ekdahl on topic Trying to make a dark theme
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?
Code:
.nav-item.menu-chart a::before {     content: "Icon";   }

Please Log in or Create an account to join the conversation.

More
4 months 2 weeks ago #7 by Franz Frese
Replied by Franz Frese on topic Trying to make a dark theme
use
content: url('/public/favicon-32.png');

Please Log in or Create an account to join the conversation.

  • ekdahl
  • Topic Author
  • Offline
  • New Member
  • New Member
More
4 months 2 weeks ago #8 by ekdahl
Replied by ekdahl on topic Trying to make a dark theme
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.

Please Log in or Create an account to join the conversation.

  • ekdahl
  • Topic Author
  • Offline
  • New Member
  • New Member
More
3 months 3 weeks ago - 3 months 3 weeks ago #9 by ekdahl
Replied by ekdahl on topic Trying to make a dark theme
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
Last edit: 3 months 3 weeks ago by ekdahl.

Please Log in or Create an account to join the conversation.

More
3 months 2 weeks ago #10 by hermann
Replied by hermann on topic Trying to make a dark theme
I like your theme! Especially the "dark dimmed" palette.

Hermann
Designer of the custom module "Extended Family"

webtrees 2.1.21 (all custom modules installed, PHP 8.3.12, MariaDB 10.6) @ ahnen.hartenthaler.eu

Please Log in or Create an account to join the conversation.

  • ekdahl
  • Topic Author
  • Offline
  • New Member
  • New Member
More
3 months 2 weeks ago #11 by ekdahl
Replied by ekdahl on topic Trying to make a dark theme
Thank you!
I like that palette too, it's easy on the eyes.

Please Log in or Create an account to join the conversation.

  • JLL
  • Offline
  • New Member
  • New Member
  • New user Webtrees 2.1.15
More
3 months 2 weeks ago #12 by JLL
Replied by JLL on topic Trying to make a dark theme
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#

Please Log in or Create an account to join the conversation.

  • ekdahl
  • Topic Author
  • Offline
  • New Member
  • New Member
More
3 months 2 weeks ago #13 by ekdahl
Replied by ekdahl on topic Trying to make a dark theme
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.

Please Log in or Create an account to join the conversation.

  • ekdahl
  • Topic Author
  • Offline
  • New Member
  • New Member
More
3 months 1 week ago #14 by ekdahl
Replied by ekdahl on topic Trying to make a dark theme
I've added custom icons for map links now. Please update and let me know if it looks ok, @JLL.

Please Log in or Create an account to join the conversation.

More
3 months 1 week ago - 3 months 1 week ago #15 by raaspt
Replied by raaspt on topic Trying to make a dark theme
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
Last edit: 3 months 1 week ago by raaspt.

Please Log in or Create an account to join the conversation.

  • ekdahl
  • Topic Author
  • Offline
  • New Member
  • New Member
More
3 months 1 week ago #16 by ekdahl
Replied by ekdahl on topic Trying to make a dark theme
Thank you!
Fixed the typo.
Added an issue  for the default palette selection.

Please Log in or Create an account to join the conversation.

More
3 months 1 week ago - 3 months 1 week ago #17 by gudjonsi
Replied by gudjonsi on topic Trying to make a dark theme
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


webtrees 2.1.20 - PHP 8.3 on OpenLiteSpeed Server - MariaDB 10.11.6 Database Server
Last edit: 3 months 1 week ago by gudjonsi.

Please Log in or Create an account to join the conversation.

  • JLL
  • Offline
  • New Member
  • New Member
  • New user Webtrees 2.1.15
More
3 months 1 week ago #18 by JLL
Replied by JLL on topic Trying to make a dark theme
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
Attachments:

Please Log in or Create an account to join the conversation.

  • ekdahl
  • Topic Author
  • Offline
  • New Member
  • New Member
More
3 months 6 days ago #19 by ekdahl
Replied by ekdahl on topic Trying to make a dark theme
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

Please Log in or Create an account to join the conversation.

  • ekdahl
  • Topic Author
  • Offline
  • New Member
  • New Member
More
2 months 3 weeks ago #20 by ekdahl
Replied by ekdahl on topic Trying to make a dark theme

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

Please Log in or Create an account to join the conversation.

Powered by Kunena Forum