This is regarding the DarkReader snippet which is used to recolor and restyle the main
fullscreen-for-googletasks.com.
This code uses so many absolute selectors which are unnecessary.
by @zod
This guide will show you a method I've identified to control the new-tab page and force it to navigate to wherever you desire, and then provide some styles for use with DarkReader DevTools in order to restyle the frontend to fit my aesthetic more effectively.
If you find it helpful, sponsor me or something idk
- Changing color scheme of dark mode so as to include more than just... blue
- replace all fonts with
JetBrains Mono(best font) via googlefontscss
so not much.
CHROME: Navigate here to find the aforementioned extension.
FIREFOX: Navigate here to find a similar extension.
This will allow you to set your New Tab window to anything you would like. I have chosen fullscreen-for-googletasks.com as of now. (04/25/2023)
Navigate here and follow the instructions to download Dark Reader. This, while also being an excellent plugin, will allow us to inject CSS into specific pages via the DevTools.
Navigate there, then find the gear dropdown menu in the top-right and click on Advanced Settings.
After this, enable Allow Dark Mode (then choose Dark or System) .
Insert the following mostly-CSS code into the Dark Reader DevTools wherever you please, then hit Apply.
Enjoy!
fullscreen-for-googletasks.com
CSS
These lines are unique to Dark Reader, and define
- the target website to style
- the styles to apply.
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,400;0,600;0,700;1,400;1,700&display=swap');
#root > div > main {
font-family: 'JetBrains Mono', monospace !important;
background-color: rgb(43,42,44) !important;
}
#root > div > main > div {
background-color: rgb(23,23,23) !important;
}
#root > div > main > div > span {
background-color: #00000000 !important;
}
#root > div > main > div > ol {
background-color: rgb(60,59,60) !important;
}
#root > div > main > div > ol > div > li {
background-color: rgb(60,59,60) !important;
}
#root > div > main > div > ol > div > li > div > div {
background-color: rgb(60,59,60) !important;
}
#root > div > main > div > ol > div:nth-child(2) > li > div > div.checkbox > div.circle-icon {
background-color: rgb(31,81,124) !important;
}
#root > div > main > div > div > button {
background-color: #175BDD !important;
}
#root > div > main > div > div > div > div > textarea {
background-color: #00000000;
}
img::after > div > textarea {
background-color: rgb(83,84,82) !important;
}
#root > div > main > div > div > div > div > div {
background-color: rgb(23,23,23) !important;
font-weight: 700;
}
#root > div > main > div > div > div > div > div > textarea {
//font-family: Roboto,-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol"!important;
font-weight: 700;
}
#root > div > main > div > span {
display: hidden !important;
color: rgb(32,32,32) !important;
}
body, input, textarea {
font-family: 'JetBrains Mono', monospace !important;
}
#root > div > main > div:nth-child(1) {
background-color: rgb(32,32,32) !important;
}
#root > div > main > div > span > kbd {
border: none !important;
}And finally, another non-CSS line to delimit the styling sections for Dark Reader.
================================