search

bufferhead-code / nightowl

Add Dark Mode to your website semi-automatically.
198 stars 16 forks source link

How to use it? I installed and added script tag to index.html and nothing seems to happen #10

Closed yfzhou0904 closed 10 months ago

yfzhou0904 commented 10 months ago

I ran npm install @bufferhead/nightowl and included <script type="module" src="./node_modules/@bufferhead/nightowl/dist/nightowl.js"></script> in my react project, but nothing's changed afterwards. There is no overlay button to activate night mode. What am I missing?

LucGzy commented 10 months ago

Hi, i just tried it on one of my projects and the button show up for me. Make sure you added the script in your index.html and make sure nothing of z-index over 9999 is on the top right of our page since the button as a z-index of 9999. @yfzhou0904 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Monoton&family=Montserrat:wght@200;300;400;500;600;700;800&display=swap"
      rel="stylesheet"
    />

    <title>Portfolio Luc Gouzy</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="./src/main.jsx"></script>
    <script
      type="module"
      src="./node_modules/@bufferhead/nightowl/dist/nightowl.js"
    ></script>
  </body>
</html>

here is the snippet that i use and that works just fine for me, see if anything differ

yfzhou0904 commented 10 months ago

Hi, i just tried it on one of my projects and the button show up for me. Make sure you added the script in your index.html and make sure nothing of z-index over 9999 is on the top right of our page since the button as a z-index of 9999. @yfzhou0904

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Monoton&family=Montserrat:wght@200;300;400;500;600;700;800&display=swap"
      rel="stylesheet"
    />

    <title>Portfolio Luc Gouzy</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="./src/main.jsx"></script>
    <script
      type="module"
      src="./node_modules/@bufferhead/nightowl/dist/nightowl.js"
    ></script>
  </body>
</html>

here is the snippet that i use and that works just fine for me, see if anything differ

Thanks for the response! I created my project with the latest create-react-app with typescript. Importing the script with <script type="module" src="./node_modules/@bufferhead/nightowl/dist/nightowl.js"></script> just doesn't seem to work for me, with this error message in browser console: image

However, changing the script src to cdn link does work. It's probably something with the react build process I don't fully understand.

I ended up copying the ts file to my src directory, made some changes to the button to suit my app, and now it works like a charm.

LucGzy commented 10 months ago

@yfzhou0904 Cool ! I recommend you take a look at Vite.js which is similar to create-react-app but used more and more compared to CRA, also seeing the error seems to confirm that it has to do with the way you are running your website. MIME types error usually indicates that the server isnt serving the files at the right place/timing or right format so I would agree it has to do with how CRA runs your app. Enjoy the dark mode

bufferhead-code commented 10 months ago

@yfzhou0904 sorry for the confusion, i just updated the docs and published a new version which should work with create-react app as well.

yfzhou0904 commented 10 months ago

@yfzhou0904 sorry for the confusion, i just updated the docs and published a new version which should work with create-react app as well.

Thanks! Beautiful work!