Add dark mode to vitalik.ca about skunkworks HOT 15 CLOSED

thanks @drewcook for the great work on this! vitalik paid out off-platform so im closing this out here.

from skunkworks.

@owocki Wow, what an honor to be chosen to contribute in this manner! Thank you for the consideration!

I will be spending this weekend looking into the blog repositories and going over in detail how things are set up within them.

My initial thought is to use CSS variables with a toggle switch to map the CSS variable to their respective value sets. There will be one set for the original values in light mode and a different set for dark mode. The native HTML elements will inherit these CSS variables rather than the original hardcoded values.

This acts as non-intrusive way of overriding the styles with the flip of switch, and it should result in minimal interference with other aspects of the codebase. The toggle switch will likely be located in either the top right or top left corner of the page, but I'm open to suggestions here on visual styles/placement from Vitalik. The idea is to keep it simple and out of the way.

Here's a quick codepen highlighting the underlying methodology. The values used here are arbitrary, and the button/JS is rudimentary just to convey the PoC. However, the final deliverable will be very similar. https://codepen.io/drewcook/pen/XWENzjx

One further enhancement to this is going to be remembering what the user's choice for light/dark mode is, so that it is persisted over their session and remembered when they revisit. I'll implement this by storing a value in localStorage, similar to how we do for preferred wallet selections in dApps.

I'll post back with more details after vetting the codebase.

from skunkworks.

Issue Status: 1. Open 2. Started 3. Submitted 4. Done

This issue now has a funding of 1.0 ETH (1083.66 USD @ $1083.66/ETH) attached to it.

• If you would like to work on this issue you can 'start work' on the Gitcoin Issue Details page.
• Want to chip in? Add your own contribution here.
• Questions? Checkout Gitcoin Help or the Gitcoin's Discord
• $1,003,234,750.38 more funded OSS Work available on the Gitcoin Issue Explorer

from skunkworks.

Thanks

from skunkworks.

Issue Status: 1. Open 2. Started 3. Submitted 4. Done

Workers have applied to start work.

These users each claimed they can complete the work by 1 day, 2 hours from now.
Please review their action plans below:

1) l2ig has applied to start work (Funders only: approve worker | reject worker).

Add dark mode with the least amount of additions
2) codedbyjordan has applied to start work (Funders only: approve worker | reject worker).

• Is there a specific color palette? If not, I will find one
• Should there be a button toggle, or is it solely based on system preference?
• I will implement dark mode using CSS, then go through each image to make sure they look good, making changes along the way if needed.
  3) lychees has applied to start work (Funders only: approve worker | reject worker).

I am a long term blog writter and familiar with various blog framwork and plugin including hexo, wordpress, etcs. And recently added a dark mode to w3itch.io. I am also a subscriber to vitalik's blog and this will ensure that the final layout can be read comfortably in dark mode as well as aligh with current css style.
4) vivaco2 has applied to start work (Funders only: approve worker | reject worker).

Thanks for the opportunity.i want this eth very much.
5) ronm has applied to start work (Funders only: approve worker | reject worker).

Leveraging prefers-color-scheme media detection is CSS and through the use of a few CSS custom properties this can be achieved very straight forward with minimal additions to existing codebase.
6) unreleased has applied to start work (Funders only: approve worker | reject worker).

Work Plan

Would be really cool to say I did some work for Vitalik!

Could do this with beautiful code in less than 2 hours with a toggle. 10yr web experience

Twitter: @unreleased
Email: [email protected]

Some Work:
https://rapidtags.io/
https://notify.express/
new rapidtags (unreleased): https://twitter.com/RapidTagsIO/status/1446815108261371904
7) othernamesweretaken has applied to start work (Funders only: approve worker | reject worker).

I can deliver extremely fast. I have worked with JS and CSS
8) twirlingtechgoddess has applied to start work (Funders only: approve worker | reject worker).

Contribute a small addition to the single python file in blogmaker, while maintaining the simplicity of the project structure.

Make sure all the images on vitalik.ca posts look good in dark mode. If they do not, make some edit so they do.
9) daslanis has applied to start work (Funders only: approve worker | reject worker).

Change the background to dark grey, add a button for on-off and fix the image border or background accordingly!
10) xyingsoft has applied to start work (Funders only: approve worker | reject worker).

I am interested on this simple task.
11) 0xcadams has applied to start work (Funders only: approve worker | reject worker).

Past Frontend Work:

