loading...

A Journal: Building a Writers Outlet for my girlfriend - The Writers Interface

_saul_ profile image Saul ・1 min read

The Writers Interface

At this point i made a Codeigniter app for my girlfriend to use and post her writings about life, romance, suspense and poetry. I am sure she will add more categories.

Something fun i applied to this app was of course dark mode because who doesn't want this option on any interface.

Light Mode and Dark Mode on Login

To achieve this, i first wrote two CSS files that will acomplish the look i wanted. Then came the tricky part, changing the CSS that was being used on the browser.

So of course good ol' google search and StackOverflow to the rescue, i found this great answer.

You can create a new link, and replace the old one with the new one. If you put it in a function, you can reuse it wherever it's needed.

The Javascript:

function changeCSS(cssFile, cssLinkIndex) {

    var oldlink = document.getElementsByTagName("link").item(cssLinkIndex);

    var newlink = document.createElement("link");
    newlink.setAttribute("rel", "stylesheet");
    newlink.setAttribute("type", "text/css");
    newlink.setAttribute("href", cssFile);

    document.getElementsByTagName("head").item(0).replaceChild(newlink,

Using this function on some buttons at the top of the page, the toggle between Light Mode and Dark Mode could be done no problem.

function changeCSS(cssFile, cssLinkIndex) {
  var oldlink = document.getElementsByTagName("link").item(cssLinkIndex);

  var newlink = document.createElement("link");
  newlink.setAttribute("rel", "stylesheet");
  newlink.setAttribute("type", "text/css");
  newlink.setAttribute("href", cssFile);

  document.getElementsByTagName("head").item(0).replaceChild(newlink, oldlink);
}

I not only did this for the login page but for the form page where she will create new posts.

Light Mode and Dark Mode on Post

At this point i was very happy with the work i have done, and very pumped to keep working on this project that not only has learning value but sentimental value too.

Up next the inteface for the main page.

Thank you for reading.

Posted on by:

_saul_ profile

Saul

@_saul_

Im a Freelance Web Developer. I like reading about almost everything, specially technology.

Discussion

markdown guide