A Dark Mode theme for teamtreehouse.com December 2023. Includes a Gray set and a Nord set plus a customizable highlight color (shown as purple in images.
Team Treehouse Dark Theme by TravisAlstrand
Details
AuthorTravisAlstrand
LicenseNo License
Categoryteamtreehouse.com
Created
Updated
Size48 kB
Statistics
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Description
Notes
See code comments in source code to change your theme from Gray / Nord and customize your highlight color.
Source code
Source code has over 10K characters, so we truncated it. You can inspect the full source code on install link./* ==UserStyle==
@name Team Treehouse Dark Theme
@namespace github.com/openstyles/stylus
@version 1.0.0
@description A Dark Mode theme for teamtreehouse.com
@author Travis Alstrand
==/UserStyle== */
@-moz-document domain("teamtreehouse.com") {
:root {
/* ====== GRAY DARK THEME COLORS ====== */
--dark-100: #121212;
--dark-200: #2f2f2f;
--dark-300: #404040;
--dark-400: #575757;
--dark-500: #717171;
--font-reg: #9b9b9b;
/* ====== NORD DARK THEME COLORS ====== */
/*
--dark-100: #292f3a;
--dark-200: #3B4252;
--dark-300: #434C5E;
--dark-400: #4C566A;
--dark-500: #69758f;
--font-reg: #D8DEE9;
*/
--light: #fff;
--color-warning: #e68888;
/* ====== PERSONAL HIGHLIGHT THEME COLORS ====== */
--color-theme: #7f76ff;
--color-theme-dark: #605ac3;
}
/* ====== OTHER COLORS THAT WORK NICELY ====== */
/* ====== COPY/PASTE THE HEX VALUES INTO THE --color-theme VALUES ABOVE ====== */
/* purple - #7f76ff */
/* purple dark - #605ac3 */
/* blue - #3c70ff */
/* blue dark - #284db5 */
/* red - #ff3c3c */
/* red dark - #b52828 */
/* green - #37b31c */
/* green dark - #257e12 */
/* orange - #e09823 */
/* orange dark - #9e6b18 */
/* pink - #d323e0 */
/* pink dark - #95189e */
/* ====== PAGES FOR NOT LOGGED IN USERS ====== */
/* ====== COPY/PASTE THESE INTO "Custom excluded sites" IN "Style settings" ====== */
/*
https://teamtreehouse.com/
https://teamtreehouse.com/techdegree
https://teamtreehouse.com/plans
https://teamtreehouse.com/subscribe/new
https://teamtreehouse.com/stories
https://teamtreehouse.com/stories/submit-story
https://teamtreehouse.com/techdegree/front-end-web-development
https://teamtreehouse.com/techdegree/full-stack-javascript
https://teamtreehouse.com/techdegree/ux-design
https://teamtreehouse.com/techdegree/python-development
https://teamtreehouse.com/techdegree/data-analysis
https://teamtreehouse.com/get-started
https://teamtreehouse.com/teams
https://teamtreehouse.com/teams/new
https://teamtreehouse.com/for/schools
*/
/* ========================================================================== */
/* ============================= FONT COLORS ================================ */
/* ========================================================================== */
/* ====== LIGHTEST / HEADINGS FONT ====== */
.degree-overview-progress h1,
.card-title,
.card-type,
.support-center-title,
.support-center-specialists-title,
.support-center-specialists-member-name > p,
.degree-completed-activities-amount,
.degree-activity-title,
.degree-activity-item a:hover,
.card-degree-unit-courses,
footer .footer h4,
footer .footer-catalogue-tech h4 > a,
.dropdown .dropdown-title a,
.notification-dropdown .notification-meta,
h3,
.degree-peer-reviews-latest-rating strong,
.mejs-container .mejs-controls .mejs-time .mejs-currenttime,
.mejs-container .mejs-controls .mejs-time .mejs-duration,
.breadcrumb-title-link,
h1,
.syllabi-show #syllabus-meta h3,
.syllabi-upcoming #syllabus-meta h3,
.syllabi-show #syllabus-authors h4,
.syllabi-upcoming #syllabus-authors h4,
.syllabi-show #syllabus-description h4,
.syllabi-upcoming #syllabus-description h4,
.syllabi-show #syllabus-stages h2,
.syllabi-upcoming #syllabus-stages h2,
.syllabi-show #syllabus-stages .steps-list h4,
.syllabi-upcoming #syllabus-stages .steps-list h4,
.secondary-heading h1,
.videos-show #video-meta span#video-duration,
.tabs li a,
.secondary-heading h1,
.secondary-heading h2,
.secondary-heading h3,
.markdown-zone h3,
.markdown-zone h4,
.markdown-zone h5,
.markdown-zone h6,
#quiz-question h1.question-count,
#quiz-answers .multiple-choice li a p,
#quiz-answers .multiple-choice li a p > code,
#quiz-answers .multiple-choice-multiple-answers li a p,
#quiz-answers .multiple-choice-multiple-answers li a p > code,
#quiz-answers .true-false li a p,
#quiz-answers .true-false li a p > code,
#quiz-answers .multiple-choice li strong.abc,
#quiz-answers .multiple-choice-multiple-answers li strong.abc,
#quiz-answers .true-false li strong.abc,
#quiz-answers .multiple-choice li a:hover .answer,
#quiz-answers .multiple-choice li a:hover.selected .answer,
#quiz-answers .multiple-choice li .selected .answer,
#quiz-answers .multiple-choice-multiple-answers li a:hover .answer,
#quiz-answers .multiple-choice-multiple-answers li a:hover.selected .answer,
#quiz-answers .multiple-choice-multiple-answers li .selected .answer,
#quiz-answers .true-false li a:hover .answer,
#quiz-answers .true-false li a:hover.selected .answer,
#quiz-answers .true-false li .selected .answer,
#quiz-answers .multiple-choice li a:hover p,
#quiz-answers .multiple-choice li a:hover p > code,
#quiz-answers .multiple-choice li a:hover.selected p,
#quiz-answers .multiple-choice li a:hover.selected p > code,
#quiz-answers .multiple-choice li .selected p,
#quiz-answers .multiple-choice li .selected p > code,
#quiz-answers .multiple-choice-multiple-answers li a:hover p,
#quiz-answers .multiple-choice-multiple-answers li a:hover p > code,
#quiz-answers .multiple-choice-multiple-answers li a:hover.selected p,
#quiz-answers .multiple-choice-multiple-answers li a:hover.selected p > code,
#quiz-answers .multiple-choice-multiple-answers li .selected p,
#quiz-answers .multiple-choice-multiple-answers li .selected p > code,
#quiz-answers .true-false li a:hover p,
#quiz-answers .true-false li a:hover p > code,
#quiz-answers .true-false li a:hover.selected p,
#quiz-answers .true-false li a:hover.selected p > code,
#quiz-answers .true-false li .selected p,
#quiz-answers .true-false li .selected p > code,
h2,
.syllabi-show #syllabus-stages .steps-list .completed h4,
.syllabi-upcoming #syllabus-stages .steps-list .completed h4,
.control-container .nav a,
.control-container .dropdown-parent .dropdown-parent-label,
.discussion-title a,
.discussion-answer-count,
.discussion-answer-info,
.pagination-container .page-number,
:not([class*="topic"]) .button.disabled:not(.has-topic-color),
:not([class*="topic"]) .button-disabled:not(.has-topic-color),
#forum-post-breadcrumb a:not(.has-topic-color),
.discussion-question h1,
.discussion-commenting a,
.h6 a,
.project-related-item h4,
footer .footer a:hover,
tr td:first-of-type,
.workshops-controller.show-action #workshop-meta h3,
.workshops-controller.upcoming-action #workshop-meta h3,
.workshops-controller.show-action #workshop-steps .steps-list .completed h4,
.workshops-controller.upcoming-action #workshop-steps .steps-list .completed,
.workshops-controller.show-action #workshop-steps .steps-list h4,
.workshops-controller.upcoming-action #workshop-steps .steps-list h4,
.markdown-zone h1,
.markdown-zone h2,
.custom-search .custom-filter-wrapper,
.topic-filter a span,
.leaderboard-total,
.leaderboard-user,
.user-tooltip-name,
.mini-profile-type,
.mini-profile-degree,
.modal.mini-profile .student-stats strong,
#featurette-5
> div.instruction--content--description
> div.instruction--content--text
> div
> table,
.project-requirements td:first-child,
h5,
.degree-overview-velocity h3,
.degree-overview-velocity p,
.ct-label,
.control-container .subnav a,
.control-container .subnav .selected:hover,
.header-nav-item-profile-dropdown-title-name,
.header-nav-item-profile-dropdown-title-label,
.dropdown > ul > li > a,
.dropdown .dropdown-secondary,
.dropdown > ul > li:not(.without-hover):hover > a,
.icon-with-description-description strong,
.notification-meta,
.sidebar #sidebar-nav li a,
.sidebar #sidebar-nav li:hover,
.button.inverse:not(.alert).primary:hover,
.button-inverse:not(.alert).primary:hover,
div.instruction--content--description > div.instruction--content--text > a,
.syllabi-show #syllabus-stages .steps-list a:hover h4,
.syllabi-upcoming #syllabus-stages .steps-list a:hover h4,
#cc-instructions h1#task-count,
#cc-instructions div#task p,
#cc-feedback > div > button.button.secondary.icon-on-right.cc-restart,
#cc-feedback
> div
> button.button.secondary.icon-on-right.show-results-button,
#ask-question,
#cc-feedback > p,
#cc-editor .editor-files a,
.markdown-zone table th,
table.data th,
.project-related-item h4:hover,
.markdown-zone a:hover,
.support-center-link:hover,
footer .footer-middle .catcta a:hover,
footer .footer-tail .legal-links a:hover,
footer .footer-tail .legal-links a:active,
footer .footer-tail .legal-links a:focus,
.tour-step h3,
.button.secondary:not(.has-topic-color),
.button-secondary:not(.has-topic-color),
.card-box:not(.has-topic-background-color),
#track-index-header .control-container .dropdown-parent .dropdown-parent-label,
.control-container .dropdown-parent .dropdown-child a[data-filter-value],
.topic-heading h1,
#welcome-panel p a:hover,
.tag:not(.has-topic-color),
.tags > li > a:not(.has-topic-color),
.tags > li > span:not(.has-topic-color),
.discussion-byline a:hover,
#filter-breadcrumb-tags li a:not(.has-topic-color),
.markdown-zone code,
.discussion-answer-voting .vote-count,
.discussion-answer .discussion-byline a:hover,
.form-item p a:hover,
.discussion-comment .discussion-byline a:hover,
.button:not(.has-topic-color),
.pages-support-section a:hover,
.pages-support-section a.button:hover:not(.disabled):not(.has-topic-color),
h4.pages-support-faq-heading,
.nav-link-2022,
.nav a,
.jobs-intro > .eight h2,
.job-card h4,
#jobs #details-header div.job-date,
#jobs #details-header h1,
#jobs .contained .secondary-heading h2,
.control-container .nav a.current:hover,
#member-table > p > a:hover,
.organization-goal .form-item,
#leader_dashboard .member-list table tr th,
#leader_d...