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

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

0 голосов
/ 26 апреля 2018

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

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

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
}

Пользовательский: 

::-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, чтобы при выборе пользователем полоса прокрутки изменялась по выбору пользователя.

Ответы [ 2 ]

0 голосов
/ 10 мая 2018

Ах, я вижу, вы действительно хотите добавить что-то подобное в ваш файл 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)
0 голосов
/ 01 мая 2018

Вы можете сделать это, используя пример приложения и отредактировав 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 и т. Д.)

...