How do I change the template to have a white background and black text? I understand the black and yellow is for accessibility reasons, but I can follow WCAG 2.0 guidelines using black text on white background, I think :)
I have tried changing practically anything black(#000000), to white (#FFFFFF). Or even anything close. I'd look up color codes and try and see where they were used on the site. I used https://unminify.com to get the code in a condition I could read it.
Here is what I got, but still no luck.
html {
line-height: 1.15;
-webkit-text-size-adjust: 100%;
}
body {
margin: 0;
}
h1 {
font-size: 2em;
margin: 0.67em 0;
}
hr {
box-sizing: content-box;
height: 0;
overflow: visible;
}
pre {
font-family: monospace, monospace;
font-size: 1em;
}
a {
background-color: #ffffff;
}
abbr[title] {
border-bottom: none;
text-decoration: underline;
text-decoration: underline dotted;
}
b,
strong {
font-weight: 700;
}
code,
kbd,
samp {
font-family: monospace, monospace;
font-size: 1em;
}
small {
font-size: 80%;
}
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sub {
bottom: -0.25em;
}
sup {
top: -0.5em;
}
img {
border-style: none;
}
button,
input,
optgroup,
select,
textarea {
font-family: inherit;
font-size: 100%;
line-height: 1.15;
margin: 0;
}
button,
input {
overflow: visible;
}
button,
select {
text-transform: none;
}
[type="button"],
[type="reset"],
[type="submit"],
button {
-webkit-appearance: button;
}
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner,
button::-moz-focus-inner {
border-style: none;
padding: 0;
}
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring,
button:-moz-focusring {
outline: 1px dotted ButtonText;
}
fieldset {
padding: 0.35em 0.75em 0.625em;
}
legend {
box-sizing: border-box;
color: inherit;
display: table;
max-width: 100%;
padding: 0;
white-space: normal;
}
progress {
vertical-align: baseline;
}
textarea {
overflow: auto;
}
[type="checkbox"],
[type="radio"] {
box-sizing: border-box;
padding: 0;
}
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
height: auto;
}
[type="search"] {
-webkit-appearance: textfield;
outline-offset: -2px;
}
[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
::-webkit-file-upload-button {
-webkit-appearance: button;
font: inherit;
}
details {
display: block;
}
summary {
display: list-item;
}
[hidden],
template {
display: none;
}
h1 {
font-size: 3em;
line-height: 1.25;
margin-bottom: 0.5em;
}
h2 {
font-size: 2.5em;
line-height: 1.2;
margin-bottom: 0.6em;
}
h3 {
font-size: 2em;
line-height: 1.125;
margin-bottom: 0.75em;
}
h4 {
font-size: 1.5em;
margin-bottom: 1em;
}
h4,
h5 {
line-height: 1.5em;
}
h5 {
font-size: 1.25em;
margin-bottom: 1.2em;
}
h6 {
font-size: 1em;
line-height: 1.5em;
margin-bottom: 1.5em;
}
body,
ol,
p,
pre,
ul {
font-size: 1em;
line-height: 1.5;
}
ol,
p,
pre,
ul {
margin-bottom: 1.5em;
}
h1 {
font-size: 2.074rem;
}
h1,
h2 {
line-height: 2.4rem;
margin-bottom: 1.36rem;
}
h2 {
font-size: 1.728rem;
}
h3 {
font-size: 1.4rem;
}
h3,
h4 {
line-height: 1.6rem;
margin-bottom: 1.36rem;
}
h4 {
font-size: 1.2rem;
}
h5,
h6 {
font-size: 1rem;
line-height: 1.6rem;
margin-bottom: 1.36rem;
}
body,
ol,
p,
pre,
ul {
font-size: 1rem;
line-height: 1.6;
}
ol,
p,
pre,
ul {
margin-bottom: 1.36rem;
}
@media (min-width: 600px) {
h1 {
font-size: 4.3978rem;
line-height: 4.4rem;
}
h1,
h2 {
margin-bottom: 1.496rem;
}
h2 {
font-size: 3.1097rem;
line-height: 3.52rem;
}
h3 {
font-size: 2.1989rem;
line-height: 2.64rem;
margin-bottom: 1.496rem;
}
h4 {
font-size: 1.5554rem;
}
h4,
h5 {
line-height: 1.76rem;
margin-bottom: 1.496rem;
}
h5,
h6 {
font-size: 1.1rem;
}
h6 {
line-height: 1.76rem;
margin-bottom: 1.496rem;
}
body,
ol,
p,
pre,
ul {
font-size: 1.1rem;
line-height: 1.6;
}
ol,
p,
pre,
ul {
margin-bottom: 1.496rem;
}
}
@media (min-width: 1200px) {
h1 {
font-size: 6.0756rem;
line-height: 6.72rem;
}
h1,
h2 {
margin-bottom: 1.632rem;
}
h2 {
font-size: 4.05rem;
line-height: 4.8rem;
}
h3 {
font-size: 2.7rem;
line-height: 2.88rem;
margin-bottom: 1.632rem;
}
h4 {
font-size: 1.8rem;
}
h4,
h5 {
line-height: 1.92rem;
margin-bottom: 1.632rem;
}
h5,
h6 {
font-size: 1.2rem;
}
h6 {
line-height: 1.92rem;
margin-bottom: 1.632rem;
}
body,
ol,
p,
pre,
ul {
font-size: 1.2rem;
line-height: 1.6;
}
ol,
p,
pre,
ul {
margin-bottom: 1.632rem;
}
}
th {
font-weight: 600;
}
td,
th {
border-bottom: 1px solid #595959;
overflow: auto;
padding: 0.75em;
text-align: left;
vertical-align: top;
}
thead th {
border-bottom: 1px solid #f9c412;
}
table {
display: table;
}
code,
pre,
table {
overflow-x: auto;
}
pre {
font-family: Consolas, Monaco, Andale Mono, Ubuntu Mono, monospace;
}
pre code:not([class]) {
padding: 1.5em;
overflow-x: scroll;
}
code,
kbd {
border-radius: 0.3em;
color: #e2777a;
padding: 0 0.3em;
font-family: Consolas, Monaco, Andale Mono, Ubuntu Mono, monospace;
font-size: 90%;
}
code,
kbd {
background: #2d2d2d;
}
kbd {
color: #7ec699;
}
mark {
background: #f9c412;
padding: 0 0.3em;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: eb_garamondregular;
}
h2,
h4,
h6 {
font-style: italic;
}
a {
color: #f9c412;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
small {
color: #ccc;
}
hr {
border-bottom: 1px solid #eee;
}
figcaption {
color: #ccc;
margin-top: 0.75em;
font-size: 80%;
}
dt {
font-weight: 600;
}
@media (max-width: 767px) {
fieldset {
min-width: 0;
}
fieldset * {
flex-grow: 1;
page-break-before: auto;
}
x:-moz-any-link {
display: table-cell;
}
}
html {
font-family: eb_garamondregular;
}
@supports (font-variation-settings: normal) {
html {
font-family: eb_garamondregular;
}
}
form {
padding: 1.5em 1.5em 0;
border: 0.2rem solid #202020;
margin-bottom: 1.5em;
}
form small {
font-style: italic;
}
fieldset {
padding: 0;
margin: 0;
}
fieldset legend {
font-size: 150%;
margin-bottom: 0.75em;
}
button,
input,
select,
textarea {
border-radius: 0.3em;
display: inline-block;
padding: 0.75em;
max-width: 100%;
}
button + input[type="checkbox"],
button + input[type="radio"],
button + label,
input + input[type="checkbox"],
input + input[type="radio"],
input + label,
select + input[type="checkbox"],
select + input[type="radio"],
select + label,
textarea + input[type="checkbox"],
textarea + input[type="radio"],
textarea + label {
page-break-before: always;
}
input,
select,
textarea {
margin-bottom: 1.5em;
}
textarea {
min-height: 7.5em;
min-width: 15em;
}
label {
display: inline-block;
}
label + * {
page-break-before: always;
}
fieldset > * {
display: block;
}
input,
select {
display: inline;
}
fieldset > *,
form > :not(fieldset) {
margin-right: 0.75em;
}
button,
input[type="reset"],
input[type="submit"] {
background: #f2f2f2;
color: #191919;
cursor: pointer;
display: inline-block;
padding: 0.75em 1.5em;
text-align: center;
margin: 0 0.75em 1.5em 0;
}
button:hover,
input[type="reset"]:hover,
input[type="submit"]:hover {
background: #d9d9d9;
color: #000;
}
button[disabled],
input[type="reset"][disabled],
input[type="submit"][disabled] {
background: #e6e6e6;
color: #404040;
cursor: not-allowed;
}
button:not([disabled]),
button[type="submit"],
input[type="submit"] {
background: #f9c412;
color: #181818;
}
button:not([disabled]):hover,
button[type="submit"]:hover,
input[type="submit"]:hover {
background: #ba9005;
color: #000;
}
input[type="color"],
input[type="date"],
input[type="datetime-local"],
input[type="datetime"],
input[type="email"],
input[type="file"],
input[type="month"],
input[type="number"],
input[type="password"],
input[type="phone"],
input[type="range"],
input[type="search"],
input[type="tel"],
input[type="text"],
input[type="time"],
input[type="url"],
input[type="week"],
select,
textarea {
border: 1px solid #595959;
padding: 0.75em;
}
input[type="checkbox"],
input[type="radio"] {
flex-grow: 0;
margin: 0.75em 0.375em 0.75em 0;
vertical-align: middle;
}
input[type="checkbox"] + label,
input[type="radio"] + label {
page-break-before: avoid;
}
select[multiple] {
min-width: 15em;
}
* {
border: 0;
box-sizing: border-box;
}
img {
max-width: 100%;
}
body {
font-family: eb_garamondregular;
background: #181818;
color: #eee;
}
section {
margin-left: auto;
margin-right: auto;
width: 900px;
}
#menu-toggle {
display: none;
}
header label {
display: block;
}
#menu-toggle:checked ~ a {
display: block;
padding: 0.75em 0;
margin: 0 1.5em;
text-align: center;
border-bottom: 1px solid #ccc;
}
#menu-toggle:checked ~ a:last-of-type {
padding-bottom: 0;
border: 0;
}
#menu-toggle:checked ~ label {
border-bottom: 1px solid #aaa;
padding-bottom: 0.75em;
}
#menu-toggle:not(:checked) ~ a {
display: none;
}
header {
padding: 4.5em 1.5em 3em;
width: 37.5em;
margin: 0 auto;
text-align: center;
max-width: 100%;
display: flex;
align-items: center;
flex-direction: column;
}
header p {
margin-top: 0;
}
header nav {
position: fixed;
top: 0;
left: 0;
width: 100vw;
padding: 0.375em 1.5em;
background: hsla(0, 0%, 100%, 0.9);
font-weight: 200;
text-align: right;
}
header nav h1 {
float: left;
font-size: inherit;
line-height: inherit;
margin: 0;
text-align: left;
}
header nav a {
font-weight: 700;
text-decoration: none;
font-family: eb_garamondregular;
color: #181818;
margin-left: 1.5em;
}
header nav a:first-of-type {
margin-left: auto;
}
header nav a:last-of-type {
margin-right: 1.5em;
}
header nav label {
color: #000;
cursor: pointer;
margin: 0;
font-style: normal;
text-align: right;
}
main {
max-width: 70rem;
margin: 0 auto;
border-top: 0.5px solid #ccc;
}
footer {
background: rgba(0, 0, 0, 0.8);
color: #fff;
padding: 3em;
text-align: center;
}
footer > * {
margin: 1.5em;
}
footer nav a img {
vertical-align: middle;
}
footer nav,
footer p {
font-size: 90%;
}
article {
max-width: 100%;
padding: 1.5em;
width: 37.5em;
margin: 0 auto;
}
ol,
ul {
margin-top: 0;
}
li dl,
li ol,
li ul {
margin-bottom: 0;
}
dl {
display: inline-block;
margin: 0 0 1.5em;
}
dt {
padding-top: 0.75em;
padding-left: 0.75em;
}
dd {
padding-bottom: 0.75em;
margin-left: 2.25em;
}
dd + dt {
border-top: 1px solid #f9c412;
}
blockquote {
border-left: 1px solid #f9c412;
padding: 0 1.5em;
margin: 1.5em 0 1.5em 1.5em;
}
blockquote footer {
background: none;
display: block;
color: #ccc;
padding: 0.75em 0;
font-size: 90%;
text-align: start;
}
img {
height: auto;
margin: 0 auto;
}
figure {
margin: 1.5em;
}
figure img {
display: block;
}
code[class*="language-"],
pre[class*="language-"] {
color: #ccc;
background: none;
font-family: Consolas, Monaco, Andale Mono, Ubuntu Mono, monospace;
text-align: left;
white-space: pre;
word-spacing: normal;
word-break: normal;
word-wrap: normal;
line-height: 1.5;
-moz-tab-size: 4;
-o-tab-size: 4;
tab-size: 4;
-webkit-hyphens: none;
-moz-hyphens: none;
-ms-hyphens: none;
hyphens: none;
}
pre[class*="language-"] {
padding: 1em;
margin: 0.5em 0;
overflow: auto;
}
:not(pre) > code[class*="language-"],
pre[class*="language-"] {
background: #2d2d2d;
}
:not(pre) > code[class*="language-"] {
padding: 0.1em;
border-radius: 0.3em;
white-space: normal;
}
.token.block-comment,
.token.cdata,
.token.comment,
.token.doctype,
.token.prolog {
color: #999;
}
.token.punctuation {
color: #ccc;
}
.token.attr-name,
.token.deleted,
.token.namespace,
.token.tag {
color: #e2777a;
}
.token.function-name {
color: #6196cc;
}
.token.boolean,
.token.function,
.token.number {
color: #f08d49;
}
.token.class-name,
.token.constant,
.token.property,
.token.symbol {
color: #f8c555;
}
.token.atrule,
.token.builtin,
.token.important,
.token.keyword,
.token.selector {
color: #cc99cd;
}
.token.attr-value,
.token.char,
.token.regex,
.token.string,
.token.variable {
color: #7ec699;
}
.token.entity,
.token.operator,
.token.url {
color: #67cdcc;
}
.token.bold,
.token.important {
font-weight: 700;
}
.token.italic {
font-style: italic;
}
.token.entity {
cursor: help;
}
.token.inserted {
color: green;
}
Firefox or any browser Network tools helped a little, but I was not successful. I don't code, but I thought I could try it without help. I was wrong. Can anyone point me in the right direction.
![dependabot[bot] avatar](https://avatars.githubusercontent.com/in/29110?v=4 "dependabot[bot]")
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent