raitaroh / stylus-deepdark Goto Github PK

View Code? Open in Web Editor NEW

45.0 7.0 7.0 54.24 MB

Write thy themes in the dark. May the dark be kinder on thine eyes. (Stylus dark theme)

License: GNU General Public License v3.0

CSS 97.14% JavaScript 2.86%

stylus stylus-dark-theme dark-theme theme deepdark breeze breeze-dark breeze-dark-theme arc-theme arc-dark-theme

stylus-deepdark's Introduction

Stylus-DeepDark

Write thy themes in the dark. May the dark be kinder on thine eyes. (Stylus dark theme)

About

This is a dark theme for Stylus inspired by FT DeepDark, now defunct theme for Firefox.

Credit for some of the the color palettes in use. (@KDE, @horst3180, @linuxmint, Firefox, YouTube and Discord)

Installing

Using a browser extension:

Stylus - get the addon for Firefox, Chrome and Opera.
This is only available using Stylus (see the documentation).
Also see the documentation for information about customizing the theme. 🎉

NOTE: This CAN work with Stylish in Google Chrome, BUT I don't support Stylish.

You can also install all my themes at once from here.

Screenshots

Development Scripts

Install node.js (if not installed already) and run npm install to install dependencies.

npm run major: Creates a semantic major release + tags and signs commit if setup.
npm run minor: Creates a semantic minor release + tags and signs commit if setup.
npm run patch: Creates a semantic patch release + tags and signs commit if setup.

Note: Releases are created internally, when submitting a PR do not include any.

npm run update: Update development dependencies.
npm run lintfix: Runs Stylelint with --fix switch on the StylusDeepDark.user.css file.

Contributors ✨

Thanks goes to these wonderful people (emoji key):

_{RaitaroHikami}
🐛 💻 🎨 📖 🤔 🚧

_the-j0k3r
🐛 💻 🎨 🤔 🚧 📖

_{Rob Garrison}
🐛 💻 🎨

_{All Contributors}
🎨 📖

This project follows the all-contributors specification. Contributions of any kind welcome!

stylus-deepdark's People

Contributors

Stargazers

Watchers

Forkers

deepaqua mechalynx syxo fademind hetdaftary datygra totalcaesar659

stylus-deepdark's Issues

Disabled styles in popup

First off the disabled styles in the popup are now too dim (from ef8c77e).
Second, if I'm using the tab key inside the popup, the style doesn't brighten as it does while hovering over the entry with a mouse.

This can be solved by using the :focus-within selector.

#installed .entry.disabled:focus-within .style-name {
  color: var(--main-text) !important;
}

Thirdly, hovering over the controls of a disabled entry should also brighten the disabled entry name.

Background color of the toogle (it is called `Checkbox` in the Stylus wiki?)

Why the background color of the toogle (it is called Checkbox in the Stylus wiki?) in UserCSS options is the color of hover background? It looks strange. Is it a bug? Or an issue of Stylus?

Request: AdaptaNoktoBreath Colours

Hey! This may look familiar, since I posted the same thing to your Userstyles GitHub, but I'd also like to request the AdaptaNoktoBreath Colours for this one, too. Same as before, I already wrote the preset for easy integration.

/*AdaptaNoktoBreath Colours*/
                --main-color: #1abc9c;
		--main-background: #222d32;
		--second-background: #263238;
		--hover-background: #2a353b;
		--main-text: #ffffff;
		--dimmer-text: #9b9b9b;
		--editor-background: #262d31;
		/*Selection/current line background*/
		--select-background: #1b2428;

		/*CodeMirror font size*/
		--font-size: 14px;
		/*Cursor width and color*/
		--cursor-width: 1px;
		--cursor-color: #1abc9c;

		/*These are must have static colors*/
		/*Disable all color/warning Breeze Dark*/
		--warning-disable-all: #e14245;
		/*No match regex color from Breeze Dark*/
		--no-match: #f6ab32;
		/*Shadow*/
		--shadow: 0 1px 0.5px rgba(0, 0, 0, 0.13);
		/*Odd entry background*/
		--odd-entry-background: rgba(0, 0, 0, .16);

google chrome + stylus popup white top + bottom border

Ok so at 1.3.8 with stylus 1.4.5 and Google Chrome 66 there is this.

Im leaving it for now just making a record of issue, if you know a fix it will be appreciated.

Goodnight.

