Dark Mode

[Orpheus]

Просмотр файла

Dark Mode

---

This app allows you to create a dark mode color scheme for your themes.

---

• Добавил
  Orpheus
• Добавлено
  12.04.2022
• Категория
  Интерфейс
• Язык
  English / английский

 

Thanks to @Juar for the file

[by_ix]

сомнительное приложение. нет никаких чётких инструкций и не знающий человек может легко поломать себе основную тему. но, сама суть у него интересная и полезная. 

[Orpheus]

58 minutes ago, by_ix said:

сомнительное приложение. нет никаких чётких инструкций и не знающий человек может легко поломать себе основную тему. но, сама суть у него интересная и полезная. 

Right said, but as far as I know it only changes some colors in theme and you can easily revert back your broken theme (which I think you're referring to) using the revert button available when you apply this last option.

Using this button changes the color of the theme to dark and there is no option to rollback all changes which that option made. The only way is to use the revert button available in IPS built-in.

Since, it's a pretty much a new release so it's fair enough for now.

[Juar]

57 минут назад, by_ix сказал:

сомнительное приложение. нет никаких чётких инструкций и не знающий человек может легко поломать себе основную тему. но, сама суть у него интересная и полезная. 

Могу поделится инструкцией, на основании собственных экспериментов:

Прежде чем начинать работать с приложение советую сделать копию темы, чтобы была возможность быстро восстановить все цвета!

Приложение создает в админке, в каждой теме вкладку "Dark Mode", зайдя в которую для каждой темы можно включить или выключить Dark Mode, делается это переключателем "
Enable Dark Mode?"

Нажав "Get theme colors" в окне получаете все переменные с цветами которые используются сейчас в теме (первое действие которое надо сделать)

Нажав "Get dark mode demo" в окне все переменные с текущими цветами заменяются на более темные (второе действие которое надо сделать)  

Третье действие - все переменные с более темными цветами надо ВЫРЕЗАТЬ из окна и вставить в окно "Dark Mode color scheme"

Четвертое действие - нажимает Сохранить.

Для ускорения проверки очищаем кэш (раздел Поддержка - Очистить системный кэш)

 

ВНИМАНИЕ - надо быть ОЧЕНЬ аккуратным с нажатием на "Apply Color Values" если туда нажать в тот момент когда в окне (без названия) будут  все переменные с замеными более темными цветами и после этого нажать Сохранить, то все текущие (светлые) цвета в теме будут заменены на темные и вы можете получить оба режима темный и светлый с одинаковыми темными цветами.
Восстановить потом цвета без копии темы будет крайне трудоемко.

P.S. Если в процессе экспериментов Вы все таки добились что оба режима стали темными, то заходите в копию темы, нажимайте "Get theme colors", копируйте в буфер все переменные с изначальными цветами, заходите в "темные" тему, вставляйте из буфера в окно (без названия), нажимайте  "Apply Color Values" и нажимайте Сохранить.
Очищайте кэш и все восстановится назад.

Удачных экспериментов 😉 

[napolion]

Does not work in Invision Community 4.6.12 version

Apparently it doesn't copy the values from the darkmode.json file

In my case I had to copy it manually

Hopefully there will be another version that makes it automatic

And don't bother about whether it breaks the theme by default since deleting the application returns everything to normal. This app works independent from Invision Community

[napolion]

That yes, the colors are fantastic. I have to admit that the creator is a good developer

Please excuse my writing in English, it's not good. I am from Argentina

If it doesn't work for them,

--theme-primary_button: 184,54,54;--theme-primary_button_font: 255,255,255;--theme-alternate_button: 23,126,201;--theme-alternate_button_font: 255,255,255;--theme-normal_button: 23,126,201;--theme-normal_button_font: 255,255,255;--theme-important_button: 23,126,201;--theme-important_button_font: 255,255,255;--theme-light_button: 67,73,86;--theme-light_button_font: 169,174,189;--theme-very_light_button: 67,73,86;--theme-very_light_button_font: 169,174,189;--theme-button_bar: 67,73,86;--theme-pagination_active: 62,65,72;--theme-link_button: 23,126,201;--theme-brand_primary: 23,126,201;--theme-page_background: 31,33,38;--theme-header: 45,49,57;--theme-header_text: 203,205,212;--theme-main_nav: 83,91,108;--theme-main_nav_font: 255,255,255;--theme-main_nav_tab: 45,49,57;--theme-main_nav_tab_font: 169,174,189;--theme-area_background_dark: 45,55,72;--theme-area_background: 45,49,57;--theme-area_background_light: 56,61,71;--theme-area_background_reset: 45,49,57;--theme-selected: 67,73,86;--theme-selected_border: 23,126,201;--theme-profile_header: 53,60,65;--theme-tag: 255,244,223;--theme-tag_font: 156,66,33;--theme-prefix: 23,126,201;--theme-widget_title_bar: 67,73,86;--theme-widget_title_font: 169,174,189;--theme-moderated: 247,237,241;--theme-moderated_light: 56,61,71;--theme-moderated_text: 222,165,165;--theme-moderated_text_light: 164,118,143;--theme-rating_on: 255,152,0;--theme-timeline_color: 45,55,72;--theme-item_status: 23,126,201;--theme-notification_bubble: 54,171,128;--theme-mentions: 61,101,148;--theme-tab_background: 74,85,104;--theme-post_highlight: 253,245,231;--theme-post_highlight_border: 129,98,46;--theme-comment_count: 237,242,247;--theme-comment_count_font: 45,55,72;--theme-featured: 44,140,105;--theme-active_input_border: 52,128,187;--theme-text_color: 169,174,189;--theme-text_dark: 169,174,189;--theme-text_very_light: 255,255,255;--theme-text_light: 169,174,189;--theme-link: 255,255,255;--theme-link_hover: 23,126,201;--theme-section_title: 67,73,86;--theme-section_title_font: 169,174,189;--theme-secondary_title: 235,237,240;--theme-secondary_title_font: 130,142,153;--theme-footer_text: 169,174,189;--theme-price: 182,63,63;

--theme-primary_button: 184,54,54;--theme-primary_button_font: 255,255,255;--theme-alternate_button: 62,65,72;--theme-alternate_button_font: 255,255,255;--theme-normal_button: 23,126,201;--theme-normal_button_font: 255,255,255;--theme-important_button: 25,71,103;--theme-important_button_font: 201,218,229;--theme-light_button: 61,61,61;--theme-light_button_font: 255,255,255;--theme-very_light_button: 52,52,54;--theme-very_light_button_font: 125,125,125;--theme-button_bar: 14,16,17;--theme-pagination_active: 184,54,54;--theme-link_button: 141,154,166;--theme-pagination_activetext: 255,255,255;--theme-stickysociallinks_bg: 13,15,17;--theme-stickysociallinks_bgaxc: 47,48,51;--theme-brand_primary: 184,54,54;--theme-widget_bg: 13,15,17;--theme-widget_bgxcso: 47,48,51;--theme-widget_title_bar: 23,24,26;--theme-widget_title_font: 187,189,197;--theme-page_background: 17,20,22;--theme-header: 35,37,40;--theme-header_text: 167,167,167;--theme-main_nav: 23,25,27;--theme-main_navxcso: 45,46,50;--theme-main_navbghover: 23,24,26;--theme-main_nav_font: 187,189,197;--theme-main_nav_fonthover: 187,189,197;--theme-main_nav_tab: 13,15,17;--theme-main_nav_tab_bghover: 23,24,26;--theme-main_nav_tab_font: 187,189,197;--theme-main_nav_tab_fonthover: 187,189,197;--theme-area_background_dark: 15,17,18;--theme-area_background: 14,15,16;--theme-area_background_light: 52,52,52;--theme-area_background_reset: 25,26,28;--theme-selected: 40,80,76;--theme-selected_border: 23,126,201;--theme-profile_header: 53,60,65;--theme-userbar_bg: 23,25,27;--theme-userbar_bgxcso: 45,46,50;--theme-tag: 255,244,223;--theme-tag_font: 156,66,33;--theme-userbar_text: 167,167,167;--theme-prefix: 182,63,63;--theme-quicksearch_bg: 23,25,27;--theme-quicksearch_text: 208,219,219;--theme-quicksearch_iconcolor: 181,205,183;--theme-moderated: 157,69,83;--theme-moderated_light: 64,69,70;--theme-moderated_text: 204,204,204;--theme-moderated_text_light: 153,153,153;--theme-rating_on: 255,152,0;--theme-timeline_color: 184,54,54;--theme-item_status: 157,157,157;--theme-notification_bubble: 184,54,54;--theme-tab_text: 75,80,88;--theme-mentions: 61,101,148;--theme-tab_background: 13,14,14;--theme-post_highlight: 253,245,231;--theme-post_highlight_border: 129,98,46;--theme-comment_count: 71,86,97;--theme-comment_count_font: 255,255,255;--theme-featured: 214,103,35;--theme-active_input_border: 184,54,54;--theme-ipsTooltip_bg: 184,54,54;--theme-text_color: 160,160,160;--theme-text_dark: 101,104,115;--theme-text_very_light: 255,255,255;--theme-text_light: 132,132,132;--theme-link: 160,160,160;--theme-link_hover: 182,63,63;--theme-section_title: 44,45,48;--theme-section_title_font: 187,189,197;--theme-secondary_title: 30,31,37;--theme-secondary_title_font: 130,142,153;--theme-price: 182,63,63;--theme-footer_text: 169,169,169;--theme-footer_mainbg: 28,30,31;

 

[by_ix]

46 минут назад, napolion сказал:

since deleting the application returns everything to normal

приложение заменяет стандартные цвета в теме, если нажать третье действие и сохранить.
поэтому, удаление не поможет.

Изменено 12 апреля, 2022 пользователем by_ix

[Orpheus]

5 minutes ago, by_ix said:

приложение заменяет стандартные цвета в теме, если нажать третье действие и сохранить.
поэтому, удаление не поможет.

That's right, only revert button can help you then

[edmsl]

Если кому нужно, вот переведенная версия с инструкцией. Спасибо @Juar.

Спойлер

 

Dark Mode 1.0.1 RUS.tar

[DigneZzZ]

3 часа назад, edmsl сказал:

Если кому нужно, вот переведенная версия с инструкцией. Спасибо @Juar.

  Скрыть контент

 

Dark Mode 1.0.1 RUS.tar 73.5 \u043a\u0411 · 0 загрузок

А как потом эту измененную тему сохранить как отдельную, но чтобы кнопочки не было?)

