Help with light mode

Code Help HTML/CSS/JS
1

Question:
So I’m adding light mode and dark mode differences to my custom CSS stylesheet. Dark mode works fine but when I switch to light mode it has this weird border I can’t get rid of around the html.

Repl link:
https://replit.com/@SalladShooter/MarkUpCSS?v=1#index.html

CSS:

:root {
  --red: #ff6666;
  --orange: #ffa500;
  --yellow: #ffff66;
  --green: #66ff66;
  --blue: #6666ff;
  --purple: #800080;
  --gray: #3a373a;
  --white: #ffffff;
  --black: #000000;
  
  --backColor: #26283b;
  --foreColor: #ffffff;
}

/*@media (prefers-color-scheme: light) {
  :root {
    --backColor: white;
    --foreColor: black;
  }
}*/

.lightMode {
  :root {
    --backColor: white;
    --foreColor: black;
  }
  body {
    background-color: var(--backColor);
    color: var(--foreColor)
  }
}

.darkMode {
  :root {
    --backcolor: #26283b;
    --foreColor: white;
  }
  body {
    background-color: var(--backColor);
    color: var(--foreColor)
  }
}

html {
  width: 100%;
  height: 100%;
  font-family: Arial;
}

body {
  color: var(--foreColor);
  background-color: var(--backColor);
}

.redFore {
  color: var(--red);
}

.orangeFore {
  color: var(--orange);
}

.yellowFore {
  color: var(--yellow);
}

.greenFore {
  color: var(--green);
}

.blueFore {
  color: var(--blue);
}

.purpleFore {
  color: var(--purple);
}

.grayFore {
  color: var(--gray);
}

.blackFore {
  color: var(--black);
}

.whiteFore {
  color: var(--white);
}

.redBack {
  color: white;
  background-color: var(--red);
}

.orangeBack {
  color: white;
  background-color: var(--orange);
}

.yellowBack {
  background-color: var(--yellow);
  color: black;
}

.greenBack {
  background-color: var(--green);
  color: black;
}

.blueBack {
  color: white;
  background-color: var(--blue);
}

.purpleBack {
  color: white;
  background-color: var(--purple);
}

.grayBack {
  color: white;
  background-color: var(--gray);
}

.blackBack {
  color: white;
  background-color: var(--black);
}

.whiteBack {
  background-color: var(--white);
  color: black;
}

h1.redBack, h2.redBack, h3.redBack, h4.redBack, h5.redBack, h6.redBack {
  background-color: var(--red);
}

h1.orangeBack, h2.orangeBack, h3.orangeBack, h4.orangeBack, h5.orangeBack, h6.orangeBack {
  background-color: var(--orange);
}

h1.yellowBack, h2.yellowBack, h3.yellowBack, h4.yellowBack, h5.yellowBack, h6.yellowBack {
  background-color: var(--yellow);
  color: black;
}

h1.greenBack, h2.greenBack, h3.greenBack, h4.greenBack, h5.greenBack, h6.greenBack {
  background-color: var(--green);
  color: black;
}

h1.blueBack, h2.blueBack, h3.blueBack, h4.blueBack, h5.blueBack, h6.blueBack {
  background-color: var(--blue);
}

h1.purpleBack, h2.purpleBack, h3.purpleBack, h4.purpleBack, h5.purpleBack, h6.purpleBack {
  background-color: var(--purple);
}

h1.grayBack, h2.grayBack, h3.grayBack, h4.grayBack, h5.grayBack, h6.grayBack {
  background-color: var(--gray);
}

h1.blackBack, h2.blackBack, h3.blackBack, h4.blackBack, h5.blackBack, h6.blackBack {
  background-color: var(--black);
}

h1.whiteBack, h2.whiteBack, h3.whiteBack, h4.whiteBack, h5.whiteBack, h6.whiteBack {
  background-color: var(--white);
  color: white;
}

html {
  height: 100%;
  width: 100%;
  font-family: Arial;
  background-color: #26283b;
  color: white;
}

h1, h2, h3 {
  padding: 0.25em;
  border-radius: 0.25em;
  display: inline-block;
  margin-bottom: 0em;
}

h4, h5, h6 {
  margin-bottom: 0em;
}

