obvionaoe / dark Goto Github PK

View Code? Open in Web Editor NEW

109.0 7.0 37.0 4.44 MB

: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 People

Contributors

Stargazers

Watchers

dark's Issues

testing webhooks

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)

Part no longer works

I assume they changed some selectors but as you can see the edit area and icon background are no longer correct. Typing is white on white.

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?

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

Messenger Theme

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

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!

Whatsapp Update Needed

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

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.

Ferdi - Telegram - Write Message pane issue

Describe the bug:
The emoji bar and send button on write message pane is out of place, in all size window (maximize or not).

Steps to reproduce:
Copy the darkmode.css to the correct folder in Ferdi, and restart Telegram service. Still have the same issue after I quit Ferdi and call it again.

Screenshots:
Out of place Emoji and send button

System information:

OS: Windows 10
Application: Ferdi 5.5.0 (x64)

Letter 'A' near the date in TELEGRAM

You can se a big 'A' at the start and at the end of the date box

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.

Recommend Projects

React

A declarative, efficient, and flexible JavaScript library for building user interfaces.
Vue.js

🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript

TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
TensorFlow

An Open Source Machine Learning Framework for Everyone
Django

The Web framework for perfectionists with deadlines.
Laravel

A PHP framework for web artisans
D3

Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

javascript

JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
web

Some thing interesting about web. New door for the world.
server

A server is a program made to process requests and deliver data to clients.
Machine learning

Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Visualization

Some thing interesting about visualization, use data art
Game

Some thing interesting about game, make everyone happy.

Recommend Org

Facebook

We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft

Open source projects and samples from Microsoft.
Google

Google ❤️ Open Source for everyone.
Alibaba

Alibaba Open Source for everyone
D3

Data-Driven Documents codes.
Tencent

China tencent open source team.