How can we help? 👋

Theme Your Pomodoro Tracker (Dark Mode)

Add a pomodoro tracker into Notion and theme it for dark mode.

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!

 
Did this answer your question?
😞
😐
🤩