.br {
  display: block;
  margin-bottom: 0em;
}

blockquote.red {
  border-left: 6px var(--red) solid;
  padding: 0.5em;
}

blockquote.orange {
  border-left: 6px var(--orange) solid;
  padding: 0.5em;
}

blockquote.yellow {
  border-left: 6px var(--yellow) solid;
  padding: 0.5em;
}

blockquote.green {
  border-left: 6px var(--green) solid;
  padding: 0.5em;
}

blockquote.blue {
  border-left: 6px var(--blue) solid;
  padding: 0.5em;
}

blockquote.purple {
  border-left: 6px var(--purple) solid;
  padding: 0.5em;
}

blockquote.gray {
  border-left: 6px var(--gray) solid;
  padding: 0.5em;
}

blockquote.black {
  border-left: 6px var(--black) solid;
  padding: 0.5em;
}

blockquote.white {
  border-left: 6px var(--white) solid;
  padding: 0.5em;
}

table.red {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
  border: 2px var(--red) solid;
}

table.orange {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
  border: 2px var(--orange) solid;
}

table.yellow {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
  border: 2px var(--yellow) solid;
}

table.green {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
  border: 2px var(--green) solid;
}

table.blue {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
  border: 2px var(--blue) solid;
}

table.purple {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
  border: 2px var(--purple) solid;
}

table.gray {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
  border: 2px var(--gray) solid;
}

table.black {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
  border: 2px var(--black) solid;
}

table.white {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
  border: 2px var(--white) solid;
}

td.red, th.red {
  border: 1px solid var(--red);
  text-align: left;
  padding: 8px;
}

td.orange, th.orange {
  border: 1px solid var(--red);
  text-align: left;
  padding: 8px;
}

td.yellow, th.yellow {
  border: 1px solid var(--red);
  text-align: left;
  padding: 8px;
  color: black;
}

td.green, th.green {
  border: 1px solid var(--red);
  text-align: left;
  padding: 8px;
  color: black;
}

td.blue, th.blue {
  border: 1px solid var(--red);
  text-align: left;
  padding: 8px;
}

td.purple, th.purple {
  border: 1px solid var(--red);
  text-align: left;
  padding: 8px;
}

td.gray, th.gray {
  border: 1px solid var(--red);
  text-align: left;
  padding: 8px;
}

td.black, th.black {
  border: 1px solid var(--red);
  text-align: left;
  padding: 8px;
}

td.white, th.white {
  border: 1px solid var(--red);
  text-align: left;
  padding: 8px;
  color: black
}

tr:nth-child(even).red {
  background-color: var(--red);
}

tr:nth-child(even).orange {
  background-color: var(--orange);
}

tr:nth-child(even).yellow {
  background-color: var(--yellow);
}

tr:nth-child(even).green {
  background-color: var(--green);
}

tr:nth-child(even).blue {
  background-color: var(--blue);
}

tr:nth-child(even).purple {
  background-color: var(--purple);
}

tr:nth-child(even).gray {
  background-color: var(--gray);
}

tr:nth-child(even).black {
  background-color: var(--black);
}

tr:nth-child(even).white {
  background-color: var(--white);
}

tr:nth-child(odd) {
  background-color: transparent;
}

tr:first-child {
  background-color: transparent;
}

code.redBack {
  font-family: Arial;
  background-color: var(--red);
  border-radius: 0.25em;
  display: inline-block;
  padding-left: 0.25em;
  padding-right: 0.25em;
  margin-top: -0.295em;
  margin-bottom: -0.295em;
  padding: 0.1em;
}

code.orangeBack {
  font-family: Arial;
  background-color: var(--orange);
  border-radius: 0.25em;
  display: inline-block;
  margin-left: 0.1em;
  margin-right: 0.1em;
  margin-top: -0.275em;
  padding: 0.1em;
  margin-bottom: -0.275em;
}

code.yellowBack {
  font-family: Arial;
  color: black;
  background-color: var(--yellow);
  border-radius: 0.25em;
  display: inline-block;
  padding-left: 0.25em;
  padding-right: 0.25em;
  margin-top: -0.295em;
  padding: 0.1em;
  margin-bottom: -0.295em;
}

