☰

DarkMode V2 for Greasyfork

changes the color theme of the page to cool dark colors.

  1. // ==UserScript==
  2. // @name         DarkMode V2 for Greasyfork
  3. // @namespace    http://tampermonkey.net/
  4. // @version      2.3.8
  5. // @description  changes the color theme of the page to cool dark colors.
  6. // @author       Gullampis810
  7. // @license      MIT
  8. // @match        https://greasyfork.org/*
  9. // @icon         https://is1-ssl.mzstatic.com/image/thumb/Purple221/v4/6f/d0/b6/6fd0b6b2-d0f4-54b8-3ae4-4bc709de11c4/AppIcon-0-0-2x_U007euniversal-0-4-85-220.png/1200x630bb.png
  10. // @grant        GM_addStyle
  11. // ==/UserScript==
  12.  
  13.  
  14.  
  15.  
  16. (function() {
  17.     'use strict';
  18.  
  19.  
  20.  
  21.     // Добавляем кастомный стиль на страницу
  22.     GM_addStyle(`
  23.  
  24.  
  25.           /* значок js */
  26.           .badge-js {
  27.           background-color: #deb53b;
  28.           color: #000000 !important;
  29.           mix-blend-mode: inherit; /* Улучшение контраста */
  30.       }
  31.  
  32.          /* уведомление об ошибках */
  33.          .validation-errors {
  34.              background-color: #af6a186b;
  35.              border: none;
  36.              border-left: 6px solid #FF9800;
  37.          }
  38.  
  39. td {
  40.     background: #12433c !important;
  41.     border-radius: 20px !important;
  42.     padding: 10px !important;
  43. }
  44. td.ban-text {
  45.     color: red !important;
  46.     background-color: #ff000033 !important; /* Полупрозрачный красный фон */
  47. }
  48.  
  49.  
  50.                      .language-selector-locale {
  51.                        padding: 6px;
  52.                        border-radius: 25px !important;
  53.                        border: solid 2px #147572 !important;
  54.                      }
  55.  
  56.                 .text-content.log-table {
  57.                   background: #0e2921 !important;
  58.                 }
  59.                                 .discussion-list.discussion-list-logged-in {
  60.                                                	background: #153637 !important;
  61.                                                	box-shadow: 4px 4px 7px 0px #0d1211 !important;
  62.                                                }
  63.  
  64.                                .discussion-list-container.discussion-read {
  65.                                                background: #1c351d;
  66.                                              } /* прочитано */
  67.                 .list-option-button {
  68.                   background: #433f4d !important;
  69.                   color: #6ffbee !important;
  70.                   border-radius: 30px !important;
  71.                 }
  72.  
  73.       a.script-link {
  74.               color: #40b16e !important;
  75.     box-shadow: 0px 0px 14px 1px #88c951;
  76.     background: #44404e;
  77.     padding: 5px;
  78.     border-radius: 7px;
  79.       }
  80.  
  81.            /* input search */
  82.  
  83.            input[type="search"] {
  84.                box-shadow: inset 0px 0px 14px 1px #0d1211;
  85.                background: #44404e;
  86.                padding: 8px;
  87.                border-radius: 30px;
  88.                border: 2px #6bebe0 solid;
  89.              }
  90.  
  91.  
  92.          p#deleted-note {
  93.              color: #671111 !important;
  94.          }
  95.  
  96.  
  97.           /* кнопки переключения страницы 12345678910111213  */
  98.          .pagination>*, .script-list+.pagination>*, .user-list+.pagination>* {
  99.              background-color: #564062;
  100.              border-radius: 5px;
  101.          }
  102.          .pagination>a:hover, .pagination>a:focus {
  103.              background-color: #227648;
  104.          }
  105.  
  106.  
  107.         a.self-link, a.self-link:visited {
  108.             opacity: 1.2;
  109.             background-color: #53405f;
  110.             border: 2px solid #27857b;
  111.             border-radius: 5px;
  112.         }
  113.  
  114.  
  115.  
  116.  
  117.  
  118.         /* Стили для ссылок */
  119.         a {
  120.             color: #000000; /* Начальный цвет ссылки */
  121.             text-decoration: none; /* Убираем подчеркивание */
  122.             transition: all 0.3s ease; /* Плавный переход при изменении */
  123.         }
  124.  
  125.         /* Подсветка при наведении */
  126.  
  127.          a:hover {
  128.            color: #8b5ea9;
  129.            background-color: #0e2921;
  130.            padding: 7px 10px;
  131.            border-radius: 5px;
  132.            box-shadow: -1px 9px 9px 0px #000000a2;
  133.        }
  134.  
  135.  
  136.         /* Дополнительные стили для боковой панели (например, если это кнопки) */
  137.         .sidebar a {
  138.             display: block;
  139.             padding: 10px;
  140.             color: #8b5ea9;
  141.             border-radius: 4px;
  142.             transition: background-color 0.3s ease, color 0.3s ease;
  143.         }
  144.  
  145.         .sidebar a:hover {
  146.             background-color: #8b5ea9; /* Темный фон при наведении */
  147.             color: #8b5ea9; /* не Белый цвет текста при наведении */
  148.         }
  149.  
  150.  
  151.  
  152.  
  153.        /* Стили для общего текста */
  154.         * {
  155.             color: #e2e2e2 !important;
  156.         }
  157.  
  158.                  body, select, input {
  159.                  background-color: #0e2921;
  160.                  border-radius: 7px;
  161.              }
  162.  
  163.  
  164.         /* слово require */
  165.         code {
  166.             background-color: #835818;
  167.         }
  168.  
  169. /* code container info script */
  170. .code-container {
  171.     background: #091c1b;
  172. }
  173.  
  174.       /* фон страницы градиент */
  175.         body {
  176.              background: -webkit-linear-gradient(44deg, hsla(170, 52%, 38%, 1) 0%, hsla(285, 66%, 31%, 1) 56%, hsla(34, 100%, 38%, 1) 100%);
  177.              background-size: 100% 500%;  /* Растягиваем градиент по всей ширине и высоте элемента */
  178.         }
  179.  
  180.         #main-header {
  181.             background-color: #5d3e72;
  182.             background-image: linear-gradient(#412451, #009981);
  183.             box-shadow: 0 0 15px 2px #000000a1;
  184.             padding: .25em 0;
  185.         }
  186.  
  187.          .user-content {
  188.            background: linear-gradient(to right, #247a8c, #1f504f 1em);
  189.            border-left: 2px solid #43edca;
  190.        }
  191.  
  192.  
  193.         .user-content > p:first-child {
  194.           background: linear-gradient(268deg, hsla(181, 29%, 39%, 1) 0%, hsl(178.78deg 44.14% 21.76%) 100%);
  195.          }
  196.  
  197.         #additional-info .user-screenshots {
  198.              background: linear-gradient(259deg, hsla(181, 29%, 39%, 1) 0%, hsl(178.78deg 44.14% 21.76%) 100%);
  199.         }
  200.  
  201.  .list-option.list-current {
  202.            border-left: 7px solid #800;
  203.            box-shadow: 0 1px 0px 6px #0000001a;
  204.            background: linear-gradient(#1e5952, #7648a0);
  205.        }
  206.  
  207. form.new_user input[type="submit"] {
  208.               color: rgb(255, 255, 255);
  209.               background-color: rgb(55, 14, 88);
  210.               background-image: linear-gradient(rgb(25, 139, 120), rgb(55, 14, 88));
  211.           }
  212.  
  213.  /* лист групп */
  214.         .list-option-group a:hover, .list-option-group a:focus {
  215.             background: linear-gradient(#3c646b, #8b75a7);
  216.             text-decoration: none;
  217.             box-shadow: inset 0 -1px #ddd, inset 0 1px #eee;
  218.         }
  219.  
  220.  
  221.  
  222.   #script-info {
  223.             border: 1px solid #BBBBBB;
  224.             border-radius: 5px;
  225.             clear: left;
  226.             background-color: #1f504f;
  227.             margin: 1em 0 0;
  228.             box-shadow: 0px 14px 14px 1px #000000a2;
  229.         }
  230.  
  231.  
  232.         .form-control textarea:not([rows]), #ace-editor {
  233.             height: 20em;
  234.             background-color: #1a3a38;
  235.             color: #9fc8bf;
  236.         }
  237.  
  238.        .previewable textarea {
  239.            margin: 0;
  240.            background-color: #1a3a38;
  241.        }
  242.  
  243.        .ace_gutter-cell {
  244.            color: aquamarine;
  245.        }
  246.  
  247.        .ace_folding-enabled {
  248.            background-color: #557657;
  249.        }
  250.  
  251.         a {
  252.             color: #24d5a8;
  253.         }
  254.  
  255.  
  256.         a:visited {
  257.             color: #162c64;
  258.         }
  259.  
  260.        .reportable {
  261.            background-color: #154540;
  262.        }
  263.  
  264.        .text-content:last-child {
  265.            background-color: #154540;
  266.        }
  267.  
  268.        .script-list {
  269.            background-color: #154540;
  270.        }
  271.  
  272.        .list-option-group ul {
  273.            background-color: #44404e;
  274.        }
  275.  
  276.  
  277.  
  278.  
  279.        #add-additional-info {
  280.            background-color: #a48cb3;
  281.            padding: 10px 20px;
  282.            border: none;
  283.            border-radius: 5px;
  284.            cursor: pointer;
  285.            font-size: 16px;
  286.            transition: background-color 0.3s;
  287.        }
  288.  
  289.  
  290.           input[type="submit"][name="commit"] {
  291.           background-color: #a48cb3;
  292.           padding: 10px 20px;
  293.           border: none;
  294.           border-radius: 5px;
  295.           cursor: pointer;
  296.           font-size: 16px;
  297.           transition: background-color 0.3s;
  298.       }
  299.  
  300.           /* При наведении на кнопку */
  301.           input[type="submit"][name="commit"]:hover {
  302.               background-color: #45a049; /* Темнее при наведении */
  303.           }
  304.  
  305.          /* text Code editor Li */
  306.          li.L1, li.L3, li.L5, li.L7, li.L9 {
  307.              background: #152d2d;
  308.         }
  309. /* цвет фона  выделения текста в редакторе  */
  310. .ace-tm .ace_marker-layer .ace_selection {
  311.     background: #1f6b53;
  312. }
  313.  
  314.       #version-note {
  315.           background-color: #ffc79980;
  316.           border: 2px dotted #3bd39e;
  317.       }
  318.  
  319.       nav nav {
  320.       position: absolute;
  321.       right: 0px;
  322.       background-color: #62556f;
  323.       min-width: 100%;
  324.       display: none;
  325.       z-index: 10;
  326.       padding: 5px 0px;
  327.       border-radius: 12px;
  328.       }
  329.  
  330.        .notice {
  331.            background-color: #148a88a9;
  332.            border-left: 6px solid #ad85d9;
  333.            padding: 0.5em;
  334.        }
  335.  
  336.         form.external-login-form {
  337.             position: relative;
  338.             display: table;
  339.             background-color: rgb(42, 77, 80);
  340.             text-align: center;
  341.             margin: 0px auto;
  342.             padding: 1em;
  343.             border-width: 1px;
  344.             border-style: solid;
  345.             border-color: rgb(63, 218, 179);
  346.             border-image: initial;
  347.             border-radius: 5px;
  348.         }
  349.  
  350.           form.new_user {
  351.               position: relative;
  352.               width: 340px;
  353.               background-color: #2a4d50;
  354.               text-align: start;
  355.               margin: 0px auto;
  356.               padding: 1em;
  357.               border-width: 1px;
  358.               border-style: solid;
  359.               border-color: rgb(42, 211, 160);
  360.               border-image: initial;
  361.               border-radius: 5px;
  362.           }
  363.  
  364.  
  365.  
  366.           input#user_email {
  367.           background-color: #4f3a5f;
  368.           opacity: 0.8;
  369.       }
  370.       input#user_password {
  371.           background-color: #4f3a5f;
  372.           opacity: 0.8;
  373.       }
  374.  
  375.        button.external-login {
  376.            color: white;
  377.            font-size: 1.1em; /* Немного увеличил размер */
  378.            padding: 12px 20px;
  379.            border: none;
  380.            border-radius: 8px;
  381.            cursor: pointer;
  382.            transition: all 0.3s ease-in-out;
  383.            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  384.        }
  385.  
  386.        button.external-login:hover {
  387.            transform: scale(1.05); /* Небольшое увеличение при наведении */
  388.            box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
  389.        }
  390.  
  391.        button.external-login.google_oauth2-login {
  392.            background-color: #30558e;
  393.        }
  394.  
  395.        button.external-login.gitlab-login {
  396.            background-color: #af8548;
  397.        }
  398.  
  399.        button.external-login.github-login {
  400.            background-color: #292e5f;
  401.        }
  402.          .tabs .current {
  403.           box-shadow: #00000060 1px 0px inset, #00000077 -1px 0px inset, #00000052 0px -1px inset;
  404.           border-top: 7px solid #21a392;
  405.           border-radius: 4px 4px 0 0;
  406.       }
  407.  
  408.       /* tab hover */
  409.       .tabs .current, .tabs>*:not(.current) a:hover, .tabs>*:not(.current) a:focus {
  410.     background: #98ab3761;
  411.     box-shadow: 0px 11px 7px 1px #000000a2;
  412. }
  413.  
  414.  
  415.            input[type="file" i]::-webkit-file-upload-button {
  416.                appearance: none;
  417.                font-size: 1.1em;
  418.                font-weight: bold;
  419.                text-align: center;
  420.                cursor: pointer;
  421.                box-sizing: border-box;
  422.                background-color: #215e53;
  423.                color: white;
  424.                padding: 8px 14px;
  425.                border: 2px solid #2cb389;
  426.                border-radius: 6px;
  427.                transition: all 0.3sease-in-out;
  428.                box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  429.            }
  430.            }
  431.  
  432.            input[type="file" i]::-webkit-file-upload-button:hover {
  433.                transform: scale(1.05); /* Увеличение при наведении */
  434.                box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
  435.                background-color: #357abd; /* Темнее при наведении */
  436.            }
  437.  
  438.            input[type="file" i]::-webkit-file-upload-button:active {
  439.                transform: scale(0.98); /* Небольшое уменьшение при клике */
  440.                box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  441.            }
  442. span.rating-icon.rating-icon-good {
  443.     background: #22731c;
  444. }
  445.  
  446.  
  447.  
  448.  
  449.  
  450.  
  451.  
  452. input[type="submit"] {
  453.     background-color: #16302f; /* red  фон */
  454.     color: white; /* Белый текст */
  455.     border: none; /* Без границы */
  456.     border-radius: 12px; /* Сглаженные углы */
  457.     padding: 15px 32px; /* Отступы (вверх/низ, влево/вправ) */
  458.     text-align: center; /* Текст по центру */
  459.     text-decoration: none; /* Без подчеркивания */
  460.     display: inline-block; /* Для правильного отображения */
  461.     font-size: 16px; /* Размер шрифта */
  462.     cursor: pointer; /* Курсор в виде руки */
  463.     transition: background-color 0.3s ease, transform 0.2s ease; /* Плавное изменение фона и анимация */
  464. }
  465.  
  466. input[type="submit"]:hover {
  467.     background-color: #15584f; /* Цвет при наведении */
  468.     transform: translateY(-2px); /* Легкий эффект поднятия кнопки */
  469. }
  470.  
  471. input[type="submit"]:active {
  472.     background-color: #401c1c; /* Цвет при нажатии */
  473.     transform: translateY(0); /* Кнопка возвращается в исходное положение */
  474. }
  475.  
  476. input[type="submit"]:focus {
  477.     outline: none; /* Убираем обводку при фокусе */
  478.     box-shadow: 0 0 5px rgba(0, 0, 0, 0.2); /* Легкая тень при фокусе */
  479. }
  480.  
  481.  
  482.     `);
  483.  
  484.  
  485.  
  486.  
  487.         // Добавляем кастомный scrollbar   на страницу
  488.     GM_addStyle(`
  489.  
  490.  
  491. ::-webkit-scrollbar {
  492.       width: 25px;
  493.     background: -webkit-linear-gradient(44deg, hsla(170, 52%, 38%, 1) 0%, hsla(285, 66%, 31%, 1) 56%, hsla(34, 100%, 38%, 1) 100%);
  494. }
  495.  
  496. ::-webkit-scrollbar-thumb {
  497.   background-color: #C1A5EF; /* Цвет бегунка */
  498.   border-radius: 22px; /* Скругление бегунка */
  499.   border: 3px solid #4F3E6A; /* Внутренний отступ (цвет трека) */
  500.   height: 80px; /* Высота бегунка */
  501. }
  502.  
  503. ::-webkit-scrollbar-thumb:hover {
  504.   background-color: #C6AEFF; /* Цвет бегунка при наведении */
  505. }
  506.  
  507. ::-webkit-scrollbar-thumb:active {
  508.   background-color: #B097C9; /* Цвет бегунка при активном состоянии */
  509. }
  510.  
  511. ::-webkit-scrollbar-track {
  512.   background:rgba(69, 85, 101, 0); /* Цвет трека */
  513.   border-radius: 0px 0px 8px 0px; /* Скругление только нижнего правого угла */
  514. }
  515.  
  516. ::-webkit-scrollbar-track:hover {
  517.   background-color:rgba(69, 85, 101, 0); /* Цвет трека при наведении */
  518. }
  519.  
  520. ::-webkit-scrollbar-track:active {
  521.   background-color:rgba(69, 85, 101, 0); /* Цвет трека при активном состоянии */
  522. }
  523.  
  524. /*  фон таблица канвас статистика */
  525. canvas#install-stats-chart-container-canvas {
  526.     background: #004737;
  527. }
  528.  
  529.  
  530. /* Базовые стили для всех кнопок */
  531. button {
  532.     background: #673AB7; /* Основной цвет */
  533.     color: #ffffff; /* Белый цвет текста */
  534.     padding: 10px 20px; /* Внутренние отступы */
  535.     border: none; /* Убираем стандартную границу */
  536.     border-radius: 6px; /* Скругленные углы */
  537.     font-size: 14px; /* Размер шрифта */
  538.     font-weight: 500; /* Полужирный шрифт */
  539.     cursor: pointer; /* Курсор в виде руки */
  540.     transition: all 0.3s ease; /* Плавные переходы */
  541.     box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2); /* Легкая тень */
  542.     position: relative; /* Для эффектов с псевдоэлементами */
  543.     overflow: hidden; /* Скрываем переполнение для эффектов */
  544. }
  545.  
  546. /* Эффект при наведении: затемнение и подъем */
  547. button:hover {
  548.     background: #5e35a6; /* Чуть темнее */
  549.     box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); /* Увеличиваем тень */
  550.     transform: translateY(-2px); /* Подъем кнопки */
  551. }
  552.  
  553. /* Эффект при нажатии: опускание */
  554. button:active {
  555.     background: #552e91; /* Еще темнее */
  556.     box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); /* Уменьшаем тень */
  557.     transform: translateY(1px); /* Опускание кнопки */
  558. }
  559.  
  560. /* Эффект пульсации для привлечения внимания */
  561. button[name="save"] {
  562.     animation: pulse 2s infinite ease-in-out; /* Пульсация только для кнопки Save */
  563. }
  564.  
  565. @keyframes pulse {
  566.     0% {
  567.         box-shadow: 0 0 0 0 rgba(103, 58, 183, 0.7);
  568.     }
  569.     50% {
  570.         box-shadow: 0 0 0 10px rgba(103, 58, 183, 0);
  571.     }
  572.     100% {
  573.         box-shadow: 0 0 0 0 rgba(103, 58, 183, 0);
  574.     }
  575. }
  576.  
  577. /* Эффект волны при нажатии */
  578. button::after {
  579.     content: '';
  580.     position: absolute;
  581.     width: 100px;
  582.     height: 100px;
  583.     background: rgba(255, 255, 255, 0.3);
  584.     border-radius: 50%;
  585.     top: 50%;
  586.     left: 50%;
  587.     transform: translate(-50%, -50%) scale(0);
  588.     opacity: 0;
  589.     transition: transform 0.5s ease, opacity 0.5s ease;
  590. }
  591.  
  592. button:active::after {
  593.     transform: translate(-50%, -50%) scale(2);
  594.     opacity: 1;
  595. }
  596.  
  597. /* Специфические стили для кнопки "Remove selected" */
  598. button[name="remove-selected-scripts"] {
  599.     background: #d32f2f; /* Красный цвет для кнопки удаления */
  600. }
  601.  
  602. button[name="remove-selected-scripts"]:hover {
  603.     background: #b71c1c; /* Темнее при наведении */
  604. }
  605.  
  606. button[name="remove-selected-scripts"]:active {
  607.     background: #9a0000; /* Еще темнее при нажатии */
  608. }
  609.  
  610.   `);
  611.  
  612. })();
  613.