Разобрался, не с первого раза получилось..

[DigneZzZ]

А есть понимание, как сделать чтобы одна тема теперь определялась как тёмная, а другая как светлая?

В обеих настроил темный/светлый.

Переключает нормально, но значок не меняется и тумблер не срабатывает.

Темная:

Светлая:

 

Есть мысли как поправить?

[aLEX49566]

Я себе сделал так:

без лишнего геморроя. И ставьте хоть 5 тем

Изменено 21 апреля, 2023 пользователем aLEX49566

[DigneZzZ]

3 минуты назад, aLEX49566 сказал:

Я себе сделал так:

без лишнего геморроя. И ставьте хоть 5 тем

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

[aLEX49566]

Только что, DigneZzZ сказал:

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

Думал об этом, да. Но в е fa fa с солнцем какие то..  да и у меня же там два варианта как не крути.. что то надо одно и там и там, но еще не знаю , что)

[DigneZzZ]

11 минут назад, aLEX49566 сказал:

Думал об этом, да. Но в е fa fa с солнцем какие то..  да и у меня же там два варианта как не крути.. что то надо одно и там и там, но еще не знаю , что)

Полюбому есть какое то свойство у темы, которому нужно задать параметр Dark..

[edmsl]

Модераторы, прошу заменить файл в этом сообщении или удалить его.

