monkeytypegame/monkeytype
1
1
Fork 0
mirror of https://github.com/monkeytypegame/monkeytype.git synced 2025-11-09 13:44:29 +08:00
Code Issues Projects Releases Packages Wiki Activity

feat(themes): add oscura theme CSS with customizable colors and

Browse source 
notification styles
This commit is contained in:
SameerJS6 2025-10-23 23:15:53 +05:30
parent 34d704b49f
commit fd578888a4
1 changed files with 52 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

52
frontend/static/themes/oscura.css Normal file
View file

@ -0,0 +1,52 @@
:root {
--bg-color: #0b0b0f;
--main-color: #e2e3a0;
--caret-color: #e2e3a0;
--sub-color: #a0a0a0;
--sub-alt-color: #121213;
--text-color: #e6e6e6;
--error-color: #ff5c5c;
--error-extra-color: #ff6c72;
--colorful-error-color: #ff5c5c;
--colorful-error-extra-color: #d84f68;
}
/* Background & Text Colors */
#notificationCenter .notif.bad {
--notif-border-color: #ff5c5c;
--notif-background-color: #ff5c5c;
}
#notificationCenter .notif.good {
--notif-border-color: #4ebe96;
--notif-background-color: #4ebe96;
}
#notificationCenter .notif.notice {
--notif-border-color: #479ffa;
--notif-background-color: #479ffa;
}
/* Hover Styles */
#notificationCenter .notif:hover.good {
--notif-background-color: #4ebe96ad;
}
#notificationCenter .notif:hover.bad {
--notif-background-color: #ff5c5cc2;
}
#notificationCenter .notif:hover.notice {
--notif-background-color: #479ffabd;
}
/* Content Colors */
#notificationCenter .notif .message {
color: var(--bg-color);
}
#notificationCenter .notif .message .title {
color: var(--bg-color);
}
#notificationCenter .notif .icon {
color: var(--bg-color);
}