theodinproject / top-dark-theme

Chrome plugin for The Odin Project Dark Theme

The Odin Project

The Odin Project (TOP) is an open-source curriculum for learning full-stack web development. Our mission is to provide a comprehensive curriculum to learn web development for free. We help users learn the skills and build the impressive portfolio of projects they need to get hired as a web developer.

Some of the topics we cover include:

• Ruby
• Ruby on Rails
• SQL
• HTML and CSS
• Javascript
• Node
• React
• How to go about getting a job in the industry

This repo contains the TOP app which pulls in lesson content as well as front-end and back-end code. To see the actual lesson content that gets pulled in, please go to the TOP curriculum repo.

Our community can be found on the TOP Discord server.

Contributing

The Odin Project depends on open-source contributions to improve, grow, and thrive. We welcome contributors of all experience levels and backgrounds to help maintain this awesome curriculum and community. If you would like to contribute to our curriculum, be sure to thoroughly read our contributing guide.

Feel free to also watch this scrimba walkthrough of The Odin Project web app repo, which will give you an introduction to this repository. Note that since this scrimba was recorded, the content and/or structure may have changed in this repo. The focus of this scrimba is less on the actual content, but more of a high level overview.

top-dark-theme's Issues

Bug - : Home Page Header and First Section have different shade backgrounds

Complete the following REQUIRED checkboxes:

• I have thoroughly read and understand The Odin Project Contributing Guide
• The title of this issue follows the Bug: brief description of bug format, e.g. Bug: links blend in with normal text

The following checkbox is OPTIONAL:

• I would like to be assigned this issue to work on it

---

1. Description of the Bug:

The header on the home page and first section have different shade background while using dark mode.

2. How To Reproduce:

1. Go to www.theodinproject.com

3. Expected Behavior:

1. Go to www.theodinproject.com
2. The header and first section have the same colour background

4. Desktop/Device:

• Device: Macbook Pro M1 Pro
• OS: macOS Monterey
• Browser: Chrome
• Version: 99.0.4844.74

5. Additional Information:

Hamburger menu is unstyled

List items don't appear unless hovered which is why it looks so empty.

Hover state of github, discord, facebook, twitter icons

The icons at the bottom of the page for github, discord, facebook and twitter are all black on hover so they disappear with the dark mode extension. This is also true for the notifications bell icon next to your profile.

Hover State Color

Hey Andy,
I'm not sure if you developed the Odin Dark Mode Extension, but if you did (first of all, thank you) the link hover states may need some tweaking. In my browser (Edge Chromium), the links are like a gold or a russet color, but the hover state of the links is black. I would suggest a complementary color to gold--maybe #21856D?

Login Placeholders Text Color

The text colors of the login page are off:

They should be updated to use the proper class to make the text stand out more. Should be either

    --dark-font-color:  #b3b3b3;
    --dark-header-color:  #fff;

This will require modifying the placeholder text

Adding a project

Text is hard to read on the Project upload interface:

Pseudo-Code Text is not visible

In the Foundations -> Problem Solving lesson I found a chunk of pseudo-code that is hard to read:

Contrast on 404 Page

Hey just an issue I found with some contrast.
The 404 page needs more contrast for the text.
For this specific page I went to https://www.theodinproject.com/dashboard

Complete Lesson hover state

Not a big issue but noticed that the hover state for the blue buttons makes the text very difficult to read, could be worth looking into even for accessibility reasons!

faq page titles dont display

https://www.theodinproject.com/faq question headers wont display, class tag: secondary bold faq-question-title

Hamburger Menu Options Invisible

Hey I just recently found this dark theme add on and found the options for the hamburger menu are invisible (I think they are just white). I was hovering over "My Path" with my cursor which is why it appears gray.