В нем есть серьезная ошибка в инструкции по применению.

Dark Mode 1.0.1 RUS.tar

Изменено 22 апреля, 2023 пользователем edmsl

[DigneZzZ]

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

В новой созданной тёмной теме нужно найти файл ipsfocus/configScheme

и поменять там значение с Light на Dark.

Теперь значок отображается корректно при переходе между темами:

Тёмная - 

Светлая - 

[edmsl]

Может кто знает. Есть ли возможность как-то "запомнить" используемую цветовую схему? При загрузке страницы сначала грузится светлая схема, потом цвета переключаются на темные. И вот это мерцание прям напрягает.

[edmsl]

Сам отвечу на свой вопрос выше. Проблема в порядке загрузки скриптов. Если коротко - скрипт не успевает отработать до загрузки страницы. Из-за этого и мерцание. Единственный выход, который я нашел, это выносить кусок кода с определением цветовой схемы в тег <head>, до загрузки всех прочих скриптов. При этом все остальные лучше загружать перед закрывающим тегом </body>. Но так как нельзя просто так назначить какому-то скрипту загружаться отдельно от остальных, не меняя вручную шаблона globalTemplate, то проще написать свою реализацию и отказаться от этого приложения.

Изменено 5 мая, 2023 пользователем edmsl

