search

hirschan / Dark-Mode-Wikipedia

A Firefox extension, primarily suited for the English Wikipedia site.
https://addons.mozilla.org/firefox/addon/dark-mode-for-wikipedia/
MIT License
40 stars 8 forks source link

Add options for color #3

Closed Draeggon closed 2 years ago

Draeggon commented 2 years ago

I think i would be cool if there were some options (mozilla ref) to tweak the color to everyone taste, with some color html input and css variables. What do you think about it ?

And btw thank you for the wall of fame.

hirschan commented 2 years ago

That would be awesome! Unfortunately I am a bit busy these days with school. I also have issue to update the Firefox extension due to authentication blocking me - so I will have to solve that ASAP.

Draeggon commented 2 years ago

Okay in that case i will try to do a pr.

Draeggon commented 2 years ago

I can't find a good design for the options page. Maybe you have some idea ?

Here what I've got so far:

<html>
   <head>
      <meta charset="utf-8">
      <link rel="stylesheet" href="options.css">
   </head>

  <body>
      <div class="box">   
         <div class="color_container">
            <input type="color">
         </div>
      </div>
  </body>

</html>
body{
   background-color: #202023;
   color:  white;
   display:  flex;
}

.box {
  box-sizing: border-box;
}

.color_container { 
  /*evil hack from stack overflow to make the color input look like a circle
  the container is a small circle and hide all the overflow*/
  width: 32px;
  height: 32px;
  border-radius: 50px;
  overflow: hidden;
}

input[type="color"] {
  /*the input is really big and a bit translated such that the ugly part overflow the small container and is hidden*/
  border: 0;
  padding: 0;
  width: 200%;
  height: 200%;
  transform: translate(-25%, -25%)
}

I was thinking about each options to kave on one side the color selector and on the other side an example to see how it is rendered

hirschan commented 2 years ago

Interesting - let me look at it this weekend and I'll come back by then.

hirschan commented 2 years ago

What do you think of having pre-configured color themes? And if people want to create their own they can customize and save as a "template" or so?

hirschan commented 2 years ago

Created a new branch for this feature, see README for an idea of how we could implement it: https://github.com/hirschan/Dark-Mode-Wikipedia/tree/customize-colors

Draeggon commented 2 years ago

I think it would be great to have a "template" system as you stated. I will add a few things on the branch soon.

hirschan commented 2 years ago

No worries, take your time mate! Btw I have accidently locked myself out from logging in to Firefox (2fa)... So I am considering if I should upload this as a "new" extension with a new account.

hirschan commented 2 years ago

Entire UI is in place now! Great job, I added all 6 colors groups after your PR.

Draeggon commented 2 years ago

@hirschan have you been able to log back in ?

hirschan commented 2 years ago

Unfortunately my older acc is locked out. I have created a new one, see the README-file.

hirschan commented 2 years ago

Speaking of something else - @Draeggon I managed to restore my old account. I will upload all updates on the original Dark Mode Wiki on Firefox. See the README.

Draeggon commented 2 years ago

Nice

hirschan commented 2 years ago

Hi @Draeggon, still game on trying to fix this together? :)