タグ検索の該当結果が少ないため、タイトル検索結果を表示しています。
デザイナーとエンジニアのコミュニケーションプロトコルを設計する 〜はてなブックマークアプリDark Mode実装の現場より〜 - Hatena Design Group
こんにちは！はてなデザインチーム所属のid:cormorantcraftです！ 先日、配信させていただいたはてなブックマークiOS版のDark Mode、みなさん使っていただけているでしょうか？ 今回はそのDark Modeの実装にあたって、デザイナーとエンジニアのコミュニケーションをどのように行っていたかという点にフォーカスしてお話しさせていただければと思います。 コミュニケーションプロトコルの設計 いきなり「コミュニケーションプロトコルの設計」って言われても？ という声が聞こえてきそうですが、Dark Mode実装の上で平たく表現すると「色を指定するデザイナー」と「色を実装するエンジニア」の間の意思疎通の枠組みを作ることです。 これをしないで進行してしまうと、デザイナーとエンジニアの間で手戻りが多数発生したり、精神的にお互い疲弊したりチームの雰囲気にも悪影響が出たりしてしまいます。気持
GitHub Dark Mode is Too DarkIf you hate it too this is why. Using color theory to show why GitHub dark mode is disappointing Shared on Hacker News and Twitter This past week, GitHub released a long-awaited feature — dark mode. Like many devs around the world, I was hype. In 2020, a dark mode toggle for anything remotely related to tech seems like a requirement. So I flipped the switch. My immediat
New from Universe 2020: Dark mode, GitHub Sponsors for companies, and more
AI & MLLearn about artificial intelligence and machine learning across the GitHub ecosystem and the wider industry. Generative AILearn how to build with generative AI. GitHub CopilotChange how you work with GitHub Copilot. LLMsEverything developers need to know about LLMs. Machine learningMachine learning tips, tricks, and best practices. How AI code generation worksExplore the capabilities and be
概要 こちらの記事はfivestarsのブログの一つの記事を翻訳したものです。 How To Adopt Dark Mode In Your iOS App 前回のダークモード対応の記事で一つ疑問に思ったことが、Asset Catalogに登録したカラーしかダークモード対応できないのか、と思ったからです。 そのため「dark mode implement in code」とかのキーワードで検索してみたらコードからの実装方法が載っていました。今回の記事はメモとして残しておきたいのでFederico Zanetello氏に依頼してみました。許可頂きましたので載せておきます。 喜べ！ iOS 13にはダークモードが付属しています！ 私は自分のアプリに新しいデザインを採用し終えたところです。その過程でいくつかのことを学びました。どのようにできるか見てみましょう。 Two Steps Back Fi
DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit! Oooo! A bonafide trick from Thomas Steiner. Chrome will soon be supporting SVG favicons (e.g. ). And you can embed CSS within an SVG with a <style> element. That CSS can use a prefers-color-scheme media query, and as a result, a favicon that supports dark mode! < pre rel=”HTML”> < svg wid
Dark mode in a website with CSS
This site has a dark mode and a light one. Which mode you see depends on the setting of your device. Try it! The instant change in appearance is accomplished by this appendix to the style sheet: @media (prefers-color-scheme: dark) { body { background-color: #444; color: #e4e4e4; } a { color: #e39777; } img { filter: grayscale(30%); } } This works in Firefox, Safari, and Chrome among other browsers
DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit! Dark mode has gained a lot of traction recently. Like Apple, for instance, has added dark mode to its iOS and MacOS operating systems. Windows and Google have done the same. DuckDuckGo’s light and dark themes Let’s get into dark mode in the context of websites. We’ll delve into different opt
The Future of CSS: Easy Light-Dark Mode Color Switching with light-dark()
To change a color based on whether Light Mode or Dark Mode used, you’d typically use a prefers-color-scheme Media Query. To make things easier, CSS now comes with a utility function named light-dark(). The function accepts two color values as its arguments. Based on which color scheme you are actively using, it will output the first or the second argument. ~ # Responding to Light or Dark Mode To c
On March 30, 2020, we enabled folks to opt into a beta dark mode on Stack Overflow. Let’s talk about the work that went into it. Dark mode opt-in bannerI’m Aaron Shekey, Stack Overflow’s principal product designer on design systems. I help design all the interface components that get assembled into new features. First, a bit of irony. I don’t actually prefer dark user interfaces. I often find the
Summary: In people with normal vision (or corrected-to-normal vision), visual performance tends to be better with light mode, whereas some people with cataract and related disorders may perform better with dark mode. On the flip side, long-term reading in light mode may be associated with myopia. Introduction Recently, spurred by the introduction of dark mode in IOS 13, a reporter asked me to comm
This is an absolute no-brainer method of converting an already developed website to support dark mode. Without further ado let's get into it! 👾 Consider this news application for example Now add the magic CSS Voila! you are done ✌ Dark mode achieved Explanation Now let's try and understand what is going on under the hood. The filter CSS property applies graphical effects like blur or color shift
Introducing Dark Mode (beta) for Stack Overflow - Stack Overflow
Ed. note: Dark mode is officially out of beta! Thanks for everyone's feedback. Update: Check out our article on how we made dark mode a reality. For many years now, people have been asking us for the option to view Stack Overflow in dark mode. We know from user surveys that lots of developers visit our site multiple times a week and folks working their way through a tricky coding problem sometimes
Google Maps has joined the party. If you're a fan of using all your iOS apps on dark mode, you'll be pleased to know that Google Maps is one more app on which you can do just that. In September 2021, Google announced a host of features coming to Google Maps on iOS, including dark mode. This article will give you a guide to enabling dark mode in Google Maps for iOS. Dark Mode for iOS? Though Google
macOSから始まったダークモードは一気に広がっています。デスクトップはもちろん、Webサイトにおいてもダークモードの需要が高まっています。しかし、単純に暗いCSSを用意すれば良いだけではありません。 ユーザにとって使いやすいダークモードを提供するために使ってみたいのがDark Mode Toggleです。Googleが作成したダークモード用のカスタムエレメントです。 Dark Mode Toggleの使い方 HTMLへの記述は次のようになります。 <dark -mode-toggle id="dark-mode-toggle-1" legend="Theme Switcher" appearance="switch" dark="Dark" light="Light" remember="Remember this" ></dark> 右上に表示されているのがダークモードの切り替えコンポ
. So, after months of toiling over the right approach, we shipped dark mode in May. Product Manager Jacob Miller and Product Designer Ryhan Hassan detailed the product and design challenges of implementing dark mode at Config 2022, our annual conference. Not only did dark mode surface thorny UI questions—which Jacob and Ryhan talked all about—it required a significant engineering lift. As they sai
Summary: Dark mode is popular, but not essential. Users like dark mode but maintain similar behaviors without it. They think about it at the system level, not the application level. If you choose to support dark mode, test your design to avoid common dark-mode issues. Dark mode is more popular than ever. You might even think it’s essential — at least if you were to read many of the web-design arti
ダークモードへの切り替えが簡単！Figma Plugin「Dark Mode Switcher」を作りました - ロコガイド テックブログ
こんにちは！デザイナーの鈴木です。 前回のPluginセットアップの記事からだいぶ時間が空いてしまいましたが、この数ヶ月でFigma Pluginを2つ開発していました。 今回はそのうちの2つ目に開発したPluginの紹介です！ Dark Mode Switcher Pluginをポチッと実行するだけでカラーモードを切り替えることができます！ 使い方 1. プラグインをインストール こちらからプラグインをインストール 2. Color Stylesを登録する ライトモード用,ダークモード用それぞれのカラーをColor Stylesに登録しましょう。 このPluginはColor Stylesをみて、Light(light),Dark(dark)の文字をキーに名前の切り替えをしてくれます。 例えば Background/Dark/Primary は Background/Light/Prim
How to Enable Adobe Acrobat Reader's Dark Mode to Read PDFs in a Dark Theme
PDF is such a common file format that you probably work with these files often. It's a shame, then, that not all PDF readers feature an easy-to-use dark mode. If you have the rest of your system set up in dark mode—with light text on a dark background—opening a PDF at night could shock you with its overwhelming brightness. This is an especially annoying problem if you often read PDFs for long peri
テレビやDisplayLinkディスプレイをサポートし、True Tone、Dark ModeのOn/Offが可能になったMac用ディスプレイユーティリティ「BetterDisplay v1.2.8」がリリース。
テレビでのNight ShiftやDisplayLinkディスプレイでのカラー調整、True Tone、Dark Modeボタンを追加したMac用ディスプレイユーティリティ「BetterDisplay v1.2.8」がリリースされています。詳細は以下から。 BetterDisplay(旧BetterDummy)は、Macに接続された外部ディスプレイの輝度をメニューバーアイコンから変更できるMonitorControl(Lite)などを開発するIstvan Tothさんが公開したディスプレイユーティリティで、仮想ディスプレイを作成し、実際のディスプレイにミラーリングさせることでシステム設定以上のディスプレイ設定を行うことができますが、このアプリの最新バージョンとなる「BetterDisplay v1.2.8」が新たにリリースされています。 BetterDisplay v1.2.8では、テレビ
Using Your iPhone at Night: Dark Mode Tips You Should Know About
Looking at your iPhone's bright screen in the dark can cause eye strain and might even keep you awake at night. Dark Mode, among a few other accessibility options, is the solution to your problems. In this guide, we'll show you all the tips you can use to make your iPhone more comfortable to look at in the dark. Turn On Dark Mode for Your iPhone What is iPhone Dark Mode? Dark Mode, as the name sug
Dark Mode Does Not Save as Much of Your Smartphone’s Battery as You Think
It is widely believed that using dark mode on smartphones with OLED displays can help improve their battery life. This is because OLED displays consume very little to almost no power when showing black content. In contrast, they tend to consume a lot more power whenever they have to power on individual pixels for showing light-colored content. However, a new study shows that dark mode is unlikely
Ultimate Guide to Dark Mode [+ Code Snippets, Tools, Tips from the Email Community]
Capabilities Litmus is an all-in-one email marketing solution that helps you optimize and personalize every email to maximize your ROI and create exceptional brand experiences for every subscriber. Why Litmus Email Monitoring Email Design Email Building Email Personalization Email Testing Spam Testing Email Analytics Email Collaboration and Review Technology Integrations AI & Emerging Email Techno
![Ultimate Guide to Dark Mode [+ Code Snippets, Tools, Tips from the Email Community]](https://cdn-ak-scissors.b.st-hatena.com/image/square/43f6170e7fd1934c712d17f24d1bdc4dd53c17e4/height=288;version=1;width=512/https%3A%2F%2Fwww.litmus.com%2Fwp-content%2Fuploads%2F2022%2F12%2FDark-Mode-Pillar.png)
Instead of inverting, we are converting the colors. Unlike its competitors, Night Eye takes a unique approach to each webpage. It analyses the page colors and converts them in a way to provide you with smooth and consistent dark mode. No simple color inversions, no bright spots and flashes.
GitHub - pacocoursey/next-themes: Perfect Next.js dark mode in 2 lines of code. Support System preference and any other theme with no flashing
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
l'occasion f — Gelegenheit f, die ~ , der ~. bei Gelegenheit — à l'occasionI #StandWithUkraine 🇺🇦. 🎉 Chrome finally accepts SVG favicons now that crbug.com/294179, where this feature was demanded on September 18, 2013(!), was fixed. This means that you can style your icon with inline prefers-color-scheme and you'll get two icons for the price of one! <!-- icon.svg --> <svg width="100" height="1
Terra, one of Brazil's largest media companies with 75 million monthly users, reduced the bounce rate by 60% and increased the pages read per session by 170% on desktop for users that prefer dark mode by providing a custom dark theme. In this article, we'll analyze Terra's journey from identifying the size of the "dark mode" cohort, to applying a custom dark theme, and finally measuring the impact
Product { this.openCategory = category; const productMenu = document.querySelector('.product-menu'); window.DD_RUM.onReady(function() { if (productMenu.classList.contains('show')) { window.DD_RUM.addAction(`Product Category ${category} Hover`) } }) }, 160); }, clearCategory() { clearTimeout(this.timeoutID); } }" x-init=" const menu = document.querySelector('.product-menu'); var observer = new Muta
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub Dark Mode is Too Dark - blog.karenying.com
アプリにDark Mode をコードで実装する - Qiita
Dark Mode Favicons | CSS-Tricks
Dark Mode In CSS Guide | CSS-Tricks
Building dark mode on Stack Overflow - Stack Overflow
Dark Mode vs. Light Mode: Which Is Better?
One line - Dark Mode using CSS
How to Enable Dark Mode for Google Maps on an iPhone
Dark Mode Toggle - ダークモード切り替え用Webコンポーネント
Illuminating dark mode | Figma Blog
Dark Mode: How Users Think About It and Issues to Avoid
Dark Mode With Night Eye: #1 Dark Mode Browser Extension!
prefers-color-scheme in SVG favicons for dark mode icons
How Terra improved user engagement thanks to Dark Mode | web.dev
Introducing dark mode for Datadog
ameblo.jp/h916-kibiexp31
newsdig.tbs.co.jp
ncode.syosetu.com
shimmer.okinawa
www.nikkei.com
www.travelvoice.jp