[DigneZzZ]

2 часа назад, edmsl сказал:

Сам отвечу на свой вопрос выше. Проблема в порядке загрузки скриптов. Если коротко - скрипт не успевает отработать до загрузки страницы. Из-за этого и мерцание. Единственный выход, который я нашел, это выносить кусок кода с определением цветовой схемы в тег <head>, до загрузки всех прочих скриптов. При этом все остальные лучше загружать перед закрывающим тегом </body>. Но так как нельзя просто так назначить какому-то скрипту загружаться отдельно от остальных, не меняя вручную шаблона globalTemplate, то проще написать свою реализацию и отказаться от этого приложения.

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

[edmsl]

DigneZzZ 

Вот как сделал я. Все действия в чистой стандартной теме.

Для начала ставим подключение файлов скриптов перед закрывающим тегом </body> в настройках темы -> Другое.

Затем в шаблон includeJS добавил:

Спойлер

<!-- End Facebook Pixel Code -->
{{endif}}
// Выше две строки это из шаблона. Остальное ниже - добавленный код.
<script type='text/javascript'>
  	var toggleColorBtns = document.querySelectorAll('.cColorMode_btn');
  
	if (window.CSS && CSS.supports('color', 'var(--primary)')) {
      var toggleColorMode = (e) => {
        if (e.currentTarget.classList.contains('light--hidden')) {
          document.documentElement.setAttribute('color-mode', 'light');  
          localStorage.setItem('color-mode', 'light');
          return;
        }
        
        document.documentElement.setAttribute('color-mode', 'dark'); 
        localStorage.setItem('color-mode', 'dark');
      };
    
      toggleColorBtns.forEach((btn) => {
        btn.addEventListener('click', toggleColorMode);
      });
    } else {  
      toggleColorBtns.forEach((btn) => {
        btn.style.display = 'none';
      });
	}
</script>

 

Затем в globalTemplate сразу перед закрывающим тэгом </head>. Хотя это не принципиально, главное, что в head.

Спойлер

<script type="text/javascript">
  if (
    localStorage.getItem('color-mode') === 'dark' ||
    (window.matchMedia('(prefers-color-scheme: dark)').matches &&
     !localStorage.getItem('color-mode'))
  ) {
    document.documentElement.setAttribute('color-mode', 'dark')
  }
</script>

 

Затем правим шаблоны навбара.

Для ПК: core -> front -> global -> userbar

Спойлер

<!-- Для залогиненных пользователей добавляем наш переключатель перед кнопкой уведомлений (колокольчиком) -->
<li class='cColorMode cUserNav_icon'>
  <button class="cColorMode_btn light--hidden" aria-label="Toggle light mode"> 	
    <i class="fa fa-sun-o color-mode-light-icon" _title="Светлая тема"></i>
  </button>
  <button class="cColorMode_btn dark--hidden" aria-label="Toggle dark mode">
    <i class="fa fa-moon-o color-mode-dark-icon" title="Темная тема"></i>
  </button>
</li>

<!-- Это кнопка уведомлений в коде шаблона -->
<li class='cNotifications cUserNav_icon'>
  
...

<!-- Затем для гостей перед кнопками регистрации -->
<!-- Первые две строки это родной код шаблона, затем наши кнопки -->
{{else}}
  <ul id='elUserNav' class='ipsList_inline cSignedOut ipsResponsive_showDesktop'>
    <li class='cColorMode cUserNav_icon'>
      <button class="cColorMode_btn light--hidden" aria-label="Toggle light mode"> 	
        <i class="fa fa-sun-o color-mode-light-icon" _title="Светлая тема"></i>
      </button>
      <button class="cColorMode_btn dark--hidden" aria-label="Toggle dark mode">
        <i class="fa fa-moon-o color-mode-dark-icon" title="Темная тема"></i>
      </button>
    </li>

 

Для планшетов и мобильных: core -> front -> global -> mobileNavigationIcon

Спойлер