code.greenBack {
  font-family: Arial;
  color: black;
  background-color: var(--green);
  border-radius: 0.25em;
  display: inline-block;
  padding-left: 0.25em;
  padding-right: 0.25em;
  margin-top: -0.295em;
  padding: 0.1em;
  margin-bottom: -0.295em;
}

code.blueBack {
  font-family: Arial;
  background-color: var(--blue);
  border-radius: 0.25em;
  display: inline-block;
  padding-left: 0.25em;
  padding-right: 0.25em;
  margin-top: -0.295em;
  padding: 0.1em;
  margin-bottom: -0.295em;
}

code.purpleBack {
  font-family: Arial;
  background-color: var(--purple);
  border-radius: 0.25em;
  display: inline-block;
  padding-left: 0.25em;
  padding-right: 0.25em;
  margin-top: -0.295em;
  padding: 0.1em;
  margin-bottom: -0.295em;
}

code.grayBack {
  font-family: Arial;
  background-color: var(--gray);
  border-radius: 0.25em;
  display: inline-block;
  padding-left: 0.25em;
  padding-right: 0.25em;
  margin-top: -0.295em;
  padding: 0.1em;
  margin-bottom: -0.295em;
}

code.blackBack {
  font-family: Arial;
  background-color: var(--black);
  border-radius: 0.25em;
  display: inline-block;
  padding-left: 0.25em;
  padding-right: 0.25em;
  margin-top: -0.295em;
  margin-bottom: -0.295em;
  padding: 0.1em;
}

code.whiteBack {
  font-family: Arial;
  color: black;
  background-color: var(--black);
  border-radius: 0.25em;
  display: inline-block;
  padding-left: 0.25em;
  padding: 0.1em;
  padding-right: 0.25em;
  margin-top: -0.295em;
  margin-bottom: -0.295em;
}

comment.redBack {
  background-color: var(--red);
  border-radius: 0.25em;
  display: inline-block;
  padding: 0.25em;
  margin: 0.1em;
}

comment.orangeBack {
  background-color: var(--orange);
  border-radius: 0.25em;
  display: inline-block;
  padding: 0.25em;
  margin: 0.1em;
}

comment.yellowBack {
  background-color: var(--yellow);
  border-radius: 0.25em;
  display: inline-block;
  color: black;
  padding: 0.25em;
  margin: 0.1em;
}

comment.greenBack {
  background-color: var(--green);
  border-radius: 0.25em;
  color: black;
  display: inline-block;
  padding: 0.25em;
  margin: 0.1em;
}

comment.blueBack {
  background-color: var(--blue);
  border-radius: 0.25em;
  display: inline-block;
  padding: 0.25em;
  margin: 0.1em;
}

comment.purpleBack {
  background-color: var(--purple);
  border-radius: 0.25em;
  display: inline-block;
  padding: 0.25em;
  margin: 0.1em;
}

comment.grayBack {
  background-color: var(--gray);
  border-radius: 0.25em;
  display: inline-block;
  padding: 0.25em;
  margin: 0.1em;
}

comment.blackBack {
  background-color: var(--black);
  border-radius: 0.25em;
  display: inline-block;
  padding: 0.25em;
  margin: 0.1em;
}

comment.whiteBack {
  background-color: var(--white);
  color: black;
  border-radius: 0.25em;
  display: inline-block;
  padding: 0.25em;
  margin: 0.1em;
}

a.redFore {
  color: var(--red);
}

a.orangeFore {
  color: var(--orange);
}

a.yellowFore {
  color: var(--yellow);
}

a.greenFore {
  color: var(--green);
}

a.blueFore {
  color: var(--blue);
}

a.purpleFore {
  color: var(--purple);
}

a.grayFore {
  color: var(--gray);
}

a.blackFore {
  color: var(--black);
}

a.whiteFore {
  color: var(--white);
}

bar.red {
  display: inherit;
  width: auto;
  border-bottom: 3px solid var(--red);
  margin-bottom: 3em;
  margin-top: 2em;
  padding: 0.5em;
}

bar.orange {
  display: inherit;
  width: auto;
  border-bottom: 3px solid var(--orange);
  margin-bottom: 3em;
  margin-top: 2em;
  padding: 0.5em;
}

