themedark.scss 1.6 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576
  1. // SCSS variables
  2. $color-main-text: #d8d8d8;
  3. $color-main-background: #181818;
  4. $color-background-dark: lighten($color-main-background, 4%);
  5. $color-background-darker: lighten($color-main-background, 8%);
  6. $color-text-maxcontrast: darken($color-main-text, 30%);
  7. $color-text-light: darken($color-main-text, 10%);
  8. $color-text-lighter: darken($color-main-text, 20%);
  9. $color-loading-light: #777;
  10. $color-loading-dark: #ccc;
  11. $color-box-shadow: rgba(darken($color-main-background, 70%), 0.5);
  12. $color-border: lighten($color-main-background, 7%);
  13. $color-border-dark: lighten($color-main-background, 14%);
  14. #app-navigation > ul > li > a:first-child,
  15. #app-navigation > ul > li > ul > li > a:first-child,
  16. #contactsmenu-menu a,
  17. #expanddiv a,
  18. .activity-section .activity-icon.monochrome {
  19. img {
  20. filter: invert(100%);
  21. }
  22. }
  23. #navigation #apps li a,
  24. #body-settings #content.app-settings .app-image-icon,
  25. #body-settings #content.app-settings #app-sidebar #app-details-view h2 {
  26. svg {
  27. filter: invert(100%);
  28. }
  29. }
  30. // Otherwise icon-more gets inverted via function
  31. #appmenu .icon-more-white {
  32. filter: invert(100%);
  33. }
  34. // since svg icons are inverted, revert to white for the header
  35. .header-right > * {
  36. >[class^='icon-'],
  37. >[class*=' icon-'] {
  38. filter: invert(100%);
  39. }
  40. }
  41. .bubble,
  42. .app-navigation-entry-menu,
  43. .popovermenu {
  44. li {
  45. > button,
  46. > a,
  47. > .menuitem {
  48. > img {
  49. filter: invert(100%);
  50. }
  51. }
  52. }
  53. }
  54. .bubble,
  55. .app-navigation-entry-menu,
  56. .popovermenu,
  57. #header .menu {
  58. border: 1px solid var(--color-border);
  59. }
  60. // Prevent slideshow icons from going dark
  61. #slideshow {
  62. [class^='icon-'], [class*=' icon-']{
  63. filter: invert(100%);
  64. }
  65. }