<!-- Сразу после первой строки. -->
<ul class='ipsMobileHamburger ipsList_reset ipsResponsive_hideDesktop'>
  	<!-- Кнопки переключения темы -->
    <li class='cColorMode cUserNav_icon'>
      <button class="cColorMode_btn light--hidden" aria-label="Toggle light mode"> 	
        <i class="fa fa-sun-o color-mode-light-icon" _title="Светлая тема"></i>
      </button>
      <button class="cColorMode_btn dark--hidden" aria-label="Toggle dark mode">
        <i class="fa fa-moon-o color-mode-dark-icon" title="Темная тема"></i>
      </button>
    </li>

 

И, наконец, в custom.css:

Спойлер

/* Dark Mode */
.cColorMode button {
  	display: inline-block;
  	margin: 0;
  	padding: 0;
  	cursor: pointer;
	outline: none;
	background-color: transparent;
    color: inherit;
    border-radius: 4px;
    border: none;
  	vertical-align: baseline;
}

#elUserNav .cColorMode button {
  vertical-align: sub;
}

.cColorMode i {
  font-size: 20px;
}

.ipsMobileHamburger .cColorMode i {
  margin-right: 10px;
  font-size: 24px;
}

:root[color-mode="light"] .light--hidden {
    display: none;
}

:root[color-mode="dark"] .dark--hidden {
    display: none;
}

:root[color-mode="dark"] {
    --theme-primary_button: 184,54,54;
    --theme-primary_button_font: 255,255,255;
    --theme-alternate_button: 23,126,201;
    --theme-alternate_button_font: 255,255,255;
    --theme-normal_button: 23,126,201;
    --theme-normal_button_font: 255,255,255;
    --theme-important_button: 23,126,201;
    --theme-important_button_font: 255,255,255;
    --theme-light_button: 67,73,86;
    --theme-light_button_font: 169,174,189;
    --theme-very_light_button: 67,73,86;
    --theme-very_light_button_font: 169,174,189;
    --theme-button_bar: 67,73,86;
    --theme-pagination_active: 62,65,72;
    --theme-link_button: 23,126,201;
    --theme-brand_primary: 23,126,201;
    --theme-page_background: 31,33,38;
    --theme-header: 45,49,57;
    --theme-header_text: 203,205,212;
    --theme-main_nav: 83,91,108;
    --theme-main_nav_font: 255,255,255;
    --theme-main_nav_tab: 45,49,57;
    --theme-main_nav_tab_font: 169,174,189;
    --theme-area_background_dark: 45,55,72;
    --theme-area_background: 45,49,57;
    --theme-area_background_light: 56,61,71;
    --theme-area_background_reset: 45,49,57;
    --theme-selected: 67,73,86;
    --theme-selected_border: 23,126,201;
    --theme-profile_header: 53,60,65;
    --theme-tag: 255,244,223;
    --theme-tag_font: 156,66,33;
    --theme-prefix: 23,126,201;
    --theme-widget_title_bar: 67,73,86;
    --theme-widget_title_font: 169,174,189;
    --theme-moderated: 247,237,241;
    --theme-moderated_light: 56,61,71;
    --theme-moderated_text: 222,165,165;
    --theme-moderated_text_light: 164,118,143;
    --theme-rating_on: 255,152,0;
    --theme-timeline_color: 45,55,72;
    --theme-item_status: 23,126,201;
    --theme-notification_bubble: 54,171,128;
    --theme-mentions: 61,101,148;
    --theme-tab_background: 74,85,104;
    --theme-post_highlight: 253,245,231;
    --theme-post_highlight_border: 129,98,46;
    --theme-comment_count: 237,242,247;
    --theme-comment_count_font: 45,55,72;
    --theme-featured: 44,140,105;
    --theme-active_input_border: 52,128,187;
    --theme-text_color: 169,174,189;
    --theme-text_dark: 169,174,189;
    --theme-text_very_light: 255,255,255;
    --theme-text_light: 169,174,189;
    --theme-link: 255,255,255;
    --theme-link_hover: 23,126,201;
    --theme-section_title: 67,73,86;
    --theme-section_title_font: 169,174,189;
    --theme-secondary_title: 235,237,240;
    --theme-secondary_title_font: 130,142,153;
    --theme-footer_text: 169,174,189;
    --theme-price: 182,63,63;
}
/* Dark Mode */

 

В итоге имеем одну тему с переключением цветов без обновления страницы и мигания при переходах. Во всяком случае у меня не мигает больше.