Highly customizable theme for TypeRacer Redesign, create an awesome dark mode, or use your own colors to really personalize it yourself.
TypeRacer 2021 Redesign Customizable Theme by lachney
Details
Authorlachney
LicenseCC Zero
Categorytyperacer, typing, dark
Created
Updated
Size22 kB
Statistics
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Description
Notes
Edit the theme inside of Stylus, and at the top are the variables you can change. If you lack creativity, you can click here to find some presets that I made. Just copy and paste the settings in. Feel free to open a pull request with your own presets and include them there.
Source code
Source code has over 10K characters, so we truncated it. You can inspect the full source code on install link.@-moz-document domain("play.typeracer.com"), domain("data.typeracer.com") {
/* ==UserStyle==
@name Lachney's Customizible Theme
@description Saving you energy and strain on your eyes!
@namespace Lachney
@version 2.1.0
@homepageURL https://github.com/Lachney/Lachney-TR-Theme
@license CC-BY-SA-4.0
@author Lachney
==/UserStyle== */
/* Settings: Customize the colors and apply your own banner image */
:root {
--main-btn-color: #998290; /* Changes the color of all buttons */
--color-primary: #111; /* Primary color, changes the background color */
--color-secondary: #222; /* Secondary color, changes the navbar and containers */
--color-borders: #333; /* The color of anything that has borders */
--color-accent: #998290; /* Tthe color of links and titles */
--color-font: #eee; /* The color of text */
--track-font-family: monospace; /* The font of the text you're typing.| Ex: Comic Sans MS, Arial, Times New Roman */
--track-font-size: 20px; /* The size of the text you're typing | Ex: 16px, 20px, 26px */
--banner: url("https://xjon.me/assets/Louisiana_cypress_tree_header.webp");
/* Toggle Features */
--featuredUniverses: show; /* Options: show | none | Desc: Toggle to display the Featured Universes List */
--compactLeaderboards: show; /* Options: show | none | Desc: Hides profile pictures from leaderboards to make it more compact */
--schoolEditionPromo: show; /* Options: show | none | Desc: Hides the school edition promo */
--focusMode: show; /* Options: show | none | Desc: Hides all of the cars for you to focus */
--customDesc: "Lachney's Theme v2.1.0" /* Write a custom message to appear in the settings menu. Ex: Follow @TypeRacer on Twitter!*/
}
/* ubuntu-mono-regular - greek-ext_latin_greek_latin-ext_cyrillic_cyrillic-ext */
@font-face {
font-family: 'Ubuntu Mono';
font-style: normal;
font-weight: 400;
src: url('../fonts/ubuntu-mono-v8-greek-ext_latin_greek_latin-ext_cyrillic_cyrillic-ext-regular.eot');
/* IE9 Compat Modes */
src: local('Ubuntu Mono'), local('UbuntuMono-Regular'),
url('../fonts/ubuntu-mono-v8-greek-ext_latin_greek_latin-ext_cyrillic_cyrillic-ext-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('../fonts/ubuntu-mono-v8-greek-ext_latin_greek_latin-ext_cyrillic_cyrillic-ext-regular.woff2') format('woff2'), /* Super Modern Browsers */
url('../fonts/ubuntu-mono-v8-greek-ext_latin_greek_latin-ext_cyrillic_cyrillic-ext-regular.woff') format('woff'), /* Modern Browsers */
url('../fonts/ubuntu-mono-v8-greek-ext_latin_greek_latin-ext_cyrillic_cyrillic-ext-regular.ttf') format('truetype'), /* Safari, Android, iOS */
url('../fonts/ubuntu-mono-v8-greek-ext_latin_greek_latin-ext_cyrillic_cyrillic-ext-regular.svg#UbuntuMono') format('svg');
/* Legacy iOS */
}
.main, .container {
background: var(--color-primary);
}
body, html, p, b, strong {
color: var(--color-font) !important;
}
h1, h2, h3, h4, h5, li, .gameStatusLabel, .scoreboard, .row, .progressBar, .avatar, .lblName, .lblUsername, .rank {
color: var(--color-font) !important;
}
.navigation > a {
color: var(--color-font) !important;
}
.themeHeader#themeHeader {
background: var(--color-secondary);
}
#tr_textHeader {
color: var(--color-font) !important;
}
.enterRace {
background-image: var(--banner) !important;
background-color: rgba(0, 0, 0, 0.4) !important;
background-blend-mode: darken;
background-size: cover !important;
background-position: center !important;
background-repeat: no-repeat !important;
border: none !important;
border-radius: 8px;
}
.bkgnd-yellow, .bkgnd-blue, .bkgnd-purple, .bkgnd-green {
transition: all 175ms;
}
.enterRace h2, h3 {
color: var(--color-font) !important;
}
.userNameLabel {
color: var(--color-font) !important;
}
.mainMenu .practice {
background-color: var(--color-primary) !important;
color: var(--color-font) !important;
border-color: var(--color-borders);
}
.mainMenu .friends {
background-color: var(--color-primary) !important;
color: var(--color-font) !important;
border-color: var(--color-borders);
}
.statsView {
background-image: none;
background-color: var(--color-secondary);
color: var(--color-font) !important;
background-size: cover;
border: var(--color-borders) 1px solid;
border-radius: 8px;
}
.StatsTable table tr.headerRow td, .section--boxed {
background-color: var(--color-borders) !important;
border: 1px solid var(--color-borders);
}
table.themeHeader table.mainUserInfoBox > tbody > tr > td {
border-color: var(--color-borders);
}
table.themeHeader table.mainUserInfoBox > tbody > tr:first-child {
background-color: #444;
border-color: var(--color-borders);
}
table.themeHeader table.mainUserInfoBox > tbody > tr.datarow {
border-color: var(--color-borders);
background-color: var(--color-borders)
}
table.themeHeader table.mainUserInfoBox {
border: none;
}
.OptionsWidget .OptionsWidgetBody li:nth-child(2) .gwt-Anchor.off {
background: var(--color-primary);
border-color: var(--color-borders);
}
#tstats > table > tbody > tr > td {
color: var(--color-font) !important;
}
.mobileNav {
background: var(--color-secondary);
color: var(--color-font);
}
.mobileNav a {
color: var(--color-font);
}
.mobileNav a:hover {
color: var(--color-font);
background: var(--color-borders);
}
.mobileMenu li + li {
border-top: #555 1px solid
}
#tr_textHeader {
margin: 0 auto;
text-align: center !important;
padding-bottom: 20px
}
table.themeHeader {
background: var(--color-primary);
position: relative;
}
#school-edition-promo {
background-image: none;
background-color: var(--color-secondary);
color: var(--color-font) !important;
background-size: cover;
border: var(--color-borders) 1px solid;
border-radius: 8px;
max-width: 1200px !important;
display: var(--schoolEditionPromo) !important;
}
.popupContent span {
color: var(--color-font) !important;
}
#school-edition-promo ul li {
background-image: url("https://github.com/Lachney/TypeRacer-Responsive-Dark-Theme/blob/master/assets/arrow.png?raw=true");
background-position: 0px 7px;
}
.StatsTable table tr td {
background: var(--color-secondary) !important;
color: var(--color-font);
border: 1px solid var(--color-borders);
}
.horizontalCountdownPopup .lightLabel .countdownPopup {
background-color: var(--color-secondary) !important;
}
table.inputPanel div {
font-family: var(--track-font-family);
font-size: var(--track-font-size);
}
.mainViewport table.inputPanel {
border: none;
}
.mainViewport table.scoreboard > tbody > tr table tr td:nth-child(2) .rankPanelWpm {
color: var(--color-font) !important;
}
.chrome_1, .chrome_m, .chrome_r, .mainViewport, table.inputPanel, .roomSection, .messagesPanel, .users-list, .AdvancedTextBox, .txtChatMsgInput, .AdvancedTextBox-unfocused {
background-color: var(--color-secondary) !important;
border-radius: 8px;
padding: 10px;
}
.messagesPanel, .users-list, .AdvancedTextBox, .txtChatMsgInput, .AdvancedTextBox-unfocused {
border: 1px solid var(--color-borders) !important;
}
#dUI > table > tbody > tr > td:nth-child(1) > div > div.mainViewport > table > tbody > tr:nth-child(4) > td > div {
border: none;
}
.txtInput {
background-color: var(--color-secondary) !important;
color: var(--color-font) !important;
}
table > tbody > tr:nth-child(4) > td > div > table > tbody > tr:nth-child(2) > td > table > tbody > tr > td:nth-child(1) {
width: 200px !important;
}
.popupContent, .DialogBox, .PlayerInfoPopup, .trPopupDialog, .gwt-MenuBar, .textInfoHeader, .mainViewport table.textInfoView > tbody > tr:nth-child(3) td {
background-color: var(--color-secondary) !important;
color: var(--color-font) !important;
}
.textInfoHeader, .mainViewport table.textInfoView {
border: 1px solid var(--color-borders);
}
.gwt-MenuItem:hover {
background-color: #444 !important;
transition: all 75ms;
}
.DialogBox.trPopupDialog {
-webkit-box-shadow: 1px 2px 7px var(--color-font);
box-shadow: 1px 2px 7px var(--color-font);
}
.AdContainer, .AdContainer-728x90 {
background-color: var(--color-secondary) !important;
color: var(--color-font) !important;
border: none !important;
}
.OptionsWidget, .eastWidget {
background-color: var(--color-secondary) !important;
color: var(--color-font) !important;
border: none !important;
}
/* Race Replay */
.mainViewport table.textInfoView > tbody > tr:nth-child(3) td,
.textInfoView .textInfoHeader {border:none}
.mainViewport...