obvionaoe / dark Goto Github PK

:first_quarter_moon_with_face: Dark themes / mode for Rambox, Franz or Ferdi messaging services

License: GNU General Public License v3.0

JavaScript 0.03% CSS 99.52% Batchfile 0.34% Shell 0.10%

css dark-theme darkmode dark-mode darktheme ferdi themes whatsapp instagram messenger

dark's Introduction

Archival Notice

As I stopped using Ferdi - and before it, Rambox - I’ve decided to archive this repository as I will not be developing it further. I hope it’ll still be useful to anybody looking to theme their messaging services.

dark

Don’t burn your eyes!

This repository is a collection of dark themes for Rambox, Franz or Ferdi that I use in some messaging services.

Applying the themes

Rambox

Disclaimer: I no longer use Rambox but I left this here for everyone who still uses it!

Click to expand!

First, find the service you wish to apply the theme to

go into the settings for that service

once you’re there, click on “Advanced”.

A text-box will appear, copy the JavaScript code from function.js into it, then copy the CSS code for the service you want to theme into the `[paste css here]` area - **don’t remove the backticks** - and save your changes!

Then press “Yes” on the service restart popup

and that’s it, all done and ready to use!

Ferdi/Franz

If you have Git

Choose a folder where you want to store the themes and run the following commands:

Linux/MacOS

$ git clone https://github.com/obvionaoe/dark.git
$ cd dark
$ sh install.sh [app] [service]

Replace [app] by the application you’re using (either Franz or Ferdi) and [service] by the name of the service you want to theme or by all to install all of the dark themes.

Windows

$ git clone https://github.com/obvionaoe/dark.git
$ cd dark
$ install.bat [app] [service]

Replace [app] by the application you’re using (either Franz or Ferdi) and [service] by the name of the service you want to theme or by all to install all of the dark themes.

To apply the themes, just turn on dark mode inside the service settings.

If you don’t have Git

Just copy the [service]/darkmode.css file, with [service] being the name of the service you want to update, into the recipe folder of that service.

To apply the themes, just turn on dark mode inside the service settings.

Updating the themes

Rambox

Same steps you use for applying them in the first place.

Ferdi/Franz

If you have Git

Just run git pull origin master in the repo folder you cloned and reload the services inside Ferdi, Franz or Rambox.

If you don’t have Git

Just copy the [service]/darkmode.css file, with [service] being the name of the service you want to update, into the recipe folder of that service!

Themes

Instagram - forked from vednoc/dark-instagram
(Customized)

Screenshot

Messenger - forked from cicerakes/DarkNight-FBMessenger
(Bugfixed and improved)

Screenshot

Telegram - forked from Barina/Dark-Telegram
(Customized, bugfixed and optimized performance)

Screenshot

WhatsApp - forked from vednoc/dark-whatsapp
(Customized and optimized performance)

Screenshot

License

Released under the GPL-3.0 license.

dark's People

Contributors

Stargazers

Watchers

dark's Issues

Converse.js | Custom CSS Dark theme

Hello there. Thanks for the good work!

I created a custom .css code for a Converse.js (XMPP webapp) service dark mode in Rambox.
You just need to add the css to rambox using the custom .js you added in the Rambox folder in this repo and replacing "apply css" with my custom code.
I know, the theme is not perfect but it works. Better than nothing.

I tried to create a new pull request but I was not able too.. here is the code:

#conversejs .message.date-separator .separator-text, #conversejs .message.separator .separator-text {

    background: #1d1d1d;
    bottom: 1px;
    color: var(--separator-text-color);
    display: inline-block;
    line-height: 2em;
    padding: 0 1em;
    position: relative;
    z-index: 5;
}

#conversejs converse-chat-toolbar .fa svg, 
#conversejs converse-chat-toolbar .fa:hover svg, 
#conversejs converse-chat-toolbar .far svg, 
#conversejs converse-chat-toolbar .far:hover svg, 
#conversejs converse-chat-toolbar .fas svg, 
#conversejs converse-chat-toolbar .fas:hover svg {
    fill: #28a852;
}

#conversejs .chatbox converse-chat-toolbar {
    border-top: var(--chatbox-message-input-border-top);
    color: var(--chat-toolbar-btn-color);
    background-color: #161616;
}

