Using dark mode in Notion? Love using pomodoros? Try out this hack developed by Veronika to change from...

Into....

Note: This hack only works for browsers.

Personal Pomodoro Tracker

Step 0: Add Pomodoro Tracker To Your Notion Page

If you haven't added the pomodoro tracker to your workspace yet, embed this URL into any Notion page by simply pasting the link and clicking 'Create embed'.

https://pomodoro-tracker.com/#

Step 1: Install Stylish

Stylish helps you customize the styles (CSS) of any webpage you visit.

Chrome / Brave Installation

Firefox Installation

Step 2: Add a new style

Step 3: Edit The Style

Paste This Code In:

body[data-theme="dark"], body[data-theme="dark"] .c-timer, body[data-theme="dark"] .c-nav--bar .c-nav_item, body[data-theme="dark"] .c-nav--bar, body[data-theme="system"], body[data-theme="system"] .c-timer, body[data-theme="system"] .c-nav--bar .c-nav_item, body[data-theme="system"] .c-nav--bar {
background-color: rgb(47, 52, 55) !important;
}
pomodoro-todo {
display: none !important;
}
pomodoro-history {
display: none !important;
}
#slides {
display: none !important;
}
#stats {
display: none !important;
}
.c-ads {
display: none !important;
}
#footer {
display: none !important;
}
.c-head {
visibility: hidden;
}
.c-head[title="series"], .c-head icon {
visibility: visible;
}
[title="series"]::before {
display: inline-block;
content:"Make work fun to get stuff done.";
text-transform: none;
}
.c-head icon::before {
content:"Make work fun to get stuff done.";
display: inline-block;
text-transform: none;
margin-right: 5px;
}
.c-head[title="series"] + icon::before {
display: none;
}

Make sure you set this at the bottom of the page so that the theme applies to the right pages.

Name the theme pomodoro-tracker-dark and press SAVE.

And you're done!

BONUS: Community Pomodoro Tracker

If you're on a co-working channel with our community and you want to share pomo timers together, we're using a nifty tool, which you can also theme into dark mode if needed!

Step 0: Add Cuckoo Timer To Your Notion Page

If you haven't added the cuckoo timer to your workspace yet, embed this URL into any Notion page by simply pasting the link and clicking 'Create embed'.

https://co-x3.com/pomo

Step 1: Install Stylish

Stylish helps you customize the styles (CSS) of any webpage you visit.

Chrome / Brave Installation

Firefox Installation

Step 2: Add a new style

Step 3: Edit The Style

Paste This Code In:

body{background:#2F3437}
.bubble__circle{fill:#EDBE00;stroke:#f7f6f5;}
.progress-bar{background-color:#2F3437;}
.session-type{color:#fff;}
body.isBreakTime{background:#2F3437}
body.isBreakTime .bubble__circle{fill:#0b6e99;stroke:#f7f6f5}
body.isBreakTime .progress-bar{background-color:#2F3437}
.page--name{background-color:#2F3437;}
.powered-by {
display: none !important;
}

Make sure you set this at the bottom of the page so that the theme applies to the right pages.

Name the theme cuckoo-dark and press SAVE.

And you're done!


Fast Track Your Mastery

Learn the principles behind our systems with our 4-week boot camp designed to help you go from zero to hero with being intentional and gamifying your life.

If you'd like a personalized approach, we offer 1-on-1 support with setting up your system from scratch and customization of your system to fit your unique life.


If you'd have any thoughts or feedback to improve this article, please enter your contributions via the chatbot on the bottom right of the screen.

Thank you for helping our family level up!

Motivational Art GIF by Chibird

Did this answer your question?