[ID CC2023] Помогите изменить отображение svg в зависимости от темы в программе чтения

класс .dark-theme и light-theme должен появляться у тэга <body>, тогда сработает
 
eugeny сказал(а):
непонятно где класс появляется .dark-theme и light-theme
Нажмите, чтобы раскрыть...
это есть только в CSS, я боролся за то, что бы цвет менялся в зависимости от темы - темная или светлая. Судя по тому что вчера читал - это можно было налету реализовать через fill: currentColor, но ничего не получилось т.к. если как Вы выше заметили если svg встроен как image, то чуда не происходит...
 
найдите в css файле класс book-title, посмотрите как он связан dark-theme и light-them
Заголовок же меняет цвет. Надо сделать по аналогии.
 
eugeny сказал(а):
найдите в css файле класс book-title, посмотрите как он связан dark-theme и light-them
Заголовок же меняет цвет. Надо сделать по аналогии.
Нажмите, чтобы раскрыть...
у меня там два вхождения всего book-title но связи я не вижу.
 

Вложения

у вас есть такие классы?
body.dark-theme и body.light-them
если вы в этих классах определили переменную currentColor, то она сильнее и будет забивать .dark-theme .meta-logo svg
 
eugeny сказал(а):
у вас есть такие классы?
body.dark-theme и body.light-them
если вы в этих классах определили переменную currentColor, то она сильнее и будет забивать .dark-theme .meta-logo svg
Нажмите, чтобы раскрыть...
у меня в CSS есть только
}
.meta_logo svg {
fill: currentColor;
}
.light-theme .meta_logo svg {
fill: #000000;
}
.dark-theme .meta_logo svg {
fill: #ffffff;
}
 
Посмторел я ваш css.
Там тэг body вообще не связан с классами .dark-theme и .light-theme.
Т.е. у вас при переключение темы не факт, что добавляется такой класс. Соответственно, dark-theme .meta_logo svg никогда не появится.
Нужно изучать как меняется тема в epub или в читалках.
Может там тупо добавляется body color: white; background-color: black.

В вашем случае вы откуда-то взяли два класса, которых по факту нет в вашем коде. Надо гуглить как меняется тема в читалках, что добавляется в код, и тогда решим проблему.
 
  • Спасибо
Реакции: Tango
eugeny сказал(а):
Посмторел я ваш css.
Там тэг body вообще не связан с классами .dark-theme и .light-theme.
Т.е. у вас при переключение темы не факт, что добавляется такой класс. Соответственно, dark-theme .meta_logo svg никогда не появится.
Нужно изучать как меняется тема в epub или в читалках.
Может там тупо добавляется body color: white; background-color: black.

В вашем случае вы откуда-то взяли два класса, которых по факту нет в вашем коде. Надо гуглить как меняется тема в читалках, что добавляется в код, и тогда решим проблему.
Нажмите, чтобы раскрыть...
Когда я это прочитал, то не думал что это превратится в два дня чтения и экспериментов.... Спасибо за Ваше время.

Чтобы разделители и логотип адаптировались под темную тему:

  1. Создайте их в векторном редакторе, например Inkscape, в черном цвете на прозрачном фоне.
  2. Сохраните в формат SVG.
  3. При вставке в EPUB-файл укажите параметр fill="currentColor", чтобы заливка брала текущий цвет темы.
  4. В CSS EPUB пропишите цвет разделителей для светлой и темной тем соответственно, например:
.light-theme .divider { color: #000000; }

.dark-theme .divider { color: #ffffff; }

Таким образом разделители будут автоматически менять цвет при смене тем оформления в приложениях для чтения EPUB. Аналогично можно реализовать и для логотипа.
 
  • Спасибо
Реакции: eugeny
ну надо пробовать
.light-theme .divider { color: #000000; }
.dark-theme .divider { color: #ffffff; }

В svg коде в начале есть строчка: <g style="clip-path:url(#b); ">
попробуйте ее изменить <g style="clip-path:url(#b);fill:currentColor ">

это меняет цвет без класса, в самом svg
 
  • Спасибо
Реакции: Tango
Tango сказал(а):
Когда я это прочитал, то не думал что это превратится в два дня чтения и экспериментов.... Спасибо за Ваше время.

Чтобы разделители и логотип адаптировались под темную тему:

  1. Создайте их в векторном редакторе, например Inkscape, в черном цвете на прозрачном фоне.
  2. Сохраните в формат SVG.
  3. При вставке в EPUB-файл укажите параметр fill="currentColor", чтобы заливка брала текущий цвет темы.
  4. В CSS EPUB пропишите цвет разделителей для светлой и темной тем соответственно, например:
.light-theme .divider { color: #000000; }

.dark-theme .divider { color: #ffffff; }

Таким образом разделители будут автоматически менять цвет при смене тем оформления в приложениях для чтения EPUB. Аналогично можно реализовать и для логотипа.
Нажмите, чтобы раскрыть...
Написано складно - только не заработало
 
eugeny сказал(а):
ну надо пробовать
.light-theme .divider { color: #000000; }
.dark-theme .divider { color: #ffffff; }

В svg коде в начале есть строчка: <g style="clip-path:url(#b); ">
попробуйте ее изменить <g style="clip-path:url(#b);fill:currentColor ">

это меняет цвет без класса, в самом svg
Нажмите, чтобы раскрыть...
Screenshot 2023-09-22 at 13.07.49.png
 
  • Спасибо
Реакции: eugeny
eugeny сказал(а):
ну надо пробовать
.light-theme .divider { color: #000000; }
.dark-theme .divider { color: #ffffff; }

В svg коде в начале есть строчка: <g style="clip-path:url(#b); ">
попробуйте ее изменить <g style="clip-path:url(#b);fill:currentColor ">

это меняет цвет без класса, в самом svg
Нажмите, чтобы раскрыть...
Вы таки нашли серебрянную пулю!! Снимаю шляпу :) Подскажите ещё парню из песочницы как логотип в размер загнать, а то он у меня по всей странице растянут, хотя в коде svg размер вроде задан.
 
у класса .meta_logo задайте width: 20% ну или какой подберете удобный размер
в коде он задан, но там такая хитрожопая система пропорций ))
 
Последнее редактирование:
надо задать у .meta_logo
а не у .meta_logo svg
т.е. вверху у класса где он без svg добавьте width
 
  • Спасибо
Реакции: Tango
Для ответа нужно войти/зарегистрироваться
Верх Низ