sergiokas / Extensity

Quickly enable/disable Google Chrome extensions
http://sergiokas.github.com/Extensity
Other
390 stars 83 forks source link

[Feature Request] Dark Mode #78

Open misspent opened 1 year ago

misspent commented 1 year ago

Dark mode option in the settings would be nice.

Example - Coloured icons is personal preference, I did this because I'm a freak :) Dark Mode

CSS Code that made the example above possible
```css * { /* Makes everything sqaure */ border-radius: 0px !important; } body { background-color: #151515 !important; } /* Search input text colour */ section#search input { color: #ccc !important; } /* Switch icon at the top */ .fa-toggle-on:before { color: crimson !important; /* Makes it green because of the invert(1) */ } .fa-toggle-off:before { color: cyan !important; } /* Header */ section#header a#title { color: #4a74b5; } section#header { vertical-align: middle !important; margin-top: -5px !important; margin-bottom: 3px !important; background: #202020 !important; } section#header a.page[href="options.html"], section#header a.page[href="profiles.html"], section#header a.page[href="chrome://extensions"], section#header a.switch { filter: invert(1) !important; } .fa-twitter:before { filter: brightness(1.1) !important; } .fa-facebook-official:before { filter: brightness(1.5) !important; } section#content h1 { /* Extensions "group" colour (I think) */ background-color: #4d668b !important; background-image: -webkit-linear-gradient(top,#4d668b,#2b3e5c) !important; } /* Main section */ section#content ul li { color: #ccc !important; padding: 3px 2px !important; cursor: pointer !important; } section#content ul li:hover { color: cornflowerblue !important; text-shadow: none !important; background-color: #252525 !important; box-shadow: none !important; } section#content li.disabled { background-color: #410d0d !important; color: #ccc !important; opacity: .7 !important; } section#content li.disabled:hover { background-color: #410d0d !important; } /* Settings icons to the right of extension */ .fa-gear:before { color: #d67a0a; } ```
ryanwwest commented 1 year ago

I want this too but the CSS is cool. How did you get the CSS code to apply to the extension? Is it a customizable setting within Extensity or some way to add CSS (and maybe HTML/JS) on top of an extension?

misspent commented 1 year ago

I want this too but the CSS is cool. How did you get the CSS code to apply to the extension? Is it a customizable setting within Extensity or some way to add CSS (and maybe HTML/JS) on top of an extension?

I downloaded the code from here, extracted it, opened the index.css file (example: Downloads\Extensity\styles (file is located in styles folder), made the code I posted above (all you'll have to do it paste it in) and went to extensions settings in my browser, activated dev tools, so I could import unpacked extension/folders, deleted the one I downloaded from chrome store and poof it went dark.

I doubt it'll auto-update like this, as I've not read anything hinting towards auto-updates when you “upload it” into your browser yourself. However, I doubt it'll break anytime soon + given the fact that it's open source, updating it yourself will be easy.

Axer128 commented 1 year ago

+1 . One of the few extensions i use often that still blinds me in the options screen.

Annoying google doesn't allow those to be styled with something like dark reader, so yea the author has to implement the option.

ylluminate commented 7 months ago

Looks like someone started a fork that kinda petered out: https://github.com/diluteoxygen/Rextensity

It would be awesome to see a fork of this project (or this one) that could keep this kind of effort going and up-to-date.

I have to think that there's just no benefits in the Chrome extension ecosystem to see so many wonderful extensions just essentially die or languish.

sergiokas commented 1 month ago

If anyone can create a PR with a dark mode option I'll merge and publish it.

Requirements: