Giter VIP home page Giter VIP logo

jiradarktheme's Introduction

Jira Dark Theme

Jira Dark Theme Userstyle

(Other people might call this: Dark mode, Night mode, Night theme, Eye care).

Install directly with Stylus

Installation instructions

  1. Install Stylus for Firefox, Chrome, Opera or Cascadea for Safari.
  2. Click here Install directly with Stylus

Why?

I believe that we should be able to change any background we want from any website we want. I consider night mode a fundamental feature that should be provided because it reduces eyestrain and user fatigue.

Preview

Preview of Jira Dark Gray

Issue view image

Thank you for the โญs

Other styles

--

JiraDarkTheme is not associated in any manner with the Jira brand, nor this is an official project or have any relation other than this being a stylesheet for that software.

jiradarktheme's People

Contributors

aalvarado avatar brianbeergod avatar dkniffin avatar morasta avatar siansiansu avatar teorikdeli 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  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  avatar  avatar

jiradarktheme's Issues

Rewrite with Preprocessor and CSS variables

Current Css is not well written since it has no real structure, Jira doesn't always label things to target via an html attribute and other difficulties when all you have are positional or obfuscated class names that might change later.

The positional approach is a bit better and if I could target these selectors with a preprocessor variables, currently, you're unable to use CSS variables for selectors.

Archiving repository

I started trying out DarkReader and seems to do a better job rotating colors on all pages, not just the ones specified in this style.

This is in contrast of how I usually work with stylus. The lack of a clear semantic html structure in modern web apps prevents people from targeting certain elements and restyling them. Since most of the React apps use generated clases, this becomes impossible to maintain.

In short, this style is incomplete in different places, Dark Reader does a better job which I've switched to and been using for several days now

White background on Project Board

image

There are some missing DIV that need the dark theme. E.g. ReactVirtualized__Grid__innerScrollContainer

<div class="ReactVirtualized__Grid__innerScrollContainer" role="rowgroup" style="width: auto; height: 40px; max-width: 260px; max-height: unset; overflow: visible; position: relative; will-change: initial; background-color: rgb(244, 245, 247); transition: height 0.2s ease 0s; min-height: 100%;"><div style="height: 40px; left: 0px; position: absolute; top: 0px; width: 100%;"><div class="sc-fyjhYU dKFiUS"><div class="sc-fgfRvd bZIiNK"><div class="sc-hIVACf eGfSJn"><button class="css-jr8afv" data-testid="platform-inline-card-create.ui.trigger.visible.button" type="button" tabindex="0"><span class="css-1ujqpe8"><span class="sc-iAyFgw ghHVIH" role="presentation"><svg width="24" height="24" viewBox="0 0 24 24" focusable="false" role="presentation"><path d="M13 11V3.993A.997.997 0 0 0 12 3c-.556 0-1 .445-1 .993V11H3.993A.997.997 0 0 0 3 12c0 .557.445 1 .993 1H11v7.007c0 .548.448.993 1 .993.556 0 1-.445 1-.993V13h7.007A.997.997 0 0 0 21 12c0-.556-.445-1-.993-1H13z" fill="currentColor" fill-rule="evenodd"></path></svg></span></span><span class="css-19r5em7"><div class="sc-kQsIoO yFqwh">Create issue</div></span></button></div></div></div></div></div>

Be able to pass a custom url through a param to the style

There's some people who are running on a different URL than the one targeted here and forks with just this change are popping up.
The extension can pass parameters from the theme configuration. Possible use this to build custom urls in the moz section

Epic labels aren't showing up with gray bg in backlog view

I noticed before I put this fix in that I couldn't see my labels due to a z-index issue. Adding this fixed it on mine, but I wanted to put it in here as an issue to have someone else test it before submitting it.

.zd1ddu-13 { z-index: 2; }

Before:
before z-index

After:

after z-index

Not sure if you want me to submit a PR first, then test it, or if you want to test it before. Let me know!

Restyle pills/tags

Tag pills for issues are hard to see and have their styles changed. They should probably be unstyled.

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.