Офтоп
Сэр Ланселап
2539

Make DTF dark ...again!

В закладки
Я такой же dark soul как и Вы, сэр!

На базе существующих юзертем для веб-плагина Stylus - "DarkTF" и вчерашней "Dark One", я решил попробовать сотворить одну такую собственными силами. Получилось вроде неплохо (*активная объективация*), а потому - спешу поделиться с котиками DTF. Собакены DTF также приглашены к столу!

При создании я ориентировался на лучший UI созданный рукой человека - "Discord" (апелляции к этому аргументу не принимаются!), а также черпал вдохновение из цветовой схемы для IDE - "darcula". Лонгрид на 4 авторских листа с подробной историей душевных терзаний в процессе разработки ожидайте в скором времени! А пока, немного скриншотов (аве всем кто попал в телевизор!):

Если захотите попробовать, установка происходит следующим образом (работоспособность подтверждена в Chrome и Firefox):

1) В любом удобном поисковике забиваем запрос вида:

*названиеВашегоБраузера* + Stylus ->

2) Устанавливаем плагин Stylus ->

3) Переходим по ссылочке и устанавливаем юзертему ->

4) "Let the legend come back to DTF", можно под музыку

А какую музыку любишь ты? Я люблю эту - она ужасно взрослая!

Все коммерческие ( ͡° ͜ʖ ͡°) предложения и просто идеи по дальнейшему развитию сабжа можете смело строчить в комменты!

Всех люблю, всех целую (даже нахтигалку),

искренне ваш,

Сэр Ланселап.

Материал опубликован пользователем.
Нажмите кнопку «Написать», чтобы поделиться мнением или рассказать о своём проекте.

Написать
{ "author_name": "Сэр Ланселап", "author_type": "self", "tags": [], "comments": 63, "likes": 81, "favorites": 59, "is_advertisement": false, "subsite_label": "flood", "id": 80443, "is_wide": false, "is_ugc": true, "date": "Sat, 09 Nov 2019 11:02:58 +0300", "is_special": false }
Объявление на DTF
Хакатон
Как объяснить механику и не потерять игрока в первые минуты
Спойлер: аккуратно бросить его сразу в бой.
(function(d, w) { var wrapper = d.getElementById('apost-tsr'), isMobile = w.matchMedia('(max-width: 400px)').matches, isArticle = wrapper.classList.contains('in-article'), gif = d.createElement('img'); gif.onload = function() { wrapper.classList.add('is-loaded'); }; gif.src = (isArticle) ? 'https://leonardo.osnova.io/b2b69d93-806a-d2f2-4697-577683765baa/' : (isMobile) ? 'https://leonardo.osnova.io/82f3c702-be47-2c95-ed12-15741ca2f2e9/' : 'https://leonardo.osnova.io/5121d3f7-d8f5-4cf1-7b61-a184c726c32f/'; }(document, window));
0
{ "id": 80443, "author_id": 161472, "diff_limit": 1000, "urls": {"diff":"\/comments\/80443\/get","add":"\/comments\/80443\/add","edit":"\/comments\/edit","remove":"\/admin\/comments\/remove","pin":"\/admin\/comments\/pin","get4edit":"\/comments\/get4edit","complain":"\/comments\/complain","load_more":"\/comments\/loading\/80443"}, "attach_limit": 2, "max_comment_text_length": 5000, "subsite_id": 64955, "last_count_and_date": null }
63 комментария
Популярные
По порядку
Написать комментарий...
28

Добавил пробник в пост 💖

Ответить
18

Все круть, кроме вот этого: 

Ответить
0

В оригинале так выглядит через Stylus, мб баг какой вылез из-за наложения поверх.

Ответить
1

Это не баг, это:
.vote--comment .vote__value {
background-color: #eefbf3;
}

Ответить
2

И сломал этим мобильную версию)

Ответить
0

У меня все работает, я с телефона и добавил 

Ответить
0

Переходишь такой из прямого эфира, потому что не понимаешь о чём речь... а потом как понимаешь!

Ответить
0

А в пост с моей темой не добавил 😡

Ответить
0

Автор, скажи если не секрет, ты референс брал с сайта ехидных колобков?

Ответить
0

Я не автор плагина

Ответить
30

Комитет как Bethesda:
Модами допилят!

Ответить
6

General Kenobi

Ответить
4

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

