How do i make colours dark, light and custom for a cloud flare app?

Question

I'm making a cloud flare app for custom scrollbars and i know what i'm asking is simple for someone that knows java script more then me but i cant find any tutorials anyway i'll just get to it.

I need to add a <style> element with these 3 things in different js files.

Dark:

::-webkit-scrollbar {
    width: 15px
}
::-webkit-scrollbar-track {
    background-color: #232323
}
::-webkit-scrollbar-thumb {
    background-color: #494949
}
::-webkit-scrollbar-corner {
    background-color: black
}

Light:

::-webkit-scrollbar {
    width: 15px
}
::-webkit-scrollbar-track {
    background-color: #ffffff
}
::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.34)
}
::-webkit-scrollbar-corner {
    background-color: black
}

Custom:

::-webkit-scrollbar {
    width: 15px
}
::-webkit-scrollbar-track {
    background-color: {{options.scrollbarTrackColor}}
}
::-webkit-scrollbar-thumb {
    background-color: {{options.scrollbarThumbColor}}
}
::-webkit-scrollbar-corner {
    background-color: {{options.scrollbarCornerColor}}
}

What I've tried to explain is probably hard to understand so i'll tell you another way.

I'd like those bits of css to be able to be added to a javascript file so that when a user picks one the scroll bar will change to the users choice.

Answer 1

You can do this by using the example app and editing app.css. You'd want to not override this style for all elements on the page correct? If you want to limit this for elements created by Cloudflare Apps, you'd do something like:

cloudflare-app[app="example"]::-webkit-scrollbar-track {
    background-color: #232323
}
cloudflare-app[app="example"]::-webkit-scrollbar-thumb {
    background-color: #494949
}
cloudflare-app[app="example"]::-webkit-scrollbar-corner {
    background-color: black
} 
cloudflare-app[app="example"]::-webkit-scrollbar-corner{
  border: 1px solid;
}

Keep in mind this will be limited to specific to webkit browsers (so safari, chrome,etc.. )

Answer 2

Ah I see you'd actually want to add something like this to your JS file:

const lightStyle = document.createElement('style')
lightStyle.innerHTML = `
      ::-webkit-scrollbar {
      width: 15px
  }
  ::-webkit-scrollbar-track {
      background-color: #ffffff
  }
  ::-webkit-scrollbar-thumb {
      background-color: rgba(0, 0, 0, 0.34)
  }
  ::-webkit-scrollbar-corner {
      background-color: red
  }
      `
  if(options.style == 'light') 
  document.head.appendChild(lightStyle)