#conversejs, #conversejs-bg, .converse-fullscreen {
    --subdued-color: #506521;
    --green: #252525;
    --redder-orange: #E77051;
    --orange: #E7A151;
    --light-blue: #2b90ab;
    --lighter-blue: #29c19c;
    --chat-status-online: #00c100;
    --chat-status-busy: var(--redder-orange);
    --chat-status-away: var(--orange);
    --brand-heading-color: #3c9fce;
    --completion-light-color: #aeffb7;
    --completion-normal-color: #1f5217;
    --completion-dark-color: #2c7118;
    --link-color: #7eeaca;
    --link-hover-color: #fd5a59;
    --link-color-lighten-10-percent: #6c95cc;
    --dark-link-color: #206485;
    --global-background-color: #45b150;
    --inverse-link-color: white;
    --text-shadow-color: #FAFAFA;
    --text-color: #9ade30;
    --controlbox-text-color: #1af780;
    --text-color-lighten-15-percent: #85e224;
    --message-text-color: white;
    --message-receipt-color: #52bf70;
    --save-button-color: #2d7926;
    --message-avatar-width: 36px;
    --message-avatar-height: 36px;
    --chat-textarea-color: white;
    --chat-textarea-background-color: #101010;
    --chat-textarea-height: 60px;
    --send-button-height: 27px;
    --send-button-margin: 3px;
    --inline-action-margin: 0.75em;
    --roster-height: 194px;
    --chat-correcting-color: var(--chat-head-color-lighten-50-percent);
    --chat-head-color-dark: #1E9660;
    --chat-head-color-darker: #0e763b;
    --chat-head-color-lighten-50-percent: #658473;
    --chat-head-color: var(--green);
    --chat-head-text-color: #101010;
    --chat-toolbar-btn-color: #28a745;
    --chat-toolbar-btn-disabled-color: gray;
    --chat-content-background-color: #101010;
    --chat-info-color: var(--chatroom-head-bg-color);
    --highlight-color: #136d14;
    --highlight-color-darker: #276d10;
    --primary-color: #1a882e;
    --primary-color-dark: #44a716;
    --secondary-color: #818479;
    --secondary-color-dark: #465030;
    --warning-color: var(--orange);
    --warning-color-dark: #D2842B;
    --danger-color: #D24E2B;
    --danger-color-dark: #A93415;
    --light-background-color: #101010;
    --error-color: #D24E2B;
    --info-color: #11af55;
    --button-border-radius: 5px;
    --chatbox-border-radius: 4px;
    --groupchats-header-color: #e88f5f;
    --groupchats-header-color-dark: #da7357;
    --controlbox-width: 250px;
    --controlbox-head-color: #45899a;
    --controlbox-heading-color: inherit;
    --controlbox-heading-font-weight: bold;
    --controlbox-heading-top-margin: 0.75em;
    --controlbox-pane-background-color: #101010;
    --controlbox-pane-bg-hover-color: #bdffac;
    --panel-divider-color: #3bc73b;
    --chat-gutter: 0.5em;
    --minimized-chats-width: 130px;
    --mobile-chat-width: 100%;
    --mobile-chat-height: 400px;
    --normal-font: "Helvetica","Arial",sans-serif;
    --heading-font: 'Muli',normal;
    --branding-font: 'Baumans',cursive;
    --heading-display: block;
    --heading-color: #101010;
    --chatroom-badge-color: #d8684b;
    --chatroom-badge-hover-color: #c35c40;
    --chatroom-correcting-color: #fadfd7;
    --chatroom-head-bg-color-dark: #b93310;
    --chatroom-head-bg-color: #8e2307;
    --chatroom-head-border-bottom: 0px;
    --chatroom-head-button-color: var(--chatroom-head-bg-color);
    --chatroom-head-color: #cccccc;
    --chatroom-head-description-display: block;
    --chatroom-head-description-link-color: white;
    --chatroom-head-title-font-weight: normal;
    --chatroom-head-title-padding-right: 0px;
    --chatroom-width: 500px;
    --muc-toolbar-btn-color: #d44520;
    --muc-toolbar-btn-disabled-color: grey;
    --headline-head-color: #2b2721;
    --headline-message-color: orange;
    --chatbox-button-size: 14px;
    --fullpage-chatbox-button-size: 16px;
    --font-size-tiny: 10px;
    --font-size-small: 12px;
    --font-size: 14px;
    --font-size-large: 16px;
    --font-size-huge: 20px;
    --message-font-size: var(--font-size);
    --separator-text-color: #d0d0d0;
    --chat-separator-border-bottom: 2px solid #118c08;
    --chatroom-separator-border-bottom: 2px solid #a03519;
    --chatbox-message-input-border-top: 4px solid #2d352c;
    --chatroom-message-input-border-top: 4px solid var(--chatroom-head-bg-color);
    --line-height-small: 14px;
    --line-height: 16px;
    --line-height-large: 20px;
    --line-height-huge: 27px;
    --occupants-padding: 1em;
    --occupants-background-color: #101010;
    --occupants-border-left: 0.2143rem solid #1d2124;
    --occupants-border-bottom: 1px solid #656464;
    --embedded-emoji-picker-height: 300px;
    --avatar-border-radius: 10%;
    --avatar-border: 1px solid #21a215;
    --avatar-background-color: #101010;
    --fullpage-chat-height: calc(var(--vh, 1vh) * 100);
    --fullpage-chat-width: 100%;
    --fullpage-emoji-picker-height: 300px;
    --fullpage-max-chat-textarea-height: 15em;
    --overlayed-chat-head-height: 55px;
    --overlayed-chat-height: 450px;
    --overlayed-chat-width: 300px;
    --overlayed-chatbox-hover-height: 1em;
    --overlayed-emoji-picker-height: 200px;
    --overlayed-max-chat-textarea-height: 200px;
    --overlayed-badge-color: #abda2d;
    --list-toggle-color: #6c715e;
    --list-toggle-hover-color: #808c64;
    --list-toggle-font-weight: normal;
    --list-item-hover-color: rgb(0 0 0 / 0%);
    --list-item-action-color: #375438;
    --list-item-link-color: inherit;
    --list-item-link-hover-color: #254c2d;
    --list-item-open-color: #243325;
    --list-item-open-hover-color: #006b19;
    --list-dot-circle-color: #f6dec1;
}

