VFDan / Scratch-Dark-Theme

A Dark Theme For Scratch
5 stars 0 forks source link

Styling is Inefficient #12

Open MiniCoder11 opened 4 years ago

MiniCoder11 commented 4 years ago

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.

VFDan commented 4 years ago

IMO we shouldn't minify at the end, as people will want to know that it is just doing a dark theme and not logging their password.

MiniCoder11 commented 4 years ago

IMO we shouldn't minify at the end, as people will want to know that it is just doing a dark theme and not logging their password.

My thoughts exactly. That's the same reason why the userscript disables itself on account pages where sensitive information could be entered or viewed.

Griffpatch's messaging extension has just been updated (They beat me to it. I was working on my ScratchTools project with the same goal). They have three dark themes but none of them (In my opinion) are as complete or aesthetically pleasing as ours. Should I include this stylesheet in my extension? Should we submit it to Scratch Add-ons? What is our next course of action?

VFDan commented 4 years ago

I say add it to both, as it's open source and it's not competitive :)

MiniCoder11 commented 4 years ago

I say add it to both, as it's open source and it's not competitive :)

Sounds great! 😄

MiniCoder11 commented 4 years ago

I'm just not going to be able to press the comment button to submit the link to them until I've organized the code! 😆

MiniCoder11 commented 3 years ago

@VFDan I've completely revamped the entire dark theme and managed to remove 155 lines. I also fixed many things I've overlooked in this version. So far, the user script only really "works" on the explore, home, project, and editor pages but I am patching in more styles. The userscript also grabs the VM and enables 60FPS mode for projects as well as adding a feature where you can create a variable with the name "lastKeyPressed" and it will be automatically updated with the last key you press (including shift, escape, backspace, etc.)

Userscript repository: https://github.com/MiniCoder11/ScratchMod Keypress test project: https://scratch.mit.edu/projects/452975589/

VFDan commented 3 years ago

@MiniCoder11 Nice! World_Languages said in Discord DMs that the only way our dark theme will be added will be if we split it into an editor version and website version as the way Scratch Addons applies dark themes is by adding CSS not JS.

VFDan commented 3 years ago

However, you should isolate the dark theme from your code and push here as this is supposed to be a dark theme and nothing else.

MiniCoder11 commented 3 years ago

@VFDan I know that this is only supposed to be a dark theme which is why I didn't push it to this repository. Eventually, I plan to revise my browser extension to be compatible with ScratchAddons extensions but as of now I'm just working on aesthetic features in a temporary userscript. As for the ScratchAddons theme, we can easily convert it from JS to CSS by removing the GM_addStyle functions and running the rest through a CSS beautifier to get proper spacing/indentation. Unless you suggest otherwise, I was not planning on adding my recent changes to our userscript because I was not sure if you would like the color styles.

VFDan commented 3 years ago

Oh, I wasn't aware that you changed the colors. The thing with for a ScratchAddons theme is we have to split it into an editor version and a website version to be CSS only, as we refresh the style when doing an editor page.

MiniCoder11 commented 3 years ago

Luckily, seperation should be fairly simple. All we have to do is grab the CSS from the editor section of the if statement and the CSS from the main section.

VFDan commented 3 years ago

Yep