• Proof of Residency (https://proofofresidency.xyz)
• Livepeer's Explorer (https://explorer.livepeer.org)
• Personal site (https://cadams.eth.link)

I've worked with a lot of CSS, mostly using frameworks like React w/ Tailwind and CSS-in-JS libraries. I'm very comfortable with HTML/CSS under the hood.

See more here (https://github.com/0xcadams).
12) racherin has applied to start work (Funders only: approve worker | reject worker).

I'll add a simple switch button at the top. After that, I will implement the dark mode by paying attention to the texts and other color changes in the blog posts and main page.
13) reuixiy has applied to start work (Funders only: approve worker | reject worker).

Steps:

1. Go through colors and change them to CSS variable then use media query to match system preference
2. Add a toggle?
3. Go through all the images
   One of my projects: https://github.com/reuixiy/hugo-theme-meme
   14) wottpal has applied to start work (Funders only: approve worker | reject worker).

• fork the repo, inspect the current state and set up development environment
• develop a dark color palette
• implement the color-switcher (probably via a css-variable but this has been determined)
• fine-tune some elements that do not work in the new dark environment

i have several years of professional frontend experience, e.g. i just recently did stablecoins.wtf (which is a very dark experience).
15) nicoland00 has applied to start work (Funders only: approve worker | reject worker).

Add a button with javascript which will function as a switch in the css of vitalik.ca.
I would add new darker colors to the background making it darker blue where its white and white/light grey where its dark (letters), even giving it a little orange in the dates.
16) gitcoincode has applied to start work (Funders only: approve worker | reject worker).

Easy-pesy, let me do it for you
17) robbelouwet has applied to start work (Funders only: approve worker | reject worker).

Hi,

My name is Robbe, and I'm in my last year of my master's degree in computer science, i study cryptography at KU Leuven, Belgium.
I have more than enough experience from past jobs, have done work in front-end, back-end, azure cloud devops, and of course blockchain and cryptography.

I would be more than happy to venture into the depths and take upon me this extremely difficult, near-impossible task. Also, I need to pay of my student dorm room. Also, I'm free the coming 2 weeks, so will work until it is finished.
18) efstajas has applied to start work (Funders only: approve worker | reject worker).

Hey there 👋 I'm Jason from Berlin, a Full-Stack Engineer and Product Designer.

My personal website at https://jason-e.dev/ has dark mode — not just that, each of the project pages has its own distinct dark mode theme! All the images are optimised to work in light & dark mode too.

I'm currently working for Radicle.xyz on a new frontend application that also has dark mode, and at my previous job at Grover.com, I came up with the global color system and theming solution for a unified dark mode across all our applications.

Some of my frontend work:

• My personal website (Vue 2): https://github.com/efstajas/jason-e.dev
• Bingo Bango, a web app I built as my bachelor's final project (Vue 2): https://github.com/bingo-bango-corp/app
• Radicle Workstreams, an in-progress grants board app that can stream funds on Ethereum in real-time: https://github.com/radicle-dev/workstreams-app

To add dark mode to blogmaker, I'd go for a pure CSS solution with a media query to re-color the page's elements depending on the user's system color theme. If an on-site theme picker is desired, I'd add a simple script to remove or add a dark mode class at the root of the document tree, which would come with the necessary color overrides. For the images, I'd add a pretty white border with some padding in order to avoid having to serve up different assets depending on the theme.

Cheers ✌️

Jason
19) kepano has applied to start work (Funders only: approve worker | reject worker).

Migrate colors to CSS variables that can respond to the user's color-scheme preference, and via a button displayed in the header. In addition add helper classes for allowing certain images such as diagrams to be automatically inverted where applicable.

Examples of related work I have done on implementing dark modes:
https://github.com/kepano/obsidian-system-dark-mode
https://github.com/kepano/obsidian-minimal
https://minimal.guide
https://minimal.guide/Block+types/Images
20) brunocroh has applied to start work (Funders only: approve worker | reject worker).

Happy to see Vitalik here! Gitcoin is amazing!

Links of my past work with frontend above!

I have 7 years of experience with frontend (HTML, CSS, and A LOT of javascript).
I'm a community leader of the Frontend community from Goiânia, Brazil, and tweet educational posts about frontend on Twitter in PT-BR (https://twitter.com/brunocroh)

you can see my current website, done in about 2/3 hours.
https://brunocroh.com (Github: https://github.com/brunocroh/blog)

And my current job
https://tc.com.br (Web and Mobile)

