Giter Club home page Giter Club logo

gmail-dark-modifications's Introduction

Gmail Dark Theme Tweaks

This style adds a dark theme to additional UI elements on the Gmail webpage. It also makes slight modifications to the appearance of certain elements, including restoring the red compose button.

There is also support for add-ons that add additional modifications (see bottom of description)

THIS STYLE REQUIRES THE DARK THEME IN GMAIL Settings Icon > Themes > Dark > Save

WHEN USING A CUSTOM BACKGROUND, CHANGE THE TEXT MODE TO DARK Settings Icon > Themes > A > Dark > Save

Currently themed:

  • context menus
  • Google Calendar
  • Google Tasks
  • Google Keep
  • loading screen

Modifications:

  • red compose button
  • translucent search bar
  • colorful inbox, starred, and snooze icons in sidebar

Do you have issues or suggestions? Submit an issue on the issues tab

Add-ons:
Square Compose Button - Gmail 2018
ADD-ON | Replace archive with done-Gmail Dark 2018

Preview

Installation

Install Stylus for either Firefox, Chrome or Opera and then install the style using one of these methods:

๐Ÿ“ฆ Install the usercss, which supports full customization and automatic updates.
๐Ÿ“ฆ Install from userstyles.org with no customization or automatic updates.
๐Ÿ“ฆ Install manually from GitHub with no customization or automatic updates, but useful for development. The style is in Mozilla format.

If you would like to contribute to this repository, please...

  1. Fork this repository
  2. Make your changes
  3. Create a pull request

Update Notes

v2.5.2

  • fixed the white border around the message border

v2.5.1

  • removed white flash in compose window

v2.5.0

  • added control for card and window border radius
  • switched quick compose to use same method for making text dark as email viewer

v2.4.0

  • switched to lighter default accent color for increased contrast (applies to accent text and button colors)
  • switched button text to be dark colored for increased contrast
  • applied accent color to more elements (snackbar buttons, selected message, other links)
  • hid blue focused message bar
  • added color picker for selected message background color
  • fixed white background in account picker

v2.3.1

  • fixed search box (again x3)
  • made email message details dropdown arrow visible

v2.3.0

  • themed un-styled context menus
  • context menus now match the border radius of buttons
  • made new context menu icons light
  • added dark background for Google Tasks date separators
  • fixed search box (again)
  • made Google Tasks new task box dark when focused
  • fixed account switcher background and border colors
  • fixed missing background on Google Calendar calendar selection screen
  • fixed invisible edit button for tasks in Google Tasks
  • blocked white flash behind compose button