<body id="stylus-popup" style="width: 246px;">

  <div id="confirm">
    <div>
      <b>Style's Name</b>
      <span>Are you sure you want to delete this style?</span>
      <div>
        <button data-cmd="ok">Delete</button>
        <button data-cmd="cancel">Cancel</button>
      </div>
    </div>
  </div>

  <div id="installed">
    <aside id="hotkey-info" title="Click to see available hotkeys"></aside>
  <div class="entry enabled" style-id="2" id="style-2"><div class="main-controls"><label class="style-name" for="style-2"><input class="checker" type="checkbox" id="style-2"><svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"></use></svg>Stylus DeepDark</label></div><div class="actions"><a href="#" class="enable" tabindex="0">Enable</a><a href="#" class="disable" tabindex="0">Disable</a><a href="#" class="configure" tabindex="0" title="Configure"><svg class="svg-icon config"><use xlink:href="#svg-icon-config"></use></svg></a><a class="style-edit-link" href="edit.html?id=2" tabindex="0" title="Edit"><svg class="svg-icon edit" viewBox="0 0 14 16"><path fill-rule="evenodd" d="M0 12v3h3l8-8-3-3-8 8zm3 2H1v-2h1v1h1v1zm10.3-9.3L12 6 9 3l1.3-1.3a.996.996 0 0 1 1.41 0l1.59 1.59c.39.39.39 1.02 0 1.41z"></path></svg></a><a href="#" class="delete" tabindex="0" title="Delete"><svg class="svg-icon remove" viewBox="0 0 14 16"><path fill-rule="evenodd" d="M11 2H9c0-.55-.45-1-1-1H5c-.55 0-1 .45-1 1H2c-.55 0-1 .45-1 1v1c0 .55.45 1 1 1v9c0 .55.45 1 1 1h7c.55 0 1-.45 1-1V5c.55 0 1-.45 1-1V3c0-.55-.45-1-1-1zm-1 12H3V5h1v8h1V5h1v8h1V5h1v8h1V5h1v9zm1-10H2V3h9v1z"></path></svg></a></div></div></div>

  <div class="actions">
    <div id="disable-all-wrapper">
      <div class="main-controls">
        <label id="disableAll-label">Turn all styles off
          <input id="disableAll" type="checkbox">
          <svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"></use></svg>
        </label>
      </div>
    </div>
    <div class="main-controls">
      <div id="find-styles">
        <a id="find-styles-link" title="Find more styles for this site" href="https://userstyles.org/styles/browse/?search_terms=Stylus">Find styles</a>
        <span id="find-styles-inline-group">
          <label title="Display search results inside this window.">
            <input id="popup.findStylesInline" class="checker" type="checkbox">
            <svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"></use></svg>
            <span>Inline</span>
          </label>
        </span>
      </div>
      <div id="write-style">
        <span id="write-style-for">Write style for: </span>
      <span id="match"><span class="breadcrumbs"><a class="write-style-link" href="edit.html?domain=clngdbkpkpeebahjckkjfobafhncgmne" title="domain(&quot;clngdbkpkpeebahjckkjfobafhncgmne&quot;)" subdomain="">clngdbkpkpeebahjckkjfobafhncgmne</a><a class="write-style-link" href="edit.html?url-prefix=chrome-extension%3A%2F%2Fclngdbkpkpeebahjckkjfobafhncgmne%2Fedit.html%3Fid%3D2" title="url-prefix(&quot;chrome-extension://clngdbkpkpeebahjckkjfobafhncgmne/edit.html?id=2&quot;)">this&nbsp;URL</a></span></span></div>
    </div>

    <!-- Actions -->
    <div id="popup-options">
      <button id="popup-manage-button" data-href="manage.html" title="Shift-click or right-click opens manager with styles applicable for current site">Manage</button>
      <button id="popup-options-button">Options</button>
      <button id="popup-shortcuts-button" class="chromium-only" title="Define keyboard shortcuts" data-href="chrome://extensions/configureCommands">Shortcuts</button>
    </div>
  </div>

  <div id="search-results-error" class="hidden"></div>
  <div id="search-results" class="hidden">
    <div class="search-results-nav" data-type="top"></div>
    <div id="search-results-list"></div>
    <div class="search-results-nav" data-type="bottom"></div>
  </div>

  <svg xmlns="http://www.w3.org/2000/svg" style="display: none !important;">
    <symbol id="svg-icon-checked" viewBox="0 0 1000 1000">
      <path fill-rule="evenodd" d="M983.2,184.3L853,69.8c-4-3.5-9.3-5.3-14.5-5c-5.3,0.4-10.3,2.8-13.8,6.8L352.3,609.2L184.4,386.9c-3.2-4.2-8-7-13.2-7.8c-5.3-0.8-10.6,0.6-14.9,3.9L18,487.5c-8.8,6.7-10.6,19.3-3.9,28.1L325,927.2c3.6,4.8,9.3,7.7,15.3,8c0.2,0,0.5,0,0.7,0c5.8,0,11.3-2.5,15.1-6.8L985,212.6C992.3,204.3,991.5,191.6,983.2,184.3z"></path>
    </symbol>

    <symbol id="svg-icon-select-arrow" viewBox="0 0 1792 1792">
      <path fill-rule="evenodd" d="M1408 704q0 26-19 45l-448 448q-19 19-45 19t-45-19l-448-448q-19-19-19-45t19-45 45-19h896q26 0 45 19t19 45z"></path>
    </symbol>

    <symbol id="svg-icon-config" viewBox="0 0 14 14">
      <path d="M6.2,0C5.8,0,5.4,0.4,5.4,0.8v0.7C5,1.7,4.6,1.8,4.3,2L3.8,1.5C3.6,1.4,3.4,1.3,3.2,1.3S2.7,1.4,2.6,1.5L1.5,2.6c-0.3,0.3-0.3,0.9,0,1.2L2,4.3C1.8,4.6,1.7,5,1.5,5.4H0.8C0.4,5.4,0,5.8,0,6.2v1.5c0,0.5,0.4,0.8,0.8,0.8h0.7C1.7,9,1.8,9.4,2,9.7l-0.5,0.5c-0.3,0.3-0.3,0.8,0,1.2l1.1,1.1c0.3,0.3,0.9,0.3,1.2,0L4.3,12c0.4,0.2,0.8,0.4,1.2,0.5v0.7c0,0.5,0.4,0.8,0.8,0.8h1.5c0.5,0,0.8-0.4,0.8-0.8v-0.7C9,12.3,9.4,12.2,9.7,12l0.5,0.5c0.3,0.3,0.9,0.3,1.2,0l1.1-1.1c0.3-0.3,0.3-0.8,0-1.2L12,9.7c0.2-0.4,0.4-0.8,0.5-1.2h0.7c0.5,0,0.8-0.4,0.8-0.8V6.2c0-0.5-0.4-0.8-0.8-0.8h-0.7C12.3,5,12.2,4.6,12,4.3l0.5-0.5c0.3-0.3,0.3-0.9,0-1.2l-1.1-1.1c-0.2-0.2-0.4-0.2-0.6-0.2s-0.4,0.1-0.6,0.2L9.7,2C9.4,1.8,9,1.7,8.6,1.5V0.8C8.6,0.4,8.2,0,7.8,0L6.2,0z M6.8,0.8h0.4c0.2,0,0.4,0.2,0.4,0.4v1.2c0.8,0.1,1.6,0.4,2.3,0.9l0.8-0.8c0.2-0.2,0.4-0.2,0.6,0l0.3,0.3c0.2,0.2,0.2,0.4,0,0.6l-0.8,0.8c0.5,0.7,0.8,1.4,0.9,2.3h1.2c0.2,0,0.4,0.2,0.4,0.4v0.4c0,0.2-0.2,0.4-0.4,0.4h-1.2c-0.1,0.8-0.4,1.6-0.9,2.3l0.8,0.8c0.2,0.2,0.2,0.4,0,0.6l-0.3,0.3c-0.2,0.2-0.4,0.2-0.6,0l-0.8-0.8c-0.7,0.5-1.4,0.8-2.3,0.9v1.2c0,0.2-0.2,0.4-0.4,0.4H6.8c-0.2,0-0.4-0.2-0.4-0.4v-1.2c-0.8-0.1-1.6-0.4-2.3-0.9l-0.8,0.8c-0.2,0.2-0.4,0.2-0.6,0l-0.3-0.3c-0.2-0.2-0.2-0.4,0-0.6l0.8-0.8C2.8,9.2,2.5,8.4,2.4,7.6H1.2C1,7.6,0.8,7.4,0.8,7.2V6.8c0-0.2,0.2-0.4,0.4-0.4h1.2c0.1-0.8,0.4-1.6,0.9-2.3L2.5,3.3c-0.2-0.2-0.2-0.4,0-0.6l0.3-0.3c0.2-0.2,0.4-0.2,0.6,0l0.8,0.8c0.7-0.5,1.4-0.8,2.3-0.9V1.2C6.4,1,6.6,0.8,6.8,0.8L6.8,0.8z M7,3.6C5.1,3.6,3.6,5.1,3.6,7c0,0,0,0,0,0c0,1.9,1.5,3.4,3.4,3.4c1.9,0,3.4-1.5,3.4-3.4C10.4,5.1,8.9,3.6,7,3.6C7,3.6,7,3.6,7,3.6z M7,4.8c1.2,0,2.2,1,2.2,2.2c0,1.2-1,2.2-2.2,2.2c-1.2,0-2.2-1-2.2-2.2C4.8,5.8,5.8,4.8,7,4.8z"></path>
    </symbol>

    <symbol id="svg-icon-config-uso" viewBox="0 0 14 14">
      <path d="M2,3h4v2H4v6h6V9h2v4H2V3z M8,1h6v6l-2.2-2.2l-4,4L6.2,7.2l4-4L8,1z"></path>
    </symbol>

    <symbol id="svg-icon-help" viewBox="0 0 14 16">
      <title>Help</title>
      <path fill-rule="evenodd" d="M6.3 5.69a.942.942 0 0 1-.28-.7c0-.28.09-.52.28-.7.19-.18.42-.28.7-.28.28 0 .52.09.7.28.18.19.28.42.28.7 0 .28-.09.52-.28.7a1 1 0 0 1-.7.3c-.28 0-.52-.11-.7-.3zM8 7.99c-.02-.25-.11-.48-.31-.69-.2-.19-.42-.3-.69-.31H6c-.27.02-.48.13-.69.31-.2.2-.3.44-.31.69h1v3c.02.27.11.5.31.69.2.2.42.31.69.31h1c.27 0 .48-.11.69-.31.2-.19.3-.42.31-.69H8V7.98v.01zM7 2.3c-3.14 0-5.7 2.54-5.7 5.68 0 3.14 2.56 5.7 5.7 5.7s5.7-2.55 5.7-5.7c0-3.15-2.56-5.69-5.7-5.69v.01zM7 .98c3.86 0 7 3.14 7 7s-3.14 7-7 7-7-3.12-7-7 3.14-7 7-7z"></path>
    </symbol>
  </svg>