Here you can see PR of my last contribution on Gitcoin (Crystal-Ball-ZG/nft-discord-bot#3)

I can do this job in a simple and fast way!
I would be happy to make my first contribution to the Ethereum community!

Thank you for your time @owocki and @vbuterin!
21) deivitto has applied to start work (Funders only: approve worker | reject worker).

Create some styles on dark scheme mode following the style in vitalik.ca light mode
Add the css they need to every page
Never use exactly #FFF white color for fonts in dark mode
Go across all the pages in manual analysis and check if everything looks good, if not, add the selector if already is easy to access to the elements (what it looks like) or add a class style to the structure page with the proper css.
Every css code would try to be applied to the most elements as possible in a modular way to reduce the code length
Check if everything is all right by myself looking for the maximum coverage of the pages and then send to revision.
Wait until an answer
Talk about any possible correction it's suggested: think about it, argue if there's a more efficient way to do the suggestion, implement it, check everything in the scope again
???
Profit for everyone!
22) fbuervenich has applied to start work (Funders only: approve worker | reject worker).

I am a full stack engineer with several years of proven experience in several different technologies (https://github.com/FBuervenich).

I would implement the dark mode

• with a default mode based on the browser preferences
• with a manual switch in case the user wants to change it's preferences
• with CSS-variables to toggle the color
  23) probablykasper has applied to start work (Funders only: approve worker | reject worker).

Some previous frontend work with dark mode:
https://date-picker-svelte.kasper.space
https://kadium.kasper.space
https://kasper.space
https://github.com/probablykasper/ferrum

• For a basic blog, I'd recommend just following the system theme (no toggle button). So the styles would simply be applies using a prefers-color-scheme @media query.
• Will dynamically change the theme when the system theme changes, using a JS media query listener, and I'll add a nice transition when the theme changes.
• I'll make sure all the details look nice, and will be open to feedback/requested changes.
• Some of the images could look a little rough in dark mode, so if needed I will implement a way to provide dark mode images.
  24) elie222 has applied to start work (Funders only: approve worker | reject worker).

1. Choose dark mode color scheme.
2. Get confirmation from Vitalik that he's happy with it.
3. Add a toggle button to change between light and dark mode. The toggle button will be similar to the one presented here unless there is a request for a different style of button: https://overreacted.io/
4. Set the default dark mode to the system color preferences.
   25) soptq has applied to start work (Funders only: approve worker | reject worker).

I have experiences in adding dark mode engine to my personal website soptq.me, and I wrote a blog about it at https://soptq.me/2019/09/16/dark-mode/ (in Chinese). Consequently, I believe I can complete this task with minimal addition to the original codebase.
26) snayyar00 has applied to start work (Funders only: approve worker | reject worker).

A simple toggle for switching it to dark mode using Python script and css.
Leveraging prefered-color-scheme media detection in CSS/Python for the images to make sure they look good in dark mode. Making sure they have proper contrast within background and image.
Previous experience as fullstack developer working on 100+ websites.
27) prabhchintan has applied to start work (Funders only: approve worker | reject worker).

I have deployed dark mode on my website (prabrandhawa.com) where it matches the device settings of the user (on both desktop and mobile). I plan to do the same to vitalik.ca!

This will also serve as an excuse to read all of Vitalik's posts, something I have told myself I should do but have only managed to skim half a dozen so far.

PS: I should mention that I am not a professional programmer, but rather closer to a hacker that is confident he can put this together.
28) fionnachan has applied to start work (Funders only: approve worker | reject worker).

Work plan:
I'll extract all the style colors into CSS variables at :root.
I'll add a single .js file for handling the toggle action of the light/dark mode button.
By default styles will be in light mode.
When the user toggles it to dark mode, #doc div will get a class name called .dark-mode, and for .dark-mode, the CSS variables are all set to the dark mode set of colors.
If anything in existing posts are not accessible / not look good in dark mode, I'll add a background color and a border to the wrapper. If it doesn't look good still, I'll perhaps go with a CSS filter solution.
Additionally, the default mode for users will be stored in the browser's local storage to ensure it works across the site and for future visits.

Past frontend work:
all frontend & design work are done by me in this project: https://github.com/Cezar-X/cezarx
codepens: https://codepen.io/fionnachan/
29) reincha has applied to start work (Funders only: approve worker | reject worker).

Following your requirements, complete what someone had already started.
from publish.py:

latest work : http://edgesforledges.com/watchlists/binance, no dark mode though 🙈

thanks!
30) nftboi has applied to start work (Funders only: approve worker | reject worker).

Past work:

