Add installation instruction in the README

[andreasomaini]

It would be great to have a few installation instructions

EDIT: I am also trying to install it on Ferdi but I can't figure it out how to install it

[Barina]

Well the installation is just like the installation of the Dark-WhatsApp style (or any user style really) you can follow it with ease.
A dedicated installation for Dark-Telegram may be added to wiki in the future but for now its really the same as Dark-WhatsApp style.
I'll add this installation guide reference in the README file for now :)

I'm not really familiar with Ferdi, it'll require an investigation from my end. So to get it fast we'll need someone already knowing this..
@vednoc posted a way of doing it here and @dcferreira did something similar to the Dark-WhatsApp style, maybe we can use that too :)

[andreasomaini]

Hi, thanks for your response.

In order to import any theme to Franz/Ferdi , you need a single CSS file.
It looks like @vednoc maintains a CSS only file that does not contain any UserStyle variable.

I can't find any easy and automatic way to precompile UserStyle to plain Stylus/CSS, I only found this which seems like the original Stylus precompiled code

[Barina]

OK I did tried something..
Iv'e added a new file (Dark-Telegram-Plain-CSS.styl) copy from the original styl and changed everything "variables" there according to @vednoc knowledge 😬
And ran the commend (in VSCode):
stylus Dark-Telegram-Plain-CSS.styl
output: compiled Dark-Telegram-Plain-CSS.css

Which compiled successfully.
Can you check the new generated CSS file?

Edit:
You may need to change the name to darkmode.css as mentioned in vednoc comment.

[vednoc]

I actually just replace the UserCSS metadata from wa.user.styl with proper stylus-lang variables that correspond to default UserCSS options, and from there just convert it to CSS using stylus-lang CLI.

Another way to do it would be to customize options you want via Stylus configuration menu, open the DevTools and find the injected stylesheet then copy that and paste it into darkmode.css for use in Franz/Ferdi. This way doesn't work properly in Chromium-based browsers because they don't show the full output (it's truncated for performance reasons, I suppose), so you'll probably want to use Firefox in order to do it properly.

I was kinda playing around with shell scripting to automate the process a lot more, but I'm quite new/bad at it and time is a limiting factor. When you make the initial template for UserCSS options, it takes like 5 minutes to compile it manually and tweaks things if necessary.

[vednoc]

Btw @Barina, you'll have to remove @-moz-document domain("web.telegram.org") { and the last } from the plain CSS file so that it can be used in Franz/Ferdi. This format is fine if you want to upload it to userstyles.org, in fact, it will apply the style globally if you leave it out.

[andreasomaini]

Can you check the new generated CSS file?

I did, it works! Thanks a lot!

you'll have to remove @-moz-document domain("web.telegram.org") { and the last }

I just needed to do that

I also suggest to add this instructions in the README so that new people can immediately know how to do it.

It would be great if Franz/Ferdi had some sort of plugin that directly integrates with that UserCss format...

[Barina]

I think I like the option to "steal" the Stylus injected file I think it'll make it easier to make changes to the style and it'll be a lot less tense on us.. our time is valuable too 😉

Btw @Barina, you'll have to remove @-moz-document domain("web.telegram.org") { ...

I think a script will handle compilation and modification for that :) maybe Python or something..

I did, it works! Thanks a lot!

Oh nice! glad to hear

I also suggest to add this instructions in the README so that new people can immediately know how to do it.

Maybe they don't have to if it'll already be done 😉

[Barina]

I written a new python script to remove those two lines but it is very specific so I think it'll produce problems in the future.. 😝
But for now its OK I guess

[Barina]

@andreasomaini can you specify the steps you've taken to get it to work with Franz\Ferdi?
So I would put it in the future documentation.

[thegoldgoat]

can you specify the steps you've taken to get it to work with Franz\Ferdi?

Yes:

1. Download this file
2. removed @-moz-document domain("web.telegram.org") { and the final } line from that file
3. renamed to darkmode.css
4. Move It into the appropriate folder ( you can open the folder from settings in Franz/Ferdi)
5. Reload Telegram

[Barina]

can you specify the steps you've taken to get it to work with Franz\Ferdi?

Yes:

1. Download this file
2. removed @-moz-document domain("web.telegram.org") { and the final } line from that file
3. renamed to darkmode.css
4. Move It into the appropriate folder ( you can open the folder from settings in Franz/Ferdi)
5. Reload Telegram

Cool thanks!

[Barina]

I made a new commit (4187cac) and added new compile.py script to make my life a bit easier 🙂
This way I'll work only on one file and every version bump I'll run that compile.py script.

For new comers that wants to make changes to the style before generating a darkmode.css it is now easy as changing the values in the user.style file (or user.css it doesn't matter) save and run the script like
python compile.py
And if everything went ok, a new darkmode.css file will be generated.

[dcferreira]

Since I was mentioned above, and actually I'm also using Telegram (up to today without a dark theme), I stole your darkmode.css and added it to my repo.

I'd rather have my repo somehow just link to darkmode.css here, but couldn't think of a simple way to do it. So as it is now I'll just update it every time you change.

I hope this is fine with you @Barina , let me know if you'd like me to change anything at all :)
And thanks for your work with the theme!

[Barina]

Yes absolutely fine 😊

[andreasomaini]

@Barina I guess you could link @dcferreira 's repo in the README, then we can close this issue

[Barina]

I guess you're right I'll link it in the README and add this issue to the WIKI project as a new "to do" item.