bar.yellow {
  display: inherit;
  width: auto;
  border-bottom: 3px solid var(--yellow);
  margin-bottom: 3em;
  margin-top: 2em;
  padding: 0.5em;
}

bar.green {
  display: inherit;
  width: auto;
  border-bottom: 3px solid var(--green);
  margin-bottom: 3em;
  margin-top: 2em;
  padding: 0.5em;
}

bar.blue {
  display: inherit;
  width: auto;
  border-bottom: 3px solid var(--blue);
  margin-bottom: 3em;
  margin-top: 2em;
  padding: 0.5em;
}

bar.purple {
  display: inherit;
  width: auto;
  border-bottom: 3px solid var(--purple);
  margin-bottom: 3em;
  margin-top: 2em;
  padding: 0.5em;
}

bar.gray {
  display: inherit;
  width: auto;
  border-bottom: 3px solid var(--gray);
  margin-bottom: 3em;
  margin-top: 2em;
  padding: 0.5em;
}

bar.black {
  display: inherit;
  width: auto;
  border-bottom: 3px solid var(--black);
  margin-bottom: 3em;
  margin-top: 2em;
  padding: 0.5em;
}

bar.white {
  display: inherit;
  width: auto;
  border-bottom: 3px solid var(--white);
  margin-bottom: 3em;
  margin-top: 2em;
  padding: 0.5em;
}

high.redBack {
  background-color: var(--red);
  padding: 0.1em;
}

high.orangeBack {
  background-color: var(--orange);
  padding: 0.1em;
}

high.yellowBack {
  background-color: var(--yellow);
  padding: 0.1em;
  color: black;
}

high.greenBack {
  background-color: var(--green);
  padding: 0.1em;
  color: black;
}

high.blueBack {
  background-color: var(--blue);
  padding: 0.1em;
}

high.purpleBack {
  background-color: var(--purple);
  padding: 0.1em;
}

high.grayBack {
  background-color: var(--gray);
  padding: 0.1em;
}

high.blackBack {
  background-color: var(--black);
  padding: 0.1em;
}

high.whiteBack {
  color: black;
  background-color: var(--white);
  padding: 0.1em;
}

del {
  background-color: var(--red);
}

ins {
  background-color: var(--green);
  color: black;
}

button {
  font-size: 1em;
  border: 0px white solid;
  padding: 0.25em;
  border-radius: 0.25em;
}
2

How do I enable light mode? Can I have a screenshot?

3

Im changing it to be like this:

HTML:

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>replit</title>
  <link href="MarkUp.css" rel="stylesheet" type="text/css" />
</head>

<body class="lightMode">
  <h1 class="redBack">Heading 1</h1>
  <span class="br"></span>
  <h2 class="orangeBack">Heading 2</h2>
  <span class="br"></span>
  <h3 class="yellowBack">Heading 3</h3>
  <span class="br"></span>
  <h4>Heading 4</h4>
  <span class="br"></span>
  <h5>Heading 5</h5>
  <span class="br"></span>
  <h6>Heading 6</h6>
  <br>
  <blockquote class="green">💬 This Is A Blockquote <blockquote class="blue">Blockquote in blockquote</blockquote></blockquote>
  <table class="purple">
    <tr class="purple">
      <th>A</th>
      <th>B</th>
      <th>C</th>
    </tr>
    <tr class="purple">
      <th>1</th>
      <th>1</th>
      <th>1</th>
    </tr>
    <tr class="purple">
      <th>2</th>
      <th>2</th>
      <th>2</th>
    </tr>
    <tr class="purple">
      <th>3</th>
      <th>3</th>
      <th>3</th>
    </tr>
  </table>
  <br>
  <p>Some example code: <code class="grayBack">print("Example Code")</code> and some more code: <code class="grayBack">console.log("more code")</code></p>

<code class="grayBack"># multi</code>
<span class="br"></span>
<code class="grayBack"># line</code>
  <span class="br"></span>
