USOS dark mode

dark mode of USOS

当前为 2023-05-18 提交的版本,查看 最新版本

  1. // ==UserScript==
  2. // @name USOS dark mode
  3. // @namespace https://greasyfork.org/en/users/901750-gooseob
  4. // @version 1
  5. // @description dark mode of USOS
  6. // @author GooseOb
  7. // @license MIT
  8. // @match https://usosweb.uni.lodz.pl/*
  9. // @icon https://www.google.com/s2/favicons?sz=64&domain=usosweb.uni.lodz.pl
  10. // @grant none
  11. // ==/UserScript==
  12.  
  13. const sGLOBAL = `:root {
  14. --font-color-reverse: #000;
  15. --background-reverse: #ccc;
  16.  
  17. --background: #222;
  18. --background-secondary: #333;
  19.  
  20. --font-color: #fff;
  21. }
  22.  
  23. html,
  24. main-panel,
  25. .wrtext table.grey > * > :is(tr.even, tr.strong) > td,
  26. .usos-ui table.grey > * > tr > td,
  27. .usos-ui table.wrnav tr.even_row td {
  28. background-color: var(--background);
  29. }
  30.  
  31. p {
  32. mix-blend-mode: difference;
  33. }
  34.  
  35. body {
  36. background: #111;
  37. }
  38.  
  39. #footer-logo, #search_logo, .radio {
  40. filter: contrast(0.5);
  41. }
  42.  
  43. .wrtext table.grey > * > tr > td,
  44. usos-module-link-tile:hover,
  45. .usos-ui table.wrnav tr.odd_row td {
  46. background-color: var(--background-secondary);
  47. }
  48.  
  49. usos-module-link-tile {
  50. background-color: #111;
  51. }
  52.  
  53. .schedimg {
  54. filter: invert(1);
  55. }
  56.  
  57. .usos-ui :is(input[type="text"], input[type="textbox"], input[type="file"], input[type="email"], input[type="url"], input[type="number"], input[type="date"], textarea, select) {
  58. background-color: #111;
  59. }`;
  60. const sSELECTOR = `input {
  61. background-color: #000;
  62. }`;
  63. const sCOPYRIGHT = `#layoutCopyright {
  64. color: #fff;
  65. }`;
  66. const sHAMBURGER = `#hamburger {
  67. filter: invert(1);
  68. }`;
  69. (function () {
  70. const applyStyles = async (el, cssText) => {
  71. const styles = new CSSStyleSheet;
  72. await styles.replace(cssText);
  73. el.adoptedStyleSheets.push(styles);
  74. };
  75. const hamburger = document.querySelector('menu-top').shadowRoot
  76. .querySelector('menu-top-hamburger').shadowRoot;
  77. const copyright = document.querySelector('usos-copyright').shadowRoot;
  78. applyStyles(document, sGLOBAL);
  79. applyStyles(hamburger, sHAMBURGER);
  80. applyStyles(copyright, sCOPYRIGHT);
  81. for (const el of document.querySelectorAll('usos-selector'))
  82. applyStyles(el.shadowRoot, sSELECTOR);
  83. })();