If it's fine, I'd like to add it to this repo!

EDIT:
It works with Ferdi too! Just replace the "style.css" in your recipe folder with this code!
(To avoid the service to be reloaded everytime to make this custom theme work, just disable the dark mode of the service)

CSS no longer working for "new" Facebook Messenger (Rambox)

Describe the bug:
The custom dark mode JS/CSS for Facebook Messenger within Rambox no longer appears to be working. The UI within Messenger appears to have updated within the last day or two (for me) to match the "new" Facebook UI, or at least to more fully align with that style that has been rolling out to users over the last several months.

Steps to reproduce:
Removing, refreshing, re-adding the custom CSS using the recommended steps does not resolve the issue.

System information:

OS: Win 10
Application: Rambox 0.7.7

Whatsapp Update Needed

Please update the whatsapp dark mode version. It's causing problem again. Thanks

Instagram dark mode has too many space between words

I just applied darkmode.css to Instagram Direct in Rambox. It turned the web app dark as expected, but also made the words look strange, as in the picture below:

Is there an easy way to fix this?

Whatsapp DarkMode needs update.

Whatsapp dark mode was working 100% fine.
Please update v2.6.0 to v2.9.0 as of vednoc/dark-whatsapp.

Now it has allot of bugs probably due to update of web version. I have checked vednoc/dark-whatsapp they have updated the dark mode css yesterday to version 2.9.0.

Thanks

testing webhooks

Themes slowing down rambox

Hello,

first of all, thank you for your work! The themes look great. Unfortunately, they also slow down my rambox extremely.. It's not just the apps I'm using (Messenger, Telegram, WhatsApp & Discord), but also the program itself, e.g. when I open a menu or whatever. Everything is slow. Using just one theme was enough. Any idea what I could do to fix this? I'm running rambox 0.7.3 on Ubuntu 18.04.

Rambox alternative

Hey,
looking forward to use this for Rambox. On the readme.md you stated you aren't using it any longer so i was wondering if you found a better alternative with more features.
Thank for the darkmode already!

Messenger Theme

When typing a new message the text isn't visible until sent

WhatsApp Dark Theme Not Working

A big hats off to the work of obvionaoe on this project. That being said, unfortunately, the WhatsApp theme included here is not working for me in the AppImage version of Rambox on an up-to-date Manjaro KDE with a fractionally-scaled hi-DPI screen. After pasting the included script into the text box in the WhatsApp service settings, nothing changes.

Screenshots:
Out of place Emoji and send button

System information:

OS: Windows 10
Application: Ferdi 5.5.0 (x64)

obvionaoe / dark Goto Github PK

dark's Introduction

Archival Notice

dark

Applying the themes

Rambox

Ferdi/Franz

Updating the themes

Rambox

Ferdi/Franz

Themes

License

dark's People

Contributors

Stargazers

Watchers

Forkers

dark's Issues

Recommend Projects

Recommend Topics

Recommend Org