</body>

Inverted color swatches

Awesome style!

With the addition of the colorpicker in the latest version, I've found the following definition inverts the swatch when a keyword is used:

.cm-s-default span.cm-link, .cm-s-default span.cm-keyword {
  color: var(--main-color);
  filter: invert(100%);
}

The screenshot is from using this css:

@-moz-document domain("example.com") {
    body {
      color: red;
      background-color: white;
      border-color: orange;
    }
}

Almost unreadable white text on blue background with `Autocomplete on typing` enabled

I've noticed with Stylus 1.5.17 beta/stable with Chrome 90/Firefox 88,
that after enabling the Autocomplete on typing setting in the Stylus editor,
the autocompleted text is almost unreadable, having white text on blue background, the same as without the userstyle.
Here is a comparison:

#test {
    disp

}

Thank you

More editor font size options

It's better if the range didn't start from 14px. I use 12px so had to edit the style. Just throwing it out there.

stylus-deepdark issues with non-styled codemirror background

This is a head scratcher, I noticed this when writing styles in Stylus-DeepDark and this one of the reasons why I reverted f9d5afc

The issue is exposed in two distinct ways.

Writing a new style

You can see that the Codemirror background is initially LIGHTER this is wack probably even my fault but wack none-the-less

When enabling

	.cm-searching:after
	{
		content: "" !important;
		height: 1px !important;
		background: var(--main-color) !important;
		position: absolute !important;
		width: 100% !important;
		margin-top: 17px!important;
	}

First IDK where the horizontal scrollbar is coming from by enabling the CSS above. Its dumb, there's no code going that far into right anywhere in this style since 0c3b94f

But here it is again

Ill try and see if I can fix this but the horizontal scrollbar is killing me also.

Stylus failed to parse usercss:
443:2 Expected }

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.