пс и букавки можно чуток посветлее сделать.

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

Ответить
0

Понял, принял. Как смогу - поэкспериментирую ещё с деталями.
тема не полностью соответствует требованиям темной темы

Блен, вот да, я на счёт этого сомневался как раз, но решил, что уж лучше пусть будет пока в форме эдакого гибрида, которого не обязательно отключать днём.
Если есть идеи как этот аспект можно ещё подтянуть, будь то рецепты профессионального толка или с дивана, без разницы, пишите - я подумаю как это всё мержануть со своими представлениями ради чуть более совершенного "билда".

Ответить
2

Вот иди и сделай

Ответить
7

Эй! Я вообще-то уже! Глупый бот (╯°益°)╯彡┻━┻

Ответить
3

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

Ответить
0

Не привык за минуту-две? Если нет, то отпиши в двух словах что именно бросается в глаза. Я эксперементировал много с основным цветом текста, более яркий конкретно уносил глаза, остальное вроде +/- нейтральное без резких контрастов. По крайней мере с белым на сером везде получалось ещё хуже в плане ощущений.

Ответить
0

Я использую Dark Reader. И вот когда я переключился на эту страницу, мне показалось, что включили прожектор, ослепляющий мои глаза. мне кажется, основные цвета совсем не подходят для темной темы.

Ответить
0

А печеньки будут?

Ответить
0

Целая темная тема печенек.

Ответить
1

Аж повеяло какими-то сталкерскими сайтеками на юкозах) Там в подобном цвете все было.

Ответить
5

Поставил, непривычно, но выглядит достойно. Автору плюсек

Ответить
1

Это что метеоритный дождь? Нет, это поток фанатских темных тем...которым никогда не суждено "упасть" на ДТФ...

Ответить
2

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

Ответить
2

Ох, это была не критика творчества людей, а скорее безысходность наших ожиданий темной темы)

Ответить
0

А печеньки будут?

Ответить
0

Извините, но я не пекарь( Яжи ГеЙмДиЗаЙнЕр!

Ответить
0

А разве оно надо. ?) 

Ответить
0

А я и не знаю) Все просят ия хочу ;)

Ответить
0

Да понятно ) у самого множество знакомых с таким фетишом, везде им подавай темную тему . Но как по мне это вообще не проблема что бы столько внимания ей уделять 😅

Ответить
0

Давайте лучше сделаем дтф новый логотип

Ответить
4

Есть тут пара вариантов

Ответить
0

Тогда уж сразу название

Ответить
1

Мне нравится!
Только вот эта черная полоска сверху...брр.
И, кстати, можно не идти дальней дорогой через поиск для установки Стилуса.
При отсутствии плагина в браузере в окне с темой (https://userstyles.org/styles/177074/make-dtf-dark-again) при нажатии на кнопку будет идти сначала установка плагина, и только потом темы. Так удобнее, на мой вкус. Однако, решать тебе.
Удачи! :)

Ответить
1

Да, я знаю что оно на самом сайте тем предлагает, но уже привычка выработалась ставить только из офф сторов. Если какой-нибудь левак прокинут в браузер, а ты его ещё разрешения выдашь по привычке -  можно потом нервов на пару-тройку лет слить в унитаз.
Тут, конечно, навряд ли что такое может случиться, но для поста я решил написать как сам бы поставил.

Ответить
0

Окей, разумно. Ты прав, лучше перебдеть. :)

Ответить
0

Там суть в том что на этом самом сайте ставится не Stylus, а Stylish. А про него я слышал, что он собирает данные о пользователях, в том числе какие сайт посещает, по каким ссылкам нажимает. А Stylus типа над ним модификация от сообщества, из которого все это говно вырезано.

Ответить
1

Не совсем. На Хром устанавливается Stylish, на Firefox - Stylus. Одна контора.
Насчет данных - не слышал о таком, но я бы не беспокоился. :) 10-ка собирает, гугл собирает, ютуб, вконтакт, фейсбук, твиттер, инстаграмм, стим, ворд, акробат, на мобильниках аж плечами толкаются, так собирают. Спрятаться можно разве что в ванной закрывшись, и выключив свет. :)

Ответить
1

