Git Product home page Git Product logo

scratch-dark-theme's Introduction

Scratch-Dark-Theme

Scratch Dark Theme gives the Scratch 3.0 user interface a refresh with a dark theme and new modern look.

This is automatically turned off on private pages such as the account creation page and the account management page for added peace of mind. This also applies the new 3.0 style to the navigation bar on all pages.

Check out the Compatibility List to see what this extension currently supports.

How to use:

  1. Install the Tampermonkey extension (this also works with Greasemonkey, but support is not guaranteed).
  2. Go to https://github.com/VFDan/Scratch-Dark-Theme/raw/master/Scratch%20Dark%20Mode.user.js.
  3. Click Install.
  4. Use Scratch in Dark Mode!

Credits:

Thanks to Scratch user 44D3A7HQ for the addGlobalStyle function and inspiration for the color scheme. They are not a member of the official development team but their work is greatly appreciated.

scratch-dark-theme's People

Contributors

minicoder11 avatar vfdan avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar

scratch-dark-theme's Issues

Styles Only Apply on Reload

So, we are now facing quite a large issue. Tampermonkey only applies styles when the page is reloaded, this means that the styles that don't apply unless the project is loaded into the editor will never appear when you click the "See inside" button unless you reload the page in the editor.

How should we go about fixing this? We could manually attach a onclick="" event to the "See inside" button to reload the page?

Let me hear your thoughts.

Affected version(s): All

About Scratch, For Parents, and For Educators have improper styling

The tabs mentioned in the title are directly accessible from the homepage but text in <h1>, <h2>, and <p> tags don't have class names and cannot be addressed for applying styles. The text is not sufficiently visible.

Re-tagging of all affected elements could provide a solution?

Dropdown menu refusing styling

When in the messages tab, the appropriate dark-mode color, #19283c, doesn't apply itself to the top right side drop-down menu despite proper syntax suggesting it would do so.

Affected version: 0.4+

Styling is Inefficient

Although our current method definitely works, it is inefficient and messy. In addition, it uses several hundred lines of JavaScript even though we could certainly shorten it to less (probably even 150 or fewer). I'm going to take some time to setup CSS variables and universal styling and algorithmically apply it to pages so that the theme should (theoretically) work anywhere on Scratch and it also should be more compact and consistant.

My only question: Should we minify the JavaScript at the end? It would save a bit of filesize but also make the code harder to read and may discourage some users who want to read it to verify it is safe to use.

Forums

So the forums look terrible...
image

Clashes with MxMouse's Stylesheet

Hey, could you make a version of this that only changes the colors? I use mxmouse's stylesheet, and I love the colors you choose, but I can't have both.

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.