https://market.theheroes.app
https://synthopia.io
https://pxg.wtf/
https://www.audioglyphs.io/
https://www.pixelglyphs.io/

Github:
https://github.com/nftboi/
31) maxdavidwow has applied to start work (Funders only: approve worker | reject worker).

Moon/Sun toggle + prefers-color-scheme + localStorage entry
32) spacecowb0y has applied to start work (Funders only: approve worker | reject worker).

I'm ready to fix Vitalik's html markup and and dark mode to it.
33) costakamby has applied to start work (Funders only: approve worker | reject worker).

no frontend work, I’m a backend developer. How hard can it be? applying cuz gitcoin seems cool (and i dont mind going through the blogs :) )
34) noahdotms has applied to start work (Funders only: approve worker | reject worker).

Hi vitalik :) I am a web3 front end developer and would love to help you out with this :D I have developed some open source front end things and a game on Optimism!
35) ify01 has applied to start work (Funders only: approve worker | reject worker).

I will create a perfect dark mode design for this project
36) il3ven has applied to start work (Funders only: approve worker | reject worker).

I understand that Vitalik uses .css files from HackMd. They are the source for all the styles. The posts themselves are pure HTML. I intend to replace all colors with CSS variables. The value of these variables can be changed on the click of a button.

I am already familiar with Vitalik's blog. I previously forked it to add a new feature. https://github.com/il3ven/blogmaker-github-actions

I will take care of the following points and all the requirements mentioned in the bounty:

• The selected mode is the one that loads first. It shouldn't load light theme for a second and then switch to dark.
• The implementation will be minimal to be in line with the single file python approach of publish.py.

I have plenty past experience of web development including my contributions to the ethereum.org website. Check out my GitHub at https://github.com/il3ven.
37) jsongerber has applied to start work (Funders only: approve worker | reject worker).

Hi,
I’m a Swiss developer and have 10 years of experience in website design and development, in communication agencies and now as a freelance.
The devil is in the details, as i like to approach design.
Some website I made:
Crypto: https://theresidency.io/
Real estate: https://appt.ch/
Associative: - https://cartapulse.ch/
38) nattwasm has applied to start work (Funders only: approve worker | reject worker).

ACTION PLAN
Techniques from easiest to hardest to add toggle dark mode:

1. Use filter: invert(100%) with toggle theme button
2. Use Radix Colors or an other color system
   a. JS that checks dark/light/auto from system preference
   b. toggle button
3. Generate custom colors (Primer) and show theme
   a. Generate colors and have variables on Figma and CSS variables
   b. JS that checks dark/light/auto from system preference
   c. toggle button

Potential color/design tools:
https://primer.style/prism
https://www.radix-ui.com/colors
https://figma.com

Example:
https://natt.xyz

Qualifications:
Former Web Engineering at Adobe and currently Design Engineer at nfty chat (Web3 messaging)
39) developer-piyush has applied to start work (Funders only: approve worker | reject worker).

In past i have worked on many bounties related to gitcoin.

Work Exp:
One of the task involves, decentralization of Quadraticlands which is currently maintained by me and live at http://decentralized.quadraticlands.com/

I will be implementing Dark Mode to a given website with a toggle on/off button functionality and after it is done, i will follow the steps to submit the task i.e by making the PR to official github and submitting video proof here.

Thank you
40) carlfairclough has applied to start work (Funders only: approve worker | reject worker).

1. clone blogmaker and blog
2. apply a css media query to listen for the user's dark-mode preferences
3. apply a default, lightweight dark-mode colour theme to the css (< 10 lines, perhaps just 2 styles would suffice)
4. Search for inlined colour styles in blog and apply updates as necessary. It may be necessary to abstract these inlined styles into classes. It seems they are applied fairly consistently, so the previous media query can be used to toggle colours and thus make things even more lightweight.
5. Review images so that alternate versions can be created if necessary for dark-mode. CSS inversion would work, however browser support isn't amazing and so wrapping these and applying a dark-mode toggle may be necessary.
6. Open PR with screenshots of simple posts, posts with inlined styles, and posts with images.

Note: this does not accommodate a manual dark-mode toggle, however this could be included with a small amount of additional code—as this involves introducing an addition to the markup, I'd prefer to avoid it.

Learn more on the Gitcoin Issue Details page.

from skunkworks.

Hey @owocki - I applied on Gitcoin. I forgot to post any past work, but I've got ample amounts on my Github.

https://dco.dev/work is probably the best one stop shop.
https://polyecho.xyz is another related to music NFTs.

