50 shades of green

One contribution to the Django world Sarah Abderemane @ DjangoCon Africa 2025

Hello, Jambo !

I'm thrilled to be here, coming from France 🇫🇷

"Nice, how did you start to be involved in Django?"

Let's me tell you the story ✨

The origins

Why not a dark mode for the Django website?

should be simple, right?

I can give it a try

I'm not an expert in Django

But I know how it works

I know frontend stuff

Let's do it! 💪

What is a dark mode?

The deep dive

The start

Style and more

• the Django website is using Django under the hood
• only a few dependencies
• colors are spread everywhere in the CSS file
• Sass (SCSS) is used for styling
• jQuery is used for the JavaScript part

Did you know the website has a style guide page?

Accessibility

Accessibility

Source: https://cruxcollaborative.com/

The plan

Change the whole design and re-do everything

• gather all colors to create the white theme
• do the reverse colors for the dark theme
• increase contrast in dark theme
• add the button to toggle between themes
• test everything 🧪

The green odyssey: gather all the shades

Simple. Not so many colors.

right?

Let's do a quizz 🤔

How many colors do you think were on the website in 2021?

• 12
• 23
• 36 ✅

How many colors do you think are on the website now?

• 36
• 42 ✅
• 70

How many greens do you think are on the website now?

• 9
• 13
• 16 ✅

9 greens, 1 grey, 2 reds

... but in reality it's 16 shades of green 😱

Gather all colors to create the white theme

					$text: #0C3C26;
					$text-l10: lighten($text, 10);
					$text-l20: lighten($text, 20);
					$text-light: #798780;
					$text-light-l20: lighten($text-light, 20);
					$text-light-l30: lighten($text-light, 30);
					$text-light-d10: darken($text-light, 10);
					$text-light-d20: darken($text-light, 20);
					$green-very-light: #C9F0DD;
					$green-very-light-l5: lighten($green-very-light, 5);
					$green-very-light-l10: lighten($green-very-light, 10);
					$green-light: #93D7B7;
					$green-medium: #44B78B;
					$green-medium-dark: #2B8C67;
					$green: #20AA76;
					$green-l6: lighten($green, 6);
					$green-dark: #0C4B33;
					$green-dark-text: #3C8866;
				

Naming is hard...

Create the white theme

					html[data-theme="light"],
					:root {
						--body-fg: #{$text};
						--body-bg: #{$white};
						--logo-bg: #{$white};

						--menu: #{$white};

						--text-l10: #{$text-l10};
						--text-l20: #{$text-l20};
						--text-light: #{$text-light};

						--primary: #{$green-medium};
						--primary-accent: #{$green-medium-dark};

						--secondary: #{$green};
						--secondary-accent: #{$green-very-light};
						...	
					}
				

Do the reverse colors for the dark theme

					@media (prefers-color-scheme: dark) {
					html:not([data-theme="light"]) {
						--body-fg: #C1CAD2;
						--body-bg: #{$black};
						--logo-bg: #{$logo-bg-dark};

						--text-l10: #{$green-light};
						--text-l20: #{$green-very-light};
						--text-light: #{$text-light-l20};

						--primary: #{$green-medium};
						--primary-accent: #{$green-light};

						--secondary-accent: #{$green-medium};
						...
					}
				

increase contrast in dark theme

add the button to toggle between themes

					
						function cycleTheme() {
							const currentTheme = getCookie('theme') || 'auto';

							if (prefersDark) {
								// Auto (dark) -> Light -> Dark
								if (currentTheme === 'auto') {
								setTheme('light');
								} else if (currentTheme === 'light') {
								setTheme('dark');
								} else {
								setTheme('auto');
								}
							} else {
								// Auto (light) -> Dark -> Light
								...
								}
							}
						}
					
				

Testing

... But not alone 🤝

More feedback from the community

The finish line

Outcomes and impact

Making a contribution is rewarding

Still needs improvements

First conference in person: DjangoCon Europe 2021

					
						djangoproject.com
						├── Overview
						├── Download
						├── Documentation
						│   └── docs.djangoproject.com
						├── News
						├── Community
						├── Code
						├── Issues
						│   └── code.djangoproject.com
						├── About
						└── Donate
					
				

Took initiatives in Django community

• Co-founder of Djangonaut Space
• Django Girls+ coach
• Django Website WG Chair
• Maintainer of the website djangoproject.com
• Help others to contribute
• and more...

I made a lot of friends

There are so many we can't fit them all on one slide 💚

You don't need to be an expert to contribute

Try, even if it sounds scary

You can start with small contributions

You can learn and grow with the community

You could be the next expert ✨

Want to give it a try?

Many possibilities ✨

• Join us for the sprints on Thursday
• Help shape the future of the website
• Contribute to things that could interest you
  • Register to the new Djangonaut Space session
  • Triage the tickets
  • Contribute to Django core
  • Mentor people
  • Help DSF fundraising
  • Join a Working Group
  • and more...

We all have a story to tell. What's yours?

If you don't, you can still write your story.

Thank you, Asante

Sarah Abderemane
@sabderemane
sarahabd.com

Slides link: https://sarahabd.com/shades/