v2.2.4

  • fix app drawer and account switcher (#6)

v2.2.3

  • fix search box text color (#5)

v2.2.2

  • fix inverted Gmail logo
  • fix invisible search box

v2.2.1

  • newsletters and other email types that were previously not styled are now dark
  • primary tab, inbox icon, and label context menu now follow the accent color
  • quick fix for search/filter creation
  • style new Google Keep search bar

v2.1.0

  • NEW: choose between light blue, your accent color, or white (default) for unread message text [UserCSS only]

v2.0.0

  • most colors and border radii are now customizable [UserCSS only]
  • hover effect for email list
  • fix addons headers
  • dark style for Google Calendar agenda view
  • email text is now slightly darker to accomidate for white backgrounds
  • top inbox tabs now have colors
  • all know modals are now dark styles
  • labels context menu now themed properly
  • fixed context menus in Google Tasks and Google Calendar
  • add dark style for calendar menus in Google Tasks, Google Keep, and Google Calendar
  • inbox icon is now red to metch the rest of Gmail
  • inline compose is now styled dark
  • scroll bar does not show in message list if the message list is not longer than the page
  • popout email toolbar is now themed
  • fixed various icons not visible
  • fixed account dropdown/switcher
  • fixed Google app drawer

v1.9

  • inline compose box dark theme

v1.8.2

  • compose email dark theme
  • email view dark theme
  • fixed search bar (again)
  • additional style refinements and fixes

v1.7.4

  • Google Calendar, Tasks: new user screen dark theme
  • Google Keep: no notes screen dark theme
  • context menu icons are now white
  • context menu headers are now themed
  • selected context menu items do not turn black
  • Google app drawer is dark again
  • Account switcher is themed again
  • Google notifications are themed again

v1.7.3

  • Google Calendar: select calendars UI dark theme

v1.8-BETA (instructions to enable beta features available at Stylish extension > Manage all styles > Gmail Dark Theme Tweaks)

  • dark email background with white text

v1.7.2

  • fixed about menu for add-ons background color
  • fixed some icons not loading in Chrome (switched from http to https)

v.1.7.1

  • fixed more apps button color in Google app drawer

v1.7

  • themed app drawer
  • themed account switcher

v1.6.1

  • more labels dropdown is now transparent

v1.6

  • themed Google Calendar plugin dark

v1.5.4

  • fixed search bar broken by Gmail update
  • fixed Google Tasks broken by Gmail update

v.1.5.3

  • themed Gmail theme selector dark

v.1.5.2

  • themed display density dialogue dark

v1.4

  • fixed google keep and google tasks theme for when multiple google accounts are plugged in
  • fixed 'completed' dropdown not themed in google keep plugin
  • fixed text color on selected option in context menus

v1.3

  • themed google keep plugin dark

v.1.1

  • themed google keep plugin dark
  • fixed sidebar for non-black background
  • removed rounded compose button

gmail-dark-modifications's People

Contributors

jackbuehner avatar m4heshd avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

gmail-dark-modifications's Issues

Clipped Messages Dark Mode

If an email is greater than 102 kB, a line that says:

[Message clipped] View entire message will link you to the full email. The full email displayed is not dark themed and has a white background.

Gmail for domains profile not dark, account switcher in wrong place

Gmail for domains really sucks on the default Dark theme because reading the email portion is white/unthemed so thanks for yours. However I do notice there are a couple of issues. The profile top right is not themed, and the modal to switch accounts appears in the wrong place (right over to the left)

SNAG-0005
SNAG-0006

Happy to provide additional info if needed

Changing search box background back to dark color

I proposed issue #5 and saw that it had been fixed. However, the background of the search box and its dropdown became bright white:
Screen Shot 2019-06-04 at 1 28 37 AM

I like the dark background before. I was wondering which part of the code I can modify to change it back (ever with invisible inputs in the search box)? Thank you.

Customizing the color of selected mails

you can see the color blue in this
change-blue-select-color
is there a way to change it to a custom color? or can that functionality be added? or is it maybe already possible? i tried everything but nothing did change it :(

anyways, thank you for this style :)

Convert various icons to white to increase legibility

A few suggested corrections:

.ajy > .ajz { background-image: url('https://www.gstatic.com/images/icons/material/system/2x/arrow_drop_down_white_20dp.png') !important; }

.ams.bkI::before { background-image: url('https://www.gstatic.com/images/icons/material/system/2x/reply_all_white_20dp.png') !important; }

.mK, .aaq .mK { background-image: url('https://www.gstatic.com/images/icons/material/system/2x/reply_all_white_20dp.png') !important; }

elements occasionally rendered in the wrong color

Sometimes I open a folder and a subject line is shown in black on a white background, below is a screenshot of such an example with the Firefox dev tools open to that element.

You can see that there is a style called #\:ht overriding the color, while on elements that are rendered correctly the active style is .y0, which is also the style one level down in the inheritance hierarchy in the incorrectly rendered element.

screenshot

Customizing the text color of the email content

I installed it via GitHub, which allows customization, but it does not seem to provide customization on the text color (or the text-background contrast in the dark version of the original font styling) of the email body. Could you consider adding this feature in the future? Or could you point out which part of the CSS code is responsible for the body text color? Thank you.

Google Tasks in Gmail

The colors of Tasks are not rendered correctly. Texts and some icons cannot be seen.
tasks

The search box towards the top of the page is invisible until you click in it

Also, the search box towards the top of the page is invisible until you click in it. When the page first loads it is grey but then reverts to black within seconds, then, when you click in the box, a border is shown.

I realise that area of the page is default set to transparent so I could change it to 'Accent color' making it clearer to see but that is quite ugly to look at. It would be nicer to look at if it could either remain grey as on loading or keep the border.

I should confirm I am using a dark Firefox theme but changing it, including to the 'Light' theme, does not make any difference to either of these scenarios.

Originally posted by @hermitical in #1 (comment)

margins turned white

It was working until yesterday when the margins of the email layout turned white:

Screen Shot 2022-10-22 at 12 24 50 PM

How do I correct this to make it dark again? Thank you.

Email bodies not dark anymore.

It seems that the Gmail dark theme now makes email bodies dark as well, and this style reverses this and makes them white instead.

White flash inside windows for compose a message

Hi, I inserted the css of gmail-dark.css inside Stylus.
Your theme looks very nice, however I found the following issue:

As I click on "Compose new message", the window shows a white flash, as seen in this GIF recording:

Peek 2021-01-30 21-54

I also tried other CSS codes similar to this one, but doesn't exhibit such behaviour.
Unfortunately I'm not expert enough about CSS an so I don't know where to check to get rid of such white flash...

I am on Firefox 85.

Border of Google account photo

Hi, sorry to bother you again...

The border or frame around my Google ID photo seems to have changed to a bright blue. I tried deleting and reapplying gmail dark modifications but it didn't solve the issue (though there was another problem with a pale font in the search box that was fixed by this)

Is there a way of changing this blue to the same colour as the main background?
image

Quoted text with dark color format cannot be seen in the reply box

The sender applied a dark color to his message, which could be seen as an email content (top image) but could not be seen when I tried to reply his message (bottom image):

screen shot 2019-02-12 at 9 10 14 pm
(I highlighted his message in the reply box in order to reveal the content.)

Is it possible to make text with dark colors readable not only in the email body but also in the reply box? Thank you.

Black text in dark reply box

Hi Jack

Please forgive me if this is the incorrect place to ask for help.

I've been using this via Stylish for a while but then realised on reading that installing the usercss allowed further tweaking. All has been great but on both installations I have an issue where the font colour in a reply is black, on an already dark background it is very hard to read. Also, tweaking the 'Dark theme in email body' option does not help.

I thought the configuration options on the usercss installation would be the answer but if it is there I can't find it!

I'm on Windows 8.1, Firefox 65.0b7 (64-bit)

Thanks for any help you can give....

Task headers and "Addn new task" are not dark

Hi,
Your dark gmail theme looks really good. The only issue I found is with the tasks side bar. Task groups and add new task input are not styled.
I tried closing/opening the tab, reloading without cache.
Here is a screenshot:
image
Interestingly enough, if Chrome looses focus, "Add a task" input turns dark. I cannot screenshot it.

Able to toggle with system color scheme?

Is it possible to use Stylus to change the Gmail color according to the system color scheme?

What I'm wanting to do is trigger dark mode automatically when my computer is set to go into dark mode system-wide (5:30 pm), but otherwise go back to the plain white theme of Google with no alterations. This is possible with Dark Reader, but I was attracted to your theme because it doesn't slow down my computer or Gmail at all.

I understand how to do this manually in several steps, namely:

To get light mode:

  1. Change Gmail theme to white
  2. Disable Stylus theme
    (and the reverse for dark mode - i.e., as you lay out in the directions)

This is tedious in itself compared to automatic switching, but I also have and regularly use 3 Gmail accounts, so this won't do. Given that Gmail itself doesn't have a timed automatic switching feature, the only way I could imagine this being possible is if Stylus had the timed feature + a theme that could enable light mode without step 1 above.

This is the first time I'm using Stylus -- I wasn't able to find anything poking around, but I figured I'd ask professionals who know what they're doing to see if Stylus can do this, or if you know of any workarounds? If this isn't possible with Stylus I may switch back to a Static version of Dark Reader or try out other extensions (just somewhat concerned about privacy, given the permissions).

I am using the latest version of Firefox on a Windows 10 computer, btw. Also, thank you so much for developing this! I'm also fairly noobish when it comes to GitHub and know almost nothing about code, so I appreciate any patience you're able to offer :)

Recommend Projects

  • React photo React

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

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

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

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo 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.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

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

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.