default.scss 4.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173
  1. @import '../variables';
  2. @import '../override-bootstrap-variables';
  3. // == Define Bootstrap theme colors
  4. //
  5. // colors for overriding bootstrap $theme-colors
  6. // $secondary: #;
  7. // $info: #;
  8. // $success: #;
  9. // $warning: #;
  10. // $danger: #;
  11. // $light: #;
  12. // $dark: #;
  13. //== Light Mode
  14. //
  15. html[light] {
  16. $primary: #122c55;
  17. // Background colors
  18. $bgcolor-global: white;
  19. $bgcolor-inline-code: #f0f0f0; //optional
  20. $bgcolor-card: #f5f5f5;
  21. // Font colors
  22. $color-global: #112744;
  23. $color-reversal: #eeeeee;
  24. // $color-header: #2b2b2b;
  25. $color-link: #1938ba;
  26. $color-link-hover: lighten($color-link, 20%);
  27. $color-link-wiki: $color-link;
  28. $color-link-wiki-hover: lighten($color-link-wiki, 20%);
  29. $color-link-nabvar: #a7a7a7;
  30. $color-inline-code: #c7254e; // optional
  31. // List Group colors
  32. // $color-list: $color-global; // optional
  33. // $bgcolor-list: $bgcolor-global; // optional
  34. // $color-list-hover: $color-reversal; // optional
  35. // $color-list-active: $color-reversal; // optional
  36. // $bgcolor-list-active: $primary; // optional
  37. // Navbar
  38. $bgcolor-navbar: #2a2929;
  39. $bgcolor-search-top-dropdown: #209fd8;
  40. $border-image-navbar: linear-gradient(to right, #36c9ff 0%, #36c9ff 33%, #7926ff 66%, #ff2eff 100%);
  41. // Logo colors
  42. $bgcolor-logo: $bgcolor-navbar;
  43. $fillcolor-logo-mark: lighten(desaturate($bgcolor-navbar, 10%), 15%);
  44. // Sidebar
  45. $bgcolor-sidebar: #122c55;
  46. $bgcolor-sidebar-nav-item-active: rgba(#000000, 0.37); // optional
  47. $text-shadow-sidebar-nav-item-active: 0px 0px 10px #0099ff; // optional
  48. // Sidebar resize button
  49. $color-resize-button: $color-reversal;
  50. $bgcolor-resize-button: #209fd8;
  51. $color-resize-button-hover: $color-reversal;
  52. $bgcolor-resize-button-hover: lighten($bgcolor-resize-button, 5%);
  53. // Sidebar contents
  54. $color-sidebar-context: $color-global;
  55. $bgcolor-sidebar-context: #f4f6fc;
  56. // Sidebar list group
  57. $bgcolor-sidebar-list-group: #fafbff; // optional
  58. // Subnavigation
  59. // $bgcolor-subnabvar: #fafafa; // optional
  60. // Icon colors
  61. $color-editor-icons: $color-global;
  62. // Border colors
  63. $border-color-theme: #ccc; // former: `$navbar-border: #ccc;@`
  64. $bordercolor-inline-code: #ccc8c8; // optional
  65. // Dropdown colors
  66. $bgcolor-dropdown-link-active: $growi-blue;
  67. $color-dropdown-link-active: $color-reversal;
  68. $color-dropdown-link-hover: $color-reversal;
  69. // admin theme box
  70. $color-theme-color-box: lighten($primary, 20%);
  71. // alert
  72. $color-alert: $color-reversal;
  73. // badge
  74. $color-badge: $color-reversal;
  75. @import 'apply-colors';
  76. @import 'apply-colors-light';
  77. }
  78. //== Dark Mode
  79. //
  80. html[dark] {
  81. $primary: #db00c2;
  82. // Background colors
  83. $bgcolor-global: #131418;
  84. $bgcolor-inline-code: #1f1f22; //optional
  85. $bgcolor-card: darken($bgcolor-global, 5%);
  86. // Font colors
  87. $color-global: #a8a8a8;
  88. $color-reversal: #333333;
  89. // $color-header: desaturate($primary, 20%);
  90. $color-link: #7b9ad5;
  91. $color-link-hover: lighten($color-link, 10%);
  92. $color-link-wiki: $color-link;
  93. $color-link-wiki-hover: lighten($color-link-wiki, 10%);
  94. $color-link-nabvar: #a7a7a7;
  95. $color-inline-code: #c7254e; // optional
  96. // List Group colors
  97. // $color-list: $color-global; // optional
  98. // $bgcolor-list: $bgcolor-global; // optional
  99. // $color-list-hover: $color-reversal; // optional
  100. $color-list-active: white; // optional
  101. // $bgcolor-list-active: $primary; // optional
  102. // Navbar
  103. $bgcolor-navbar: #2a2929;
  104. $bgcolor-search-top-dropdown: $primary;
  105. $border-image-navbar: linear-gradient(to right, #44bfe3 0%, #b04aff 50%, #ff1794 100%);
  106. // Logo colors
  107. $bgcolor-logo: $bgcolor-navbar;
  108. $fillcolor-logo-mark: #444;
  109. // Sidebar
  110. $bgcolor-sidebar: #122c55;
  111. $bgcolor-sidebar-nav-item-active: rgba(#969494, 0.3); // optional
  112. $text-shadow-sidebar-nav-item-active: 0px 0px 10px #0099ff; // optional
  113. // Sidebar resize button
  114. $color-resize-button: white;
  115. $bgcolor-resize-button: $primary;
  116. $color-resize-button-hover: white;
  117. $bgcolor-resize-button-hover: darken($bgcolor-resize-button, 5%);
  118. // Sidebar contents
  119. $bgcolor-sidebar-context: #111d2f;
  120. $color-sidebar-context: $color-global;
  121. // Sidebar list group
  122. $bgcolor-sidebar-list-group: #1c2a3e; // optional
  123. // Subnavigation
  124. $bgcolor-subnabvar: lighten($bgcolor-global, 4%); // optional
  125. // Icon colors
  126. $color-editor-icons: $color-global;
  127. // Border colors
  128. $border-color-theme: black; // former: `$navbar-border: #ccc;`
  129. $bordercolor-inline-code: #4d4d4d; // optional
  130. // Dropdown colors
  131. $bgcolor-dropdown-link-active: $primary;
  132. $color-dropdown-link-active: $color-global;
  133. $color-dropdown-link-hover: $color-reversal;
  134. // admin theme box
  135. $color-theme-color-box: $primary;
  136. // alert
  137. $color-alert: $color-reversal;
  138. // badge
  139. $color-badge: $color-reversal;
  140. @import 'apply-colors';
  141. @import 'apply-colors-dark';
  142. }