├── README.md ├── _config.yml ├── base.user.css ├── botanical.user.css ├── cleancommandline.user.css ├── dracula.user.css ├── gruvboxdark.user.css ├── iceland.user.css ├── icons.user.css └── nord.user.css /README.md: -------------------------------------------------------------------------------- 1 |

monkeytype-themes

2 | 3 | > [!WARNING] 4 | > NO LONGER ACTIVELY MAINTAINED. THEMES ARE OUTDATED. 5 | 6 | Welcome to monkeytype-themes, a list of custom themes I have created for [monkeytype](https://monkeytype.com). 7 | 8 | Contact me in the #custom-themes channel of the Monkeytype discord if you need any help (my username is refact0r). 9 | 10 | Also please star the [github](https://github.com/refact0r/monkeytype-themes). 11 | 12 |
13 | 14 | ## How to install themes 15 | 16 | 1. Install the Stylus browser extension: [Chrome](https://chrome.google.com/webstore/detail/stylus/clngdbkpkpeebahjckkjfobafhncgmne?hl=en), [Firefox](https://addons.mozilla.org/en-US/firefox/addon/styl-us/) 17 | 18 | 2. Click a theme install link below OR open any css file in this repository and click the "Raw" button at the top of the file. 19 | 20 | 3. The stylus extension should open up with a button to install the style. 21 | 22 | NOTE FOR FIREFOX USERS: You need to enable backdrop-filter in the firefox config for background blur to work. Tutorial [here](https://dev.to/snkds/how-to-enable-backdrop-filter-in-firefox-2n8e). 23 | 24 |
25 | 26 | ## Component Themes 27 | 28 | These are themes that change small parts of monkeytype and can be used together. 29 | 30 | ### Base 31 | [Install](https://github.com/refact0r/monkeytype-themes/raw/main/base.user.css) 32 | 33 | Basic tweaks like hiding the unnecessary bottom buttons, centering the top menu, and changing logo text. 34 | 35 | 36 |
37 | 38 | ### Icons 39 | [Install](https://github.com/refact0r/monkeytype-themes/raw/main/icons.user.css) 40 | 41 | Replaces the default Font Awesome icons with Bootstrap icons (which look better). Also adds a few animations to the menu buttons and the buttons that show after completing a test. 42 | 43 | 44 |
45 | 46 | ### Clean command line 47 | [Install](https://github.com/refact0r/monkeytype-themes/raw/main/cleancommandline.user.css) 48 | 49 | Removes command line box background and adds a blur behind it for a cleaner look. Works best if you already have a background image. 50 | 51 | 52 |
53 | 54 |
55 | 56 | ## Style Themes 57 | 58 | These are themes that change the color and feel of Monkeytype. Works best if used with Base theme, don't mix style themes together. 59 | 60 | ### Iceland 61 | [Install](https://github.com/refact0r/monkeytype-themes/raw/main/iceland.user.css) 62 | 63 | Iceland theme. Colors based off the iceberg dark preset theme. Make sure you have timer/progress style on "bar". 64 | 65 | 66 |
67 | 68 | ### Gruvbox Dark 69 | [Install](https://github.com/refact0r/monkeytype-themes/raw/main/gruvboxdark.user.css) 70 | 71 | Gruvbox dark theme. Same colors as the preset theme gruvbox dark. 72 | 73 | 74 |
75 | 76 | ### Botanical 77 | [Install](https://github.com/refact0r/monkeytype-themes/raw/main/botanical.user.css) 78 | 79 | Botanical theme. Colors based off the terrow below preset theme. 80 | 81 | 82 |
83 | 84 | ### Nord 85 | [Install](https://github.com/refact0r/monkeytype-themes/raw/main/nord.user.css) 86 | 87 | Nord theme. Colors based off the nord preset theme. 88 | 89 | 90 |
91 | 92 | ### Dracula 93 | [Install](https://github.com/refact0r/monkeytype-themes/raw/main/dracula.user.css) 94 | 95 | Dracula theme. Colors based off the dracula preset theme. 96 | 97 | 98 | 99 |
100 | -------------------------------------------------------------------------------- /_config.yml: -------------------------------------------------------------------------------- 1 | remote_theme: P0WEX/Gesko 2 | 3 | repo: https://github.com/refact0r/monkeytype-themes 4 | 5 | author: 6 | name: refact0r 7 | github: refact0r 8 | -------------------------------------------------------------------------------- /base.user.css: -------------------------------------------------------------------------------- 1 | /* ==UserStyle== 2 | @name monkeytype base 3 | @namespace github.com/openstyles/stylus 4 | @version 1.0.0 5 | @description small tweaks for monkeytype 6 | @author refact0r 7 | @homepageURL https://github.com/refact0r/monkeytype-themes 8 | @updateURL https://github.com/refact0r/monkeytype-themes/raw/main/base.user.css 9 | ==/UserStyle== */ 10 | 11 | @-moz-document domain("monkeytype.com") { 12 | 13 | /* force font on logo */ 14 | *:not(i) { 15 | font-family: var(--font) !important; 16 | } 17 | 18 | /* hide bottom */ 19 | #bottom { 20 | display: none; 21 | } 22 | 23 | /* center menu */ 24 | #top { 25 | grid-template-columns: 1fr auto 1fr; 26 | } 27 | 28 | /* increase menu gap */ 29 | #menu { 30 | gap: 1rem; 31 | } 32 | 33 | /* hide account name */ 34 | .icon-button .text { 35 | display: none; 36 | } 37 | 38 | /* typing test margins */ 39 | #middle { 40 | margin-left: 10%; 41 | margin-right: 10%; 42 | } 43 | 44 | /* change logo text */ 45 | #top .logo .text { 46 | visibility: hidden; 47 | } 48 | 49 | #top .logo .text .top:after { 50 | content: 'reject humanity'; 51 | visibility: visible; 52 | display: block; 53 | position: relative; 54 | margin-top: -.7rem; 55 | margin-left: -.15rem; 56 | } 57 | 58 | #top .logo .text:after { 59 | content: 'become monke'; 60 | visibility: visible; 61 | display: block; 62 | position: relative; 63 | margin-top: -2rem; 64 | } 65 | 66 | /* caret width */ 67 | #caret.default { 68 | width: 1px; 69 | } 70 | 71 | /* change live wpm and acc text size */ 72 | #liveWpm, 73 | #liveAcc { 74 | font-size: 7rem; 75 | } 76 | 77 | /* letter fading */ 78 | #words letter.correct { 79 | animation: fadeOut 3s ease forwards; 80 | } 81 | 82 | @keyframes fadeOut { 83 | 100% { 84 | opacity: 0; 85 | } 86 | } 87 | 88 | /* text shadow */ 89 | body { 90 | text-shadow: 1px 1px 3px #00000050 !important; 91 | } 92 | 93 | /* remove shadow when test starts */ 94 | #top.focus #menu, 95 | #top.focus #menu .text-button { 96 | text-shadow: none; 97 | } 98 | } -------------------------------------------------------------------------------- /botanical.user.css: -------------------------------------------------------------------------------- 1 | /* ==UserStyle== 2 | @name monkeytype botanical 3 | @namespace github.com/openstyles/stylus 4 | @version 1.0.0 5 | @description botanical theme for monkeytype 6 | @author refact0r 7 | @homepageURL https://github.com/refact0r/monkeytype-themes 8 | @updateURL https://github.com/refact0r/monkeytype-themes/raw/main/botanical.user.css 9 | ==/UserStyle== */ 10 | @-moz-document domain("monkeytype.com") { 11 | 12 | /* override theme colors */ 13 | /* also theme link: https://monkeytype.com?customTheme=WyIjMGIxZTFhIiwiIzc0YjRhZSIsIiM3NGI0YWUiLCIjM2Q3MTY3IiwiIzA0MTcxNSIsIiNlOWYwZjMiLCIjYmY2MTZhIiwiIzc5M2U0NCIsIiNiZjYxNmEiLCIjNzkzZTQ0Il0= */ 14 | * { 15 | --bg-color: #0b1e1a; 16 | --main-color: #74b4ae; 17 | --caret-color: #74b4ae; 18 | --sub-color: #3d7167; 19 | --sub-alt-color: #0f242280; 20 | --text-color: #E9F0F3; 21 | --error-color: #bf616a; 22 | --error-extra-color: #793e44; 23 | --colorful-error-color: #bf616a; 24 | --colorful-error-extra-color: #793e44; 25 | } 26 | 27 | /* background and effects */ 28 | .customBackground { 29 | background-image: url("https://wallpaperaccess.com/full/3703256.jpg") !important; 30 | background-size: cover; 31 | background-position: center !important; 32 | background-repeat: no-repeat; 33 | transition: filter 1s ease !important; 34 | filter: brightness(0.7) blur(0px); 35 | } 36 | 37 | body[style*="cursor: none"] .customBackground { 38 | filter: brightness(0.5) blur(5px); 39 | } 40 | 41 | /* change logo text */ 42 | #top .logo .text { 43 | visibility: hidden; 44 | } 45 | 46 | #top .logo .text .top:after { 47 | content: 'monkeytype' !important; 48 | visibility: visible; 49 | display: block; 50 | position: relative; 51 | margin-top: -.7rem; 52 | margin-left: -.15rem; 53 | } 54 | 55 | #top .logo .text:after { 56 | content: 'botanical' !important; 57 | visibility: visible; 58 | display: block; 59 | position: relative; 60 | margin-top: -2rem; 61 | } 62 | } -------------------------------------------------------------------------------- /cleancommandline.user.css: -------------------------------------------------------------------------------- 1 | /* ==UserStyle== 2 | @name monkeytype clean command line 3 | @namespace github.com/openstyles/stylus 4 | @version 1.0.0 5 | @description clean command line 6 | @author refact0r 7 | @homepageURL https://github.com/refact0r/monkeytype-themes 8 | @updateURL https://github.com/refact0r/monkeytype-themes/raw/main/cleancommandline.user.css 9 | ==/UserStyle== */ 10 | 11 | @-moz-document domain("monkeytype.com") { 12 | /* clean command line */ 13 | #commandLine { 14 | background: none !important; 15 | } 16 | #commandLineWrapper { 17 | background: none; 18 | backdrop-filter: blur(5px) brightness(0.5); 19 | transition: 0.5s ease; 20 | } 21 | #commandLine input { 22 | background: none !important; 23 | } 24 | #commandLine > div:first-child { 25 | border-radius: 0; 26 | border-bottom: 1px solid var(--sub-color) !important; 27 | } 28 | 29 | /* command line scrollbar */ 30 | #commandLine .suggestions { 31 | scrollbar-width: none !important; 32 | scrollbar-color: rgba(255, 255, 255, .1) transparent !important; 33 | } 34 | #commandLine .suggestions:hover { 35 | scrollbar-width: thin !important; 36 | } 37 | #commandLine .suggestions::-webkit-scrollbar { 38 | width: 0px; 39 | } 40 | #commandLine .suggestions:hover::-webkit-scrollbar { 41 | width: 7px; 42 | } 43 | } 44 | -------------------------------------------------------------------------------- /dracula.user.css: -------------------------------------------------------------------------------- 1 | /* ==UserStyle== 2 | @name monkeytype dracula 3 | @namespace github.com/openstyles/stylus 4 | @version 1.0.0 5 | @description dracula theme for monkeytype 6 | @author refact0r 7 | @homepageURL https://github.com/refact0r/monkeytype-themes 8 | @updateURL https://github.com/refact0r/monkeytype-themes/raw/main/dracula.user.css 9 | ==/UserStyle== */ 10 | @-moz-document domain("monkeytype.com") { 11 | 12 | /* theme colors */ 13 | * { 14 | --bg-color: #282a36; 15 | --main-color: #f2f2f2; 16 | --caret-color: #f2f2f2; 17 | --sub-color: #bd93f9; 18 | --sub-alt-color: #20222c; 19 | --text-color: #f2f2f2; 20 | --error-color: #f758a0; 21 | --error-extra-color: #732e51; 22 | --colorful-error-color: #f758a0; 23 | --colorful-error-extra-color: #732e51; 24 | } 25 | 26 | /* change logo text */ 27 | #top .logo .text { 28 | visibility: hidden; 29 | } 30 | 31 | #top .logo .text .top:after { 32 | content: 'monkeytype' !important; 33 | visibility: visible; 34 | display: block; 35 | position: relative; 36 | margin-top: -.7rem; 37 | margin-left: -.15rem; 38 | } 39 | 40 | #top .logo .text:after { 41 | content: 'dracula' !important; 42 | visibility: visible; 43 | display: block; 44 | position: relative; 45 | margin-top: -2rem; 46 | } 47 | 48 | #top { 49 | margin-top: 60px; 50 | } 51 | 52 | .logo .icon { 53 | visibility: hidden; 54 | width: 160px !important; 55 | } 56 | 57 | .logo .icon svg { 58 | display: none; 59 | } 60 | 61 | .logo .icon::after { 62 | visibility: visible; 63 | content: ""; 64 | position: absolute; 65 | left: 2rem; 66 | width: 200px; 67 | height: 200px; 68 | background: url("https://i.imgur.com/RtYB4Us.png"); 69 | background-size: cover; 70 | } 71 | } -------------------------------------------------------------------------------- /gruvboxdark.user.css: -------------------------------------------------------------------------------- 1 | /* ==UserStyle== 2 | @name monkeytype gruvbox dark 3 | @namespace github.com/openstyles/stylus 4 | @version 1.0.0 5 | @description Gruvbox Dark theme for monkeytype 6 | @author refact0r 7 | @homepageURL https://github.com/refact0r/monkeytype-themes 8 | @updateURL https://github.com/refact0r/monkeytype-themes/raw/main/gruvboxdark.user.css 9 | ==/UserStyle== */ 10 | @-moz-document domain("monkeytype.com") { 11 | 12 | /* theme colors */ 13 | * { 14 | --bg-color: #1d2021; 15 | --main-color: #d79921; 16 | --caret-color: #fabd2f; 17 | --sub-color: #665c54; 18 | --sub-alt-color: #282828; 19 | --text-color: #ebdbb2; 20 | --error-color: #fb4934; 21 | --error-extra-color: #cc241d; 22 | --colorful-error-color: #cc241d; 23 | --colorful-error-extra-color: #9d0006; 24 | } 25 | 26 | /* background and effects */ 27 | .customBackground { 28 | background-image: url("https://lh3.google.com/u/0/d/1AGXTefpU86h70kMa2h1DE_3RVX6znM_f=w3840-h1960-iv1") !important; 29 | background-size: cover; 30 | background-position: center !important; 31 | background-repeat: no-repeat; 32 | transition: filter 1s ease !important; 33 | filter: blur(0px) brightness(0.8); 34 | } 35 | 36 | body[style*="cursor: none"] .customBackground { 37 | filter: blur(0px) brightness(0.8); 38 | } 39 | 40 | /* change logo text */ 41 | #top .logo .text { 42 | visibility: hidden; 43 | } 44 | 45 | #top .logo .text .top:after { 46 | content: 'monkeytype' !important; 47 | visibility: visible; 48 | display: block; 49 | position: relative; 50 | margin-top: -.7rem; 51 | margin-left: -.15rem; 52 | } 53 | 54 | #top .logo .text:after { 55 | content: 'gruvbox' !important; 56 | visibility: visible; 57 | display: block; 58 | position: relative; 59 | margin-top: -2rem; 60 | } 61 | 62 | /* change menu icon colors */ 63 | .view-start { 64 | color: #FB4934; 65 | } 66 | 67 | .view-leaderboards { 68 | color: #FABD2F; 69 | } 70 | 71 | .view-about { 72 | color: #B8BB26; 73 | } 74 | 75 | .view-settings { 76 | color: #83A598; 77 | } 78 | 79 | .view-account { 80 | color: #D3869B; 81 | } 82 | 83 | #menu>*:hover { 84 | color: var(--text-color) !important; 85 | } 86 | } -------------------------------------------------------------------------------- /iceland.user.css: -------------------------------------------------------------------------------- 1 | /* ==UserStyle== 2 | @name monkeytype iceland 3 | @namespace github.com/openstyles/stylus 4 | @version 1.0.0 5 | @description Iceland theme for monkeytype 6 | @author refact0r 7 | @homepageURL https://github.com/refact0r/monkeytype-themes 8 | @updateURL https://github.com/refact0r/monkeytype-themes/raw/main/iceland.user.css 9 | ==/UserStyle== */ 10 | @-moz-document domain("monkeytype.com") { 11 | 12 | /* theme colors */ 13 | * { 14 | --bg-color: #161821; 15 | --caret-color: #d2d4de; 16 | --main-color: #7da1e8; 17 | --sub-color: #b8c5e0; 18 | --sub-alt-color: #232531; 19 | --text-color: #e3e5e8; 20 | --error-color: #e27878; 21 | --error-extra-color: #e2a478; 22 | --colorful-error-color: #e27878; 23 | --colorful-error-extra-color: #e2a478; 24 | } 25 | 26 | /* background and effects */ 27 | .customBackground { 28 | background-image: url("https://data.1freewallpapers.com/download/bridge-aerial-view-river-ice-iceland.jpg") !important; 29 | background-size: cover; 30 | background-position: center !important; 31 | background-repeat: no-repeat; 32 | transition: filter 1s ease !important; 33 | filter: blur(0px) brightness(0.6); 34 | } 35 | 36 | body[style*="cursor: none"] .customBackground { 37 | filter: blur(5px) brightness(0.4); 38 | } 39 | 40 | /* change logo text */ 41 | #top .logo .text { 42 | visibility: hidden; 43 | } 44 | 45 | #top .logo .text .top:after { 46 | content: 'monkeytype' !important; 47 | visibility: visible; 48 | display: block; 49 | position: relative; 50 | margin-top: -.7rem; 51 | margin-left: -.15rem; 52 | } 53 | 54 | #top .logo .text:after { 55 | content: 'iceland' !important; 56 | visibility: visible; 57 | display: block; 58 | position: relative; 59 | margin-top: -2rem; 60 | } 61 | 62 | /* position timer bar and transition */ 63 | #timerWrapper #timer { 64 | top: 50%; 65 | bottom: 50%; 66 | transform: translate(0, -40%); 67 | transition: height 0.5s ease; 68 | } 69 | 70 | /* position words */ 71 | #wordsWrapper { 72 | height: 6rem !important; 73 | margin-bottom: 8rem; 74 | } 75 | 76 | #typingTest { 77 | margin-top: 2rem; 78 | } 79 | } -------------------------------------------------------------------------------- /icons.user.css: -------------------------------------------------------------------------------- 1 | /* ==UserStyle== 2 | @name monkeytype icons 3 | @namespace github.com/openstyles/stylus 4 | @version 1.0.0 5 | @description Bootstrap icons and animations for monkeytype 6 | @author refact0r 7 | @homepageURL https://github.com/refact0r/monkeytype-themes 8 | @updateURL https://github.com/refact0r/monkeytype-themes/raw/main/icons.user.css 9 | ==/UserStyle== */ 10 | @-moz-document domain("monkeytype.com") { 11 | @import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.3/font/bootstrap-icons.css"); 12 | 13 | /* base styling for bootstrap icons */ 14 | i::before, 15 | .supportButtons .button div, 16 | .contactButtons .button div { 17 | display: inline-block; 18 | font-family: bootstrap-icons !important; 19 | font-style: normal; 20 | font-weight: normal !important; 21 | font-variant: normal; 22 | text-transform: none; 23 | } 24 | 25 | /* icons */ 26 | .fa-keyboard::before { 27 | content: "\f451"; 28 | } 29 | .fa-crown::before { 30 | content: "\f5e7"; 31 | } 32 | .fa-info::before { 33 | content: "\f431"; 34 | } 35 | .fa-cog::before { 36 | content: "\f3e5"; 37 | } 38 | .fa-user::before, 39 | .fa-user-circle::before { 40 | content: "\f4e1"; 41 | } 42 | .fa-tools::before { 43 | content: "\f5db"; 44 | } 45 | .fa-mouse-pointer::before { 46 | content: "\f402"; 47 | /* content: "\f2e3"; triangle cursor */ 48 | /* content: "\f2e2"; text cursor */ 49 | } 50 | .fa-redo-alt::before { 51 | content: "\f116"; 52 | } 53 | .fa-globe-americas::before { 54 | content: "\f3ee"; 55 | } 56 | .fa-chevron-right::before { 57 | content: "\f285"; 58 | } 59 | .fa-sync-alt::before { 60 | content: "\f117"; 61 | } 62 | .fa-exclamation-triangle::before { 63 | content: "\f33b"; 64 | } 65 | .fa-align-left::before { 66 | content: "\f5c7"; 67 | } 68 | .fa-backward::before { 69 | content: "\f552"; 70 | } 71 | .fa-image::before { 72 | content: "\f226"; 73 | } 74 | .fa-search::before { 75 | content: "\f52a"; 76 | } 77 | .fa-chevron-down::before { 78 | content: "\f282"; 79 | } 80 | .fa-angle-double-up::before { 81 | content: "\f281"; 82 | } 83 | .fa-save::before { 84 | content: "\f272"; 85 | /* content: "\f525"; default save */ 86 | } 87 | .fa-check::before { 88 | content: "\f272"; 89 | } 90 | .fa-quote-right::before { 91 | content: "\f250"; 92 | } 93 | .fa-percentage::before { 94 | content: "\f4d1"; 95 | } 96 | .fa-bomb::before { 97 | content: "\f333"; 98 | } 99 | .fa-tachometer-alt::before { 100 | content: "\f57f"; 101 | } 102 | .fa-chart-line::before { 103 | content: "\f3f2"; 104 | } 105 | .fa-exchange-alt::before { 106 | content: "\f12b"; 107 | } 108 | .fa-ad::before { 109 | content: "\f161"; 110 | } 111 | .fa-palette::before { 112 | content: "\f4b1"; 113 | } 114 | .fa-i-cursor::before { 115 | content: "\f2e2"; 116 | } 117 | .fa-language::before { 118 | content: "\f658"; 119 | } 120 | .fa-gamepad::before { 121 | content: "\f2d4"; 122 | /* content: "\f448"; joystick */ 123 | } 124 | .fa-long-arrow-alt-right::before { 125 | content: "\f138"; 126 | } 127 | .fa-angle-down::before { 128 | content: "\f282"; 129 | } 130 | .fa-bars::before { 131 | content: "\f479"; 132 | } 133 | .fa-eye-slash::before { 134 | content: "\f340"; 135 | } 136 | .fa-step-forward::before { 137 | content: "\f55e"; 138 | } 139 | .fa-volume-mute::before { 140 | content: "\f60d"; 141 | } 142 | .fa-hand-paper::before { 143 | content: "\f337"; 144 | } 145 | .fa-star::before { 146 | content: "\f588"; 147 | } 148 | .fa-clock::before { 149 | content: "\f293"; 150 | } 151 | .fa-font::before { 152 | content: "\f3da"; 153 | } 154 | .fa-volume-up::before { 155 | content: "\f611"; 156 | } 157 | .fa-fire-alt::before { 158 | content: "\f5ce"; 159 | } 160 | .fa-question::before { 161 | content: "\f64e"; 162 | } 163 | .fa-minus::before { 164 | content: "\f63b"; 165 | } 166 | .fa-exclamation::before { 167 | content: "\f63c"; 168 | } 169 | .fa-list::before { 170 | content: "\f479"; 171 | } 172 | .fa-adjust::before { 173 | content: "\f288"; 174 | } 175 | .fa-fill-drip::before { 176 | content: "\f4af"; 177 | } 178 | .fa-random::before { 179 | content: "\f544"; 180 | } 181 | .fa-highlighter::before { 182 | content: "\f435"; 183 | } 184 | .fa-arrows-alt-h::before { 185 | content: "\f14a"; 186 | /* content: "\f150"; aspect ratio box */ 187 | } 188 | .fa-egg::before { 189 | content: "\f46f"; 190 | } 191 | .fa-backspace::before { 192 | content: "\f159"; 193 | } 194 | .fa-sign-out-alt::before { 195 | content: "\f1c3"; 196 | } 197 | .fa-calendar::before { 198 | content: "\f1f6"; 199 | } 200 | .fa-tags::before { 201 | content: "\f5b0"; 202 | } 203 | .fa-tag::before { 204 | content: "\f5b0"; 205 | } 206 | .fa-bullseye::before { 207 | content: "\f1de"; 208 | } 209 | .fa-question-circle::before { 210 | content: "\f505"; 211 | } 212 | .fa-sort-down::before { 213 | content: "\f22c"; 214 | } 215 | .fa-sort-up::before { 216 | content: "\f238"; 217 | } 218 | .fa-unlink::before { 219 | content: "\f471"; 220 | } 221 | .fa-pen::before { 222 | content: "\f4c8"; 223 | } 224 | .fa-trash::before { 225 | content: "\f5de"; 226 | } 227 | .fa-plus::before { 228 | content: "\f4fe"; 229 | } 230 | .fa-user-plus::before { 231 | content: "\f4dd"; 232 | } 233 | .fa-sign-in-alt::before { 234 | content: "\f1c3"; 235 | } 236 | .fa-google::before { 237 | content: "\f3f0"; 238 | } 239 | .fa-envelope::before { 240 | content: "\f32f"; 241 | } 242 | .fa-code::before { 243 | content: "\f2c6"; 244 | } 245 | .fa-discord::before { 246 | content: "\f300"; 247 | } 248 | .fa-twitter::before { 249 | content: "\f5ef"; 250 | } 251 | .fa-file-contract::before { 252 | content: "\f38b"; 253 | } 254 | .fa-shield-alt::before { 255 | content: "\f53f"; 256 | } 257 | .fa-lock::before { 258 | content: "\f47b"; 259 | } 260 | .fa-donate::before { 261 | content: "\f64a"; 262 | } 263 | .fa-code-branch::before { 264 | content: "\f2ec"; 265 | } 266 | .fa-copy::before { 267 | content: "\f290"; 268 | } 269 | .fa-play::before { 270 | content: "\f4f5"; 271 | } 272 | .fa-pause::before { 273 | content: "\f4c4"; 274 | } 275 | .fa-github::before { 276 | content: "\f3ed"; 277 | } 278 | .fa-times::before { 279 | content: "\f62a"; 280 | } 281 | .fa-filter::before { 282 | content: "\f3e1"; 283 | } 284 | .fa-bullhorn::before { 285 | content: "\f484"; 286 | } 287 | .fa-ellipsis-v::before { 288 | content: "\f5d3"; 289 | } 290 | .fa-link::before { 291 | content: "\f470"; 292 | } 293 | .fa-file-csv::before { 294 | content: "\f743" !important; 295 | } 296 | .fa-hammer::before { 297 | content: "\f3ff"; 298 | } 299 | .fa-frown-open::before { 300 | content: "\f31d"; 301 | } 302 | .fa-list-ol::before { 303 | content: "\f475"; 304 | } 305 | 306 | /* don't change these icons because they don't have a bootstrap equivalent */ 307 | .fa-circle-notch::before { 308 | font-family: "Font Awesome 5 Free" !important; 309 | font-weight: inherit !important; 310 | vertical-align: 0; 311 | } 312 | .fa-patreon::before { 313 | font-family: "Font Awesome 5 Brands" !important; 314 | font-weight: inherit !important; 315 | } 316 | .fa-tshirt::before { 317 | font-family: "Font Awesome 5 Free" !important; 318 | font-weight: 900 !important; 319 | } 320 | .fa-baby::before { 321 | font-family: "Font Awesome 5 Free" !important; 322 | font-weight: inherit !important; 323 | vertical-align: 0; 324 | } 325 | 326 | /* icon animations*/ 327 | @keyframes spin { 328 | 100% { 329 | transform: rotate(1turn); 330 | } 331 | } 332 | @keyframes spinBackwards { 333 | 100% { 334 | transform: rotate(-1turn); 335 | } 336 | } 337 | @keyframes moveRight { 338 | 50% { 339 | opacity: 0; 340 | transform: translateX(20px) scale(0.9); 341 | } 342 | 51% { 343 | opacity: 0; 344 | transform: translateX(-20px) scale(0.9); 345 | } 346 | } 347 | @keyframes moveLeft { 348 | 50% { 349 | opacity: 0; 350 | transform: translateX(-20px) scale(0.9); 351 | } 352 | 51% { 353 | opacity: 0; 354 | transform: translateX(20px) scale(0.9); 355 | } 356 | } 357 | @keyframes bounce { 358 | 50% { 359 | transform: translateY(-0.5rem); 360 | } 361 | } 362 | @keyframes fade { 363 | 50% { 364 | opacity: 0; 365 | } 366 | } 367 | @keyframes grow { 368 | 50% { 369 | transform: scale(1.2); 370 | } 371 | } 372 | 373 | /* apply icon animations */ 374 | .view-start:hover i { 375 | animation: moveLeft 1s ease infinite; 376 | } 377 | .view-leaderboards:hover i { 378 | animation: bounce 1s ease infinite; 379 | } 380 | .view-about:hover i { 381 | animation: fade 1s ease infinite; 382 | } 383 | .view-settings:hover i { 384 | animation: spin 1s ease infinite; 385 | } 386 | .view-account:hover i, 387 | .view-login:hover i { 388 | animation: grow 1s ease infinite; 389 | } 390 | #restartTestButtonWithSameWordset:hover i, 391 | #restartTestButtonWithSameWordset:focus i { 392 | animation: spinBackwards 1s ease infinite; 393 | } 394 | #restartTestButton:hover i, 395 | #restartTestButton:focus i { 396 | animation: spin 1s ease infinite; 397 | } 398 | #nextTestButton:hover i, 399 | #nextTestButton:focus i { 400 | animation: moveRight 1s ease infinite; 401 | } 402 | #practiseWordsButton:hover i, 403 | #practiseWordsButton:focus i { 404 | animation: bounce 1s ease infinite; 405 | } 406 | #showWordHistoryButton:hover i, 407 | #showWordHistoryButton:focus i { 408 | animation: fade 1s ease infinite; 409 | } 410 | #watchReplayButton:hover i, 411 | #watchReplayButton:focus i { 412 | animation: moveLeft 1s ease infinite; 413 | } 414 | #saveScreenshotButton:hover i, 415 | #saveScreenshotButton:focus i { 416 | animation: grow 1s ease infinite; 417 | } 418 | } -------------------------------------------------------------------------------- /nord.user.css: -------------------------------------------------------------------------------- 1 | /* ==UserStyle== 2 | @name monkeytype nord 3 | @namespace github.com/openstyles/stylus 4 | @version 1.0.0 5 | @description nord theme for monkeytype 6 | @author refact0r 7 | @homepageURL https://github.com/refact0r/monkeytype-themes 8 | @updateURL https://github.com/refact0r/monkeytype-themes/raw/main/nord.user.css 9 | ==/UserStyle== */ 10 | @-moz-document domain("monkeytype.com") { 11 | 12 | /* theme colors */ 13 | * { 14 | --bg-color: #242933; 15 | --main-color: #d8dee9; 16 | --caret-color: #81a1c1; 17 | --sub-color: #81a1c1; 18 | --sub-alt-color: #242933; 19 | --text-color: #d8dee9; 20 | --error-color: #bf616a; 21 | --error-extra-color: #793e44; 22 | --colorful-error-color: #bf616a; 23 | --colorful-error-extra-color: #793e44; 24 | text-shadow: 1px 1px 3px #00000050 !important; 25 | } 26 | 27 | /* background and effects */ 28 | .customBackground { 29 | background-image: url("https://i.imgur.com/ZE9ZvL4.png") !important; 30 | background-image: url("https://regolith-linux.org/images/releases/nord-dark.png") !important; 31 | background-size: cover; 32 | background-position: center !important; 33 | background-repeat: no-repeat; 34 | transition: filter 1s ease !important; 35 | filter: blur(0px) brightness(1); 36 | } 37 | 38 | body[style*="cursor: none"] .customBackground { 39 | filter: blur(0px) brightness(0.8); 40 | } 41 | 42 | /* change logo text */ 43 | #top .logo .text { 44 | visibility: hidden; 45 | } 46 | 47 | #top .logo .text .top:after { 48 | content: 'monkeytype' !important; 49 | visibility: visible; 50 | display: block; 51 | position: relative; 52 | margin-top: -.7rem; 53 | margin-left: -.15rem; 54 | } 55 | 56 | #top .logo .text:after { 57 | content: 'nord' !important; 58 | visibility: visible; 59 | display: block; 60 | position: relative; 61 | margin-top: -2rem; 62 | } 63 | 64 | /* change menu icon colors */ 65 | .view-start { 66 | color: #BF616A; 67 | } 68 | 69 | .view-leaderboards { 70 | color: #D08770; 71 | } 72 | 73 | .view-about { 74 | color: #EBCB8B; 75 | } 76 | 77 | .view-settings { 78 | color: #A3BE8C; 79 | } 80 | 81 | .view-account { 82 | color: #8FBCBB; 83 | } 84 | 85 | #menu>*:hover { 86 | color: var(--text-color) !important; 87 | } 88 | } --------------------------------------------------------------------------------