<code class="grayBack"># code</code>
  <br>
  <br>
  <comment class="grayBack">This is a comment</comment>
  <br><br>
  <a class="whiteFore" target="_blank" href="https://example.com">This is a link</a>
  <br>
  <bar class="yellow"><h1 class="yellowFore">A horizontal rule<h1></h1></bar>
  <br>
  <p>Some text, <high class="yellowBack">highlighted text</high></p>
  <br>
  <bar class="orange"></bar>
  <del>Delete</del>
  <br>
  <ins>Underline</ins>
  <h4>Use this link in your HTML to use MarkUpCSS today: <code class="grayBack">&lt;link rel="stylesheet" href="https://markupcss.salladshooter.repl.co/MarkUp.css"&gt;</code></h2>
  <br>
  <h3 class="redBack">Made with love by <comment class="grayBack"><a class="whiteFore" href="https://replit.com/@SalladShooter">@SalladShooter</a></comment></h3>
  <br>
</body>

</html>

CSS:

:root {
  --red: #ff6666;
  --orange: #ffa500;
  --yellow: #ffff66;
  --green: #66ff66;
  --blue: #6666ff;
  --purple: #800080;
  --gray: #3a373a;
  --white: #ffffff;
  --black: #000000;
  
  --backColor: #26283b;
  --foreColor: #ffffff;
}

/*@media (prefers-color-scheme: light) {
  :root {
    --backColor: white;
    --foreColor: black;
  }
}*/

.lightMode {
  :root {
    --backColor: white;
    --foreColor: black;
  }
  body {
    background-color: var(--backColor);
    color: var(--foreColor)
  }
}

.darkMode {
  :root {
    --backcolor: #26283b;
    --foreColor: white;
  }
  body {
    background-color: var(--backColor);
    color: var(--foreColor)
  }
}

html {
  width: 100%;
  height: 100%;
  font-family: Arial;
}

body {
  color: var(--foreColor);
  background-color: var(--backColor);
}

.redFore {
  color: var(--red);
}

.orangeFore {
  color: var(--orange);
}

.yellowFore {
  color: var(--yellow);
}

.greenFore {
  color: var(--green);
}

.blueFore {
  color: var(--blue);
}

.purpleFore {
  color: var(--purple);
}

.grayFore {
  color: var(--gray);
}

.blackFore {
  color: var(--black);
}

.whiteFore {
  color: var(--white);
}

.redBack {
  color: white;
  background-color: var(--red);
}

.orangeBack {
  color: white;
  background-color: var(--orange);
}

.yellowBack {
  background-color: var(--yellow);
  color: black;
}

.greenBack {
  background-color: var(--green);
  color: black;
}

.blueBack {
  color: white;
  background-color: var(--blue);
}

.purpleBack {
  color: white;
  background-color: var(--purple);
}

.grayBack {
  color: white;
  background-color: var(--gray);
}

.blackBack {
  color: white;
  background-color: var(--black);
}

.whiteBack {
  background-color: var(--white);
  color: black;
}

h1.redBack, h2.redBack, h3.redBack, h4.redBack, h5.redBack, h6.redBack {
  background-color: var(--red);
}

h1.orangeBack, h2.orangeBack, h3.orangeBack, h4.orangeBack, h5.orangeBack, h6.orangeBack {
  background-color: var(--orange);
}

h1.yellowBack, h2.yellowBack, h3.yellowBack, h4.yellowBack, h5.yellowBack, h6.yellowBack {
  background-color: var(--yellow);
  color: black;
}

h1.greenBack, h2.greenBack, h3.greenBack, h4.greenBack, h5.greenBack, h6.greenBack {
  background-color: var(--green);
  color: black;
}

h1.blueBack, h2.blueBack, h3.blueBack, h4.blueBack, h5.blueBack, h6.blueBack {
  background-color: var(--blue);
}

h1.purpleBack, h2.purpleBack, h3.purpleBack, h4.purpleBack, h5.purpleBack, h6.purpleBack {
  background-color: var(--purple);
}

h1.grayBack, h2.grayBack, h3.grayBack, h4.grayBack, h5.grayBack, h6.grayBack {
  background-color: var(--gray);
}

h1.blackBack, h2.blackBack, h3.blackBack, h4.blackBack, h5.blackBack, h6.blackBack {
  background-color: var(--black);
}

