31:T437,

Rules

${md` Here's what you need for correct implementation of light and dark mode: - **Light mode**: Your app must be available in light mode - **Dark mode**: Your app must be available in dark mode - **Auto switch**: Your app must respect the "dark mode" setting of the user's operating system or browser. If the user changes their OS setting, the theme must be updated to match without additional input. - **Manual override**: The user must have an option to manually force light or dark mode, regardless of their OS preference, if they choose. The user must also be able to undo this setting, and return to auto switch Nice to haves: - OLED mode: if your dark mode is colourful, allow the user to enable very dark or completely black colour scheme to take full advantage of modern OLED technology - Greyscale support: ensure your app works well in greyscale, as some users are colourblind, and modern mobile phones and other accessibility tools support this. - High contrast mode: improve accessibility, but make this optional `}

32:T618,function getMdForService(service) { const serviceIcon = service.icon && entriesById[service.icon]; const apps = service.apps && service.apps.length ? _.values(_.pick(entriesById, service.apps)) : null; const appsByPlatform = _.keyBy(apps, "platform"); // const appSummaries = _.compact(_.map(apps, "summary")); return `

${ serviceIcon ? `![${service.name}](${serviceIcon.url})` : icons[_.camelCase(service.slug + "-color").toLowerCase()] ? iconImg(service.slug + "-color") : icons[_.camelCase(service.slug).toLowerCase()] ? iconImg(service.slug) : "" } ${service.name}

${service.summary ? `${service.summary}` : ""} ${ !apps ? "" : ` ${apps .map(({ id: appId }) => { const app = entriesById[appId]; return ``; }) .join("")}

Platform	Light mode	Dark mode	Auto switch	Manual override
${platforms[app.platform].name}${ app.summary && app.summary.length ? ` ?` : "" }	${app.supportsLightMode ? `✔️` : `❌`}	${app.supportsDarkMode ? `✔️` : `❌`}	${app.supportsAutoSwitch ? `✔️` : `❌`}	${app.supportsManualSwitch ? `✔️` : `❌`}

` } `; }33:[] 2f:{"title":"Dark Mode Offenders","cells":[{"id":0,"value":"# Dark Mode Offenders","pinned":false,"hidden":false,"mode":"md"},{"id":97,"value":"An updated list of services that fail at dark and light theme support.\n\n${posts && posts.length ? posts.map(getMdForPost).join(\"\\n\\n\") : \"\"}","pinned":false,"hidden":false,"mode":"md"},{"id":133,"value":"toc({\n // title: false,\n closed: true,\n select: \"h3\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":370,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":377,"value":"```\n|App|${_.map(platforms, \"name\").join(\"|\")}|\n|-|${_.repeat(\":-:|\", _.values(platforms).length)}\n${tableData.map((s) => {\n const cells = _.keys(platforms).map((key) => {\n const support = s[key]\n return {\n done: \"✅\",\n noDark: \"No dark mode\",\n noLight: \"No light mode\",\n noAuto: \"Not synced to OS\",\n noManual: \"No override\",\n \"-\": \"–\"\n }[support]\n })\n return `|[${s.name}](${s.url})|${cells.join(\"|\")}|`;\n}).join(\"\\n\")}\n```","pinned":false,"hidden":false,"mode":"md"},{"id":421,"value":"\n \n \n \n ${_.map(platforms, (p) => ``).join(\"\")}\n \n \n \n ${tableData\n .map((service) => {\n return `\n \n ${_.keys(platforms)\n .map((key) => {\n return ``;\n })\n .join(\"\")}\n `;\n })\n .join(\"\")}\n \n

App	${p.name}
${service.name}	${service[key]}

","pinned":false,"hidden":false,"mode":"md"},{"id":410,"value":"tableDataJson = JSON.stringify(tableData, null, 2)","pinned":false,"hidden":false,"mode":"ojs"},{"id":414,"value":"clipboardCopyButton(tableDataJson)","pinned":false,"hidden":false,"mode":"ojs"},{"id":400,"value":"tableData = json.map((service) => {\n const appSupport = _.mapValues(platforms, (value, key) => {\n return service.apps[key] ? service.apps[key].support : \"-\";\n });\n\n return {\n name: service.name,\n url: service.url,\n ...appSupport\n };\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":372,"value":"json = services.map(expand).map((service) => {\n return {\n ...service,\n apps: _.keyBy(service.apps, \"platform\")\n };\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":38,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":114,"value":"md`${services.map(getMdForService).join(\"\\n\\n---\\n\\n\")}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":360,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":518,"value":"","pinned":false,"hidden":false,"mode":"md"},{"id":297,"value":"$31","pinned":false,"hidden":false,"mode":"md"},{"id":294,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":140,"value":"# Data","pinned":false,"hidden":false,"mode":"md"},{"id":209,"value":"Plot.plot({\n color: {\n legend: true\n },\n marks: [\n Plot.auto(appsGraphData, {y: \"support\", fy: \"platform\", color: \"platform\"})\n ]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":129,"value":"appsGraphData","pinned":false,"hidden":false,"mode":"ojs"},{"id":222,"value":"appsGraphData = apps.map(expand)","pinned":false,"hidden":false,"mode":"ojs"},{"id":76,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":87,"value":"## HTML","pinned":false,"hidden":false,"mode":"md"},{"id":39,"value":"function getMdForPost(post) {\n return `**Update ${formatDate(post.postedAt)}**: ${post.body}`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":106,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":85,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":73,"value":"## Source","pinned":false,"hidden":false,"mode":"md"},{"id":49,"value":"posts = _.slice(latestPosts, 0, 3)","pinned":false,"hidden":false,"mode":"ojs"},{"id":211,"value":"apps = entriesByType.App","pinned":false,"hidden":false,"mode":"ojs"},{"id":102,"value":"services = _.orderBy(entriesByType.Service, \"name\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":92,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":19,"value":"fetchEntries()","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"import {\n fetchEntries,\n entries,\n entriesByType,\n entriesById,\n latestPosts,\n platforms,\n expand\n} from \"2ec8a27a1166c953\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":52,"value":"import { baseStyles, formatDate } with { locale } from \"@jerryjappinen/ui\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":519,"value":"import { clipboardCopyButton, toc } from \"@jerryjappinen/snippets\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":307,"value":"import { iconImg, icons } from \"@jerryjappinen/icons\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":257,"value":"baseStyles","pinned":false,"hidden":false,"mode":"ojs"},{"id":267,"value":"","pinned":false,"hidden":false,"mode":"html"},{"id":59,"value":"locale = \"en\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}