Как сделать цвета темными, светлыми и нестандартными для приложения с облачной вспышкой?

Question

Я делаю приложение облачной вспышки для пользовательских полос прокрутки, и я знаю, что то, что я спрашиваю, просто для тех, кто знает java-скрипт больше, чем я, но я все равно не могу найти какие-либо учебные пособия, я просто доберусь до него.

Мне нужно добавить <style> элемент с этими 3 вещами в разных файлах JS.

Темно:

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

Свет:

::-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
}

Таможня:

::-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}}
}

То, что я пытался объяснить, вероятно, трудно понять, поэтому я расскажу вам по-другому.

Мне бы хотелось, чтобы эти биты CSS можно было добавить в файл JavaScript, чтобы при выборе пользователем полоса прокрутки изменялась по выбору пользователя.

Answer 1

Ах, я вижу, что вы действительно хотите добавить что-то вроде этого в свой файл JS:

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)

Answer 2

Вы можете сделать это, используя пример приложения и отредактировав app.css. Вы не хотите переопределять этот стиль для всех элементов на странице правильно? Если вы хотите ограничить это для элементов, созданных в Cloudflare Apps, вам нужно сделать что-то вроде:

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;
}

Имейте в виду, что это будет ограничено определенными браузерами webkit (например, Safari, Chrome и т. Д.)