И, как водится, половник дегтя. :)
1. Стоит указать как включать и выключать, у людей в комментариях возникли вопросы.
2. Делал по DarkTF, почему нет, но...зайди в "новая запись" и УЗРИ ВСЕ ГРАНИ АДА! Шучу. Почти. :) Фон иконок надо будет править, без вариантов.
3. Полоса возврата наверх, та что слева.
4. Фон под лайками\дизлайками в комментариях при больше-меньше ноля.

Пока все, удачи. :)

Ответить
0

Спасибо за фидбек, именно твой пост вчерашний меня вдохновил трайнуть эту прогу. Я css 3 года не трогал как ушёл с фриланса фронтенда, а тут прям прорвало)

Ответить
1

Отлично! Правда, очень рад. :)
На мой вкус, у тебя хорошо вышло. И будет еще лучше, когда подчистишь.
Удачи!

Ответить
1

Спасибо, мне нра.

Ответить
1

Выглядит лучше, чем Дарк ридер.
Спасибо.

Ответить
0

Суботник пользовательских тем начался ? Чёрная, серая и фиолетовая.

Ответить
0

Вот крутенько прям.

Ответить
0

Э-э-э?! А как светлую тему вернуть теперь?

Ответить
0

В конкретно этом посте - никак, она к нему прикреплена. В других - вот ссылка, почитай про выключение:

Ответить
0

Забрал. Спасибо.

Ответить
0

Новый poruhub шикарен.

Ответить
0

До чего дошел прогресс

Ответить
0

Ещё лучше когда тебе одну темную тему наложили поверх второй

Ответить
0

Я boku no pico смортрю, давай позже

Ответить
0

Благодарю! Всё руки не доходили самому сделать, а тут такой подгон! Красава!

Ответить
0

Странно, глаза ест. Но хоть уведомления починены. Пока погоняю, но не уверен что останусь не на darktf

Ответить
0

вот только здесь бы еще поправить

Ответить
0

Как воспроизвести такое, подскажешь? Ни разу не видел, хотя по разным разделам сайта заходил с ней.

Ответить
0

Ни малейшего понятия просто установил тему(

Ответить
0

А как же мобилки (

Ответить
0

Выглядит отменно, но я 90% случаев открываю DTF на айпэде, 10% - на телефоне, так что облизнусь – и обратно к светлой теме

Ответить

Прямой эфир

[ { "id": 1, "label": "100%×150_Branding_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox_method": "createAdaptive", "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "ezfl" } } }, { "id": 2, "label": "1200х400", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "ezfn" } } }, { "id": 3, "label": "240х200 _ТГБ_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fizc" } } }, { "id": 4, "label": "Article Branding", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "p1": "cfovz", "p2": "glug" } } }, { "id": 5, "label": "300x500_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "ezfk" } } }, { "id": 6, "label": "1180х250_Interpool_баннер над комментариями_Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "clmf", "p2": "ffyh" } } }, { "id": 7, "label": "Article Footer 100%_desktop_mobile", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fjxb" } } }, { "id": 8, "label": "Fullscreen Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fjoh" } } }, { "id": 9, "label": "Fullscreen Mobile", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fjog" } } }, { "id": 10, "disable": true, "label": "Native Partner Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyb" } } }, { "id": 11, "disable": true, "label": "Native Partner Mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyc" } } }, { "id": 12, "label": "Кнопка в шапке", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fdhx" } } }, { "id": 13, "label": "DM InPage Video PartnerCode", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox_method": "createAdaptive", "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "clmf", "p2": "flvn" } } }, { "id": 14, "label": "Yandex context video banner", "provider": "yandex", "yandex": { "block_id": "VI-250597-0", "render_to": "inpage_VI-250597-0-1134314964", "adfox_url": "//ads.adfox.ru/228129/getCode?pp=h&ps=clmf&p2=fpjw&puid1=&puid2=&puid3=&puid4=&puid8=&puid9=&puid10=&puid21=&puid22=&puid31=&puid32=&puid33=&fmt=1&dl={REFERER}&pr=" } }, { "id": 15, "label": "Баннер в ленте на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byudo", "p2": "ftjf" } } }, { "id": 16, "label": "Кнопка в шапке мобайл", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "chvjx", "p2": "ftwx" } } }, { "id": 17, "label": "Stratum Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fzvb" } } }, { "id": 18, "label": "Stratum Mobile", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fzvc" } } }, { "id": 20, "label": "Кнопка в сайдбаре", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "p1": "chfbl", "p2": "gnwc" } } } ]