h1.whiteBack, h2.whiteBack, h3.whiteBack, h4.whiteBack, h5.whiteBack, h6.whiteBack {
  background-color: var(--white);
  color: white;
}

html {
  height: 100%;
  width: 100%;
  font-family: Arial;
  background-color: #26283b;
  color: white;
}

h1, h2, h3 {
  padding: 0.25em;
  border-radius: 0.25em;
  display: inline-block;
  margin-bottom: 0em;
}

h4, h5, h6 {
  margin-bottom: 0em;
}

.br {
  display: block;
  margin-bottom: 0em;
}

blockquote.red {
  border-left: 6px var(--red) solid;
  padding: 0.5em;
}

blockquote.orange {
  border-left: 6px var(--orange) solid;
  padding: 0.5em;
}

blockquote.yellow {
  border-left: 6px var(--yellow) solid;
  padding: 0.5em;
}

blockquote.green {
  border-left: 6px var(--green) solid;
  padding: 0.5em;
}

blockquote.blue {
  border-left: 6px var(--blue) solid;
  padding: 0.5em;
}

blockquote.purple {
  border-left: 6px var(--purple) solid;
  padding: 0.5em;
}

blockquote.gray {
  border-left: 6px var(--gray) solid;
  padding: 0.5em;
}

blockquote.black {
  border-left: 6px var(--black) solid;
  padding: 0.5em;
}

blockquote.white {
  border-left: 6px var(--white) solid;
  padding: 0.5em;
}

table.red {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
  border: 2px var(--red) solid;
}

table.orange {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
  border: 2px var(--orange) solid;
}

table.yellow {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
  border: 2px var(--yellow) solid;
}

table.green {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
  border: 2px var(--green) solid;
}

table.blue {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
  border: 2px var(--blue) solid;
}

table.purple {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
  border: 2px var(--purple) solid;
}

table.gray {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
  border: 2px var(--gray) solid;
}

table.black {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
  border: 2px var(--black) solid;
}

table.white {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
  border: 2px var(--white) solid;
}

td.red, th.red {
  border: 1px solid var(--red);
  text-align: left;
  padding: 8px;
}

td.orange, th.orange {
  border: 1px solid var(--red);
  text-align: left;
  padding: 8px;
}

td.yellow, th.yellow {
  border: 1px solid var(--red);
  text-align: left;
  padding: 8px;
  color: black;
}

td.green, th.green {
  border: 1px solid var(--red);
  text-align: left;
  padding: 8px;
  color: black;
}

td.blue, th.blue {
  border: 1px solid var(--red);
  text-align: left;
  padding: 8px;
}

td.purple, th.purple {
  border: 1px solid var(--red);
  text-align: left;
  padding: 8px;
}

td.gray, th.gray {
  border: 1px solid var(--red);
  text-align: left;
  padding: 8px;
}

td.black, th.black {
  border: 1px solid var(--red);
  text-align: left;
  padding: 8px;
}

td.white, th.white {
  border: 1px solid var(--red);
  text-align: left;
  padding: 8px;
  color: black
}

tr:nth-child(even).red {
  background-color: var(--red);
}

tr:nth-child(even).orange {
  background-color: var(--orange);
}

tr:nth-child(even).yellow {
  background-color: var(--yellow);
}

tr:nth-child(even).green {
  background-color: var(--green);
}

tr:nth-child(even).blue {
  background-color: var(--blue);
}

tr:nth-child(even).purple {
  background-color: var(--purple);
}

tr:nth-child(even).gray {
  background-color: var(--gray);
}

tr:nth-child(even).black {
  background-color: var(--black);
}

tr:nth-child(even).white {
  background-color: var(--white);
}

tr:nth-child(odd) {
  background-color: transparent;
}

tr:first-child {
  background-color: transparent;
}

code.redBack {
  font-family: Arial;
  background-color: var(--red);
  border-radius: 0.25em;
  display: inline-block;
  padding-left: 0.25em;
  padding-right: 0.25em;
  margin-top: -0.295em;
  margin-bottom: -0.295em;
  padding: 0.1em;
}

