Can't make it working - Githubissues

marco-brandizi commented 2 years ago

Hi all, I know HTML/CSS quite little, I've tried to make this working on a simple page of mine, but with no luck. I've crafted something as simple as:

<!DOCTYPE html>
<html data-theme='medium'>
    <head>
        <link id="maincss" rel="stylesheet" href="https://classless.de/addons/themes.css"></link>
    </head>
    <body vocab="http://schema.org/" prefix = "edam: http://edamontology.org/ bioschema: http://bioschemas.org/ ncbitax: http://purl.obolibrary.org/obo/NCBITaxon_ wp: https://en.wikipedia.org/wiki/">
        <script language="javascript">
            window.onload = function(e) { 
                console.log ( "changing theme" );
                document.documentElement.setAttribute ( "data-theme", "medium" );
            }
        </script>       
...

Initially, I was only trying html.data-theme, then I've added the load handler, but none worked, the log message is printed, but the page remains bare blank. I need the extra attributes in body since this is a page with schema.org annotations. Despite it being a proof-of-concept for a job meeting, I'd like to add a minimum of nice graphics via a classless theme.

Thanks in advance for any help.

jamietanna commented 2 years ago

Hey, this looks like it's because you're missing the classless.css.

See the below snippet which does work, by flipping from the initial dark theme to medium:

<!DOCTYPE html>
<html data-theme='dark'>

<head>
  <link id="maincss" rel="stylesheet" href="https://classless.de/classless.css">
  </link>
  <link id="maincss" rel="stylesheet" href="https://classless.de/addons/themes.css">
  </link>
</head>

<body>
  <script language="javascript">
    window.onload = function (e) {
      console.log(document.documentElement.getAttribute("data-theme"));
      console.log("changing theme");
      document.documentElement.setAttribute("data-theme", "medium");
    }
  </script>
  <h1>Hi</h1>
</body>

</html>

emareg commented 2 years ago

I guess this should work. Maybe it would be useful to include a minimal template in this repo?

marco-brandizi commented 2 years ago

Many thanks, @jamietanna, now it works!

jamietanna commented 2 years ago

Awesome mind closing the issue?

emareg / classlesscss

Can't make it working #12