Giter Club home page Giter Club logo

stylus-dark's Introduction

Install with userstyles.org Install directly with Stylus

Stylus-Dark

A dark theme designed for Stylus.

This dark theme is specifically designed to match the dark mode used by Firefox's inspector and browser toolbox. Additionally, it is meant to compliment ShadowFox - a universal dark theme for Firefox.

Installation

This theme can be installed directly from github: Link.

This theme is also hosted on userstyles.org: Link.

Sample Screenshots

1

stylus-dark's People

Contributors

franklinyu avatar jccrofty30 avatar overdodactyl avatar podesta avatar vchet 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  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

stylus-dark's Issues

Doesn't activate in Firefox (57.0.4)

Stylus doesn't seem to activate the theme, even though it should match the url. I've tried other stylish editor themes as well, but since they were built for Chrome I wasn't sure what URL it filters extensions on firefox. This, however, seems to have support, but it doesn't work regardless :/

Any ideas?

Versioning

For now, package.json and stylus-dark.user.css have different versions.

@version 1.3.0
"version": "1.0.0",

It may be quite monotonous to change it in both files on every update. So I suggest using ver and gulp tasks. With single command you could change the version in both files, commit changes and create a git tag.
Example

If you're okay with this, I could make a pull request.

Customize Colors

Can you add the ability to customize the background colors? I have no issues doing it myself but it would be nice to be able to have UserCSS options so that I can update without losing my customization. Below are the classes that I've edited the color (they're all background colors):

/*ADDED CODE*/

#header, body, input[type=checkbox]:not(.slider), .firefox select, input:not(.slider), .newUI .entry, .CodeMirror, .CodeMirror-gutters{
    background: #333333 !important;
}

UserCSS Effects Websites

I'm not sure why this is, but if I install this as a UserCSS through Stylus in Firefox 65.0, it styles portions of various websites. I tried editing the regexp to be specific to my Stylus extension, but then it just fails to style anything. I'm not sure why this is happening. Could this be caused by using ShadowFox?

Backup buttons background isn't dark

Fixed on my extension, attached the edited version.

`/* Fixing backup buttons background w/wo hover */

#backup-buttons .dropdown-content {
background-color: #0e0e0e;
}
#backup-buttons .dropdown-content a:hover {
background-color: #201e1e;
}`

<select> text is still black

Default style of Stylish seems to treat select differently, so #header select doesn’t simply inherit from #header. Simply

select {
    color: silver;
}

works.

Options in Stylus mostly unaffected by this userstyle

When opening the options in Stylus with this userstyle enabled, only these items have this userstyle's dark theme applied:

  • Color pickers (e.g. pickers beside "Background color" and "Background color when disabled")
  • Number pickers (e.g. picker beside "Popup width (in pixels)")
  • Buttons (e.g. buttons like "Reset options" and "Back to manage")

Pop up inline search result

From the pop up window (when clicking on the stylus icon) the result 'cards' in Find Styles are hard to read, it would be nice to have :

.search-result {
    background: #353b48!important;
}

or equivalent.

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.