code.orangeBack {
  font-family: Arial;
  background-color: var(--orange);
  border-radius: 0.25em;
  display: inline-block;
  margin-left: 0.1em;
  margin-right: 0.1em;
  margin-top: -0.275em;
  padding: 0.1em;
  margin-bottom: -0.275em;
}

code.yellowBack {
  font-family: Arial;
  color: black;
  background-color: var(--yellow);
  border-radius: 0.25em;
  display: inline-block;
  padding-left: 0.25em;
  padding-right: 0.25em;
  margin-top: -0.295em;
  padding: 0.1em;
  margin-bottom: -0.295em;
}

code.greenBack {
  font-family: Arial;
  color: black;
  background-color: var(--green);
  border-radius: 0.25em;
  display: inline-block;
  padding-left: 0.25em;
  padding-right: 0.25em;
  margin-top: -0.295em;
  padding: 0.1em;
  margin-bottom: -0.295em;
}

code.blueBack {
  font-family: Arial;
  background-color: var(--blue);
  border-radius: 0.25em;
  display: inline-block;
  padding-left: 0.25em;
  padding-right: 0.25em;
  margin-top: -0.295em;
  padding: 0.1em;
  margin-bottom: -0.295em;
}

code.purpleBack {
  font-family: Arial;
  background-color: var(--purple);
  border-radius: 0.25em;
  display: inline-block;
  padding-left: 0.25em;
  padding-right: 0.25em;
  margin-top: -0.295em;
  padding: 0.1em;
  margin-bottom: -0.295em;
}

code.grayBack {
  font-family: Arial;
  background-color: var(--gray);
  border-radius: 0.25em;
  display: inline-block;
  padding-left: 0.25em;
  padding-right: 0.25em;
  margin-top: -0.295em;
  padding: 0.1em;
  margin-bottom: -0.295em;
}

code.blackBack {
  font-family: Arial;
  background-color: var(--black);
  border-radius: 0.25em;
  display: inline-block;
  padding-left: 0.25em;
  padding-right: 0.25em;
  margin-top: -0.295em;
  margin-bottom: -0.295em;
  padding: 0.1em;
}

code.whiteBack {
  font-family: Arial;
  color: black;
  background-color: var(--black);
  border-radius: 0.25em;
  display: inline-block;
  padding-left: 0.25em;
  padding: 0.1em;
  padding-right: 0.25em;
  margin-top: -0.295em;
  margin-bottom: -0.295em;
}

comment.redBack {
  background-color: var(--red);
  border-radius: 0.25em;
  display: inline-block;
  padding: 0.25em;
  margin: 0.1em;
}

comment.orangeBack {
  background-color: var(--orange);
  border-radius: 0.25em;
  display: inline-block;
  padding: 0.25em;
  margin: 0.1em;
}

comment.yellowBack {
  background-color: var(--yellow);
  border-radius: 0.25em;
  display: inline-block;
  color: black;
  padding: 0.25em;
  margin: 0.1em;
}

comment.greenBack {
  background-color: var(--green);
  border-radius: 0.25em;
  color: black;
  display: inline-block;
  padding: 0.25em;
  margin: 0.1em;
}

comment.blueBack {
  background-color: var(--blue);
  border-radius: 0.25em;
  display: inline-block;
  padding: 0.25em;
  margin: 0.1em;
}

comment.purpleBack {
  background-color: var(--purple);
  border-radius: 0.25em;
  display: inline-block;
  padding: 0.25em;
  margin: 0.1em;
}

comment.grayBack {
  background-color: var(--gray);
  border-radius: 0.25em;
  display: inline-block;
  padding: 0.25em;
  margin: 0.1em;
}

comment.blackBack {
  background-color: var(--black);
  border-radius: 0.25em;
  display: inline-block;
  padding: 0.25em;
  margin: 0.1em;
}

comment.whiteBack {
  background-color: var(--white);
  color: black;
  border-radius: 0.25em;
  display: inline-block;
  padding: 0.25em;
  margin: 0.1em;
}

a.redFore {
  color: var(--red);
}

a.orangeFore {
  color: var(--orange);
}

a.yellowFore {
  color: var(--yellow);
}

a.greenFore {
  color: var(--green);
}

a.blueFore {
  color: var(--blue);
}

