Topic on Skin talk:Citizen

Hi! Wonderful skin! Thank you very much for developing and making it available. I have been really glad since I've found it. .

I would like help changing a few things in order to use the skin for my personal wiki. I am a total novice to css, less, json etc. I thought could I could understand my way through the files in the skin folder but I could not.

The following items are what I would like to achieve.

1. Make the dark mode always enabled (I've read it is not possible to toggle it).
2. Make the logout button in the side panel with the same color as the rest of the menu (the red distracts me a bit when I open the panel).
3. Change the values of the colors of dark mode to be closer to the ones I already use on my editor.
4. Change the style of headings and text (font, size, color etc.).

Are there trivial ways to make such changes? If not, could you give me some guidance as to what should I do. Thank you again very much for creating this skin and thank you in advance for the help. (Sorry if my wording is confuse at any point. Brazilian here.)

We made a lot of progress recently on making the skin more customizable, and to answer your question:

1. You can now set the default theme of the skin in LocalSettings.php, users are able edit their default option in Special:Preferences, and there is also a toggle button in the header

2. Add the following line onto your MediaWiki:Citizen.css page

#p-personal #pt-logout a {
  background-color: transparent;
}

3. You should be able to change the dark mode color scheme by only the :root selector with CSS. Just define the color that you want to override in MediaWiki:Citizen.css

4. You can manually define the individual styles with CSS in MediaWiki:Citizen.css, but with that you need to find the exact style to override.

I would say that you need some knowledge on CSS to make changes like this. It is a pretty easy language to learn and I am sure you will get the hang of it soon :)

Maybe you can tell me what exactly I have to do to get rid of that white (or dark) gradient at the top?

I really don't like it, especially on top of images it just doesn't look good at all. I would maybe make it solid and transparent. But the gradient is a no-go :D

Thanks in advance for any help!

The header selector would be .mw-header:before. You can change it to a solid color or transparent by using the background rule.