Cheers and hoping for the consideration, would be fun.

from skunkworks.

from vitalik:

Answers to people's questions:

• I would like it to be a button toggle (but follow the blogmaker spirit of just sticking the required html into python, and avoiding all outside dependencies; adding an extra CSS file is fine)

from skunkworks.

i'm sure you all saw it yesterday but vitalik blogged about this bounty :) https://twitter.com/VitalikButerin/status/1547603783202377731

thanks everyone for the applications! there are sooooo many good ones it was really hard to choose 1 person to move forward. i would have chosen multiple people but i didnt want to encourage spec work and i didnt want multiple submissions when vitalik has only offered 1 ETH for 1 coder here. (perhaps next time we could chunk the prize and have 5 submissions paid, the top one gets 0.5 ETH, next gets 0.25 ETH, 0.1 ETH and so on..)

anyway, i ended up selecting @drewcook because his github is full of contributions to open source + he was one of the first applicants. i am open to feedback on my selection mechanism, perhaps there is a more egaliatarian way to choose a worker next time Vitalik or some other A list person/program wants to the use the platform

@drewcook let us know what your plan to turn this around is by monday morning please :). this is a big moment for the gitcoin community to have vitalik putting work on platform, so i hope you'll meet the moment! if you cannot make it work, please let us know also by monday morning.

from skunkworks.

from skunkworks.

@owocki - I've spent some time vetting the codebase this weekend and have determined that my approach above is going to work pretty well. I've got a working version applied to the blog's index page thus far. Here are some further details on how adding in this feature is going to look like throughout the blog's file structure:

For a new global.css stylesheet:

• Add in a new stylesheet to define the following:
  • CSS variables for light and dark mode colors
  • Applying the variables to the tags used throughout the blog rather than the previously defined styles
  • Styles for the custom toggle input

For the index.html page:

• Add in markup for the toggle switch (as a styled checkbox input) to sit as the top element(s) on the page
• Add a reference to the new stylesheet
• Add in a script tag at the bottom of the page to handle the following:
  • Toggling the dark class on the root html tag on the toggle input
  • Updating a new colorScheme value in localStorage to continue to save the user's preference
  • On initial page load, checking for the color scheme stored in localStorage, and if it is dark, toggling the class and checking the toggle input

For the publish.py file:

• The same bullet items as listed above for index.html, but implemented in the way that the Python code calls for
• This new markup can be created as templates and appended into the overall template generator function in the order needed as to match that of the index.html page

Overall, this should create very minimal interference with the rest of the markup and file structure that exists already. That is the underlying approach here, as I don't want to update anything more than what is needed to accomplish this.

Here are a couple screenshots of my local build with the changes outlined above implemented on the blog's index page:

Again, the actual color values can be anything for dark mode, and I'm open to hearing feedback from Vitalik if he would like specific hex values. Also, Enable Dark Mode could likely be named better. Maybe Toggle Dark Mode makes more sense. I'm open to suggestions for this as well.

from skunkworks.

thanks @drewcook - can you submit a WIP PR back to vitaliks github repo so we can checkout the code? any way you can expose your local build to me/vitalik so we can poke around and preview how the posts look?

from skunkworks.

@owocki - I created a WIP PR to show my changes, but I'm having some blocking issues running publish.py posts/* and compiling the markdown files into the proper places. I've added notes in the PR outlining these issues and attached videos showcasing them. I'm following the directions in this readme. I will need some assistance/guidance here I believe.

PR: vbuterin/blog#38

from skunkworks.

Updated PR to blogmaker - vbuterin/blogmaker#11

from skunkworks.

Issue Status: 1. Open 2. Started 3. Submitted 4. Done

Work for 1.0 ETH (1898.39 USD @ $1898.39/ETH) has been submitted by:

1. @drewcook

@owocki please take a look at the submitted work:

• PR by @drewcook

• Learn more on the Gitcoin Issue Details page
• Want to chip in? Add your own contribution here.
• Questions? Checkout Gitcoin Help or the Gitcoin's Discord
• $1,003,841,128.43 more funded OSS Work available on the Gitcoin Issue Explorer

from skunkworks.

Issue Status: 1. Open 2. Started 3. Submitted 4. Done

The funding of 1.0 ETH (1893.33 USD @ $1893.33/ETH) attached to this issue has been cancelled by the bounty submitter

• Questions? Checkout Gitcoin Help or the Gitcoin's Discord
• $1,003,792,845.18 more funded OSS Work available on the Gitcoin Issue Explorer

from skunkworks.