a.purpleFore {
  color: var(--purple);
}

a.grayFore {
  color: var(--gray);
}

a.blackFore {
  color: var(--black);
}

a.whiteFore {
  color: var(--white);
}

bar.red {
  display: inherit;
  width: auto;
  border-bottom: 3px solid var(--red);
  margin-bottom: 3em;
  margin-top: 2em;
  padding: 0.5em;
}

bar.orange {
  display: inherit;
  width: auto;
  border-bottom: 3px solid var(--orange);
  margin-bottom: 3em;
  margin-top: 2em;
  padding: 0.5em;
}

bar.yellow {
  display: inherit;
  width: auto;
  border-bottom: 3px solid var(--yellow);
  margin-bottom: 3em;
  margin-top: 2em;
  padding: 0.5em;
}

bar.green {
  display: inherit;
  width: auto;
  border-bottom: 3px solid var(--green);
  margin-bottom: 3em;
  margin-top: 2em;
  padding: 0.5em;
}

bar.blue {
  display: inherit;
  width: auto;
  border-bottom: 3px solid var(--blue);
  margin-bottom: 3em;
  margin-top: 2em;
  padding: 0.5em;
}

bar.purple {
  display: inherit;
  width: auto;
  border-bottom: 3px solid var(--purple);
  margin-bottom: 3em;
  margin-top: 2em;
  padding: 0.5em;
}

bar.gray {
  display: inherit;
  width: auto;
  border-bottom: 3px solid var(--gray);
  margin-bottom: 3em;
  margin-top: 2em;
  padding: 0.5em;
}

bar.black {
  display: inherit;
  width: auto;
  border-bottom: 3px solid var(--black);
  margin-bottom: 3em;
  margin-top: 2em;
  padding: 0.5em;
}

bar.white {
  display: inherit;
  width: auto;
  border-bottom: 3px solid var(--white);
  margin-bottom: 3em;
  margin-top: 2em;
  padding: 0.5em;
}

high.redBack {
  background-color: var(--red);
  padding: 0.1em;
}

high.orangeBack {
  background-color: var(--orange);
  padding: 0.1em;
}

high.yellowBack {
  background-color: var(--yellow);
  padding: 0.1em;
  color: black;
}

high.greenBack {
  background-color: var(--green);
  padding: 0.1em;
  color: black;
}

high.blueBack {
  background-color: var(--blue);
  padding: 0.1em;
}

high.purpleBack {
  background-color: var(--purple);
  padding: 0.1em;
}

high.grayBack {
  background-color: var(--gray);
  padding: 0.1em;
}

high.blackBack {
  background-color: var(--black);
  padding: 0.1em;
}

high.whiteBack {
  color: black;
  background-color: var(--white);
  padding: 0.1em;
}

del {
  background-color: var(--red);
}

ins {
  background-color: var(--green);
  color: black;
}

button {
  font-size: 1em;
  border: 0px white solid;
  padding: 0.25em;
  border-radius: 0.25em;
}
2 Likes
4

Hi there, I don’t see a way to change it from light to dark?

5

@ShaunMostert you can now, you can’t while viewing it you have to make a Repl and add class=“lightMode” or class=”darkMode” inside of the body tag.

6

I still do not see it.

7

@ShaunMostert have you made a Repl and added this in the head? <link rel="stylesheet" href="https://markupcss.salladshooter.repl.co/MarkUp.css“>. You then need this <body class=“lightMode”> or <body class=“darkMode”>

8

would inspect element work?

9

@boston2029 It might, if you can change the <body class=“darkMode”> then you can see.

1 Like
10

It is because you have a margin on your body. To fix it, just add margin:0; to the html and body. If you really wanted to keep the margin though, you could set margin to 0 and padding to around 8px. (Margin is the margin around the outside/perimeter of the element and padding is the margin inside of the element.)

This is what it looked like when I had light mode class on and changed margin to 0:

image
image1920×937 43.3 KB

As you can see, everything is up against the edges of the screen, but the dark mode border is gone. If you want to have the margin back without the border box, then you can set padding to 8px as I said, and this is what that would look like:

image
image1920×951 54.2 KB

Does this help?

1 Like
11

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.