{"id":135850,"date":"2021-04-12T12:54:35","date_gmt":"2021-04-12T11:54:35","guid":{"rendered":"https:\/\/blog.jetbrains.com\/?post_type=space&#038;p=135850"},"modified":"2021-04-12T12:54:35","modified_gmt":"2021-04-12T11:54:35","slug":"disponibilite-du-theme-sombre-dans-space","status":"publish","type":"space","link":"https:\/\/blog.jetbrains.com\/fr\/space\/2021\/04\/12\/disponibilite-du-theme-sombre-dans-space\/","title":{"rendered":"Disponibilit\u00e9 du th\u00e8me sombre dans Space"},"content":{"rendered":"<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-128271\" src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2021\/03\/dark_theme_cover-1.png\" alt=\"Le th\u00e8me sombre est maintenant disponible dans Space\" width=\"1422\" height=\"800\" \/><\/p>\n<p>Que vous soyez plut\u00f4t du c\u00f4t\u00e9 lumineux ou du c\u00f4t\u00e9 obscur, <a href=\"https:\/\/www.jetbrains.com\/fr-fr\/space\/\" target=\"_blank\" rel=\"noopener\">Space<\/a> prend d\u00e9sormais en charge les deux th\u00e8mes\u00a0!<\/p>\n<p>Alors que le th\u00e8me sombre \u00e9tait d\u00e9j\u00e0 disponible sur les appareils mobiles, cette mise \u00e0 jour vous permet d&#8217;appliquer le th\u00e8me sombre dans Space sur tous vos appareils et applications. Cela inclut la <a href=\"https:\/\/www.jetbrains.com\/fr-fr\/space\/#sign-up\" target=\"_blank\" rel=\"noopener\">version web<\/a>, les <a href=\"https:\/\/www.jetbrains.com\/help\/space\/space-for-ios-and-android.html\" target=\"_blank\" rel=\"noopener\">applications mobiles<\/a> iOS et Android et toutes les <a href=\"https:\/\/www.jetbrains.com\/help\/space\/space-desktop-app.html\" target=\"_blank\" rel=\"noopener\">applications de bureau<\/a> (Windows, macOS et Linux).<\/p>\n<p>Si vous avez pour habitude de travailler dans un environnement sombre ou si vous souhaitez parfois r\u00e9duire l&#8217;intensit\u00e9 de votre \u00e9clairage, cette mise \u00e0 jour vous fera du bien \u00e0 vos yeux. En r\u00e9duisant la lumi\u00e8re bleue avant l&#8217;heure du coucher, le th\u00e8me sombre est \u00e9galement b\u00e9n\u00e9fique pour les personnes ayant une mauvaise vue ou des probl\u00e8mes d&#8217;insomnie. Et enfin, il donne \u00e0 votre \u00e9cran un aspect beaucoup plus styl\u00e9 et myst\u00e9rieux, non ?<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone wp-image-128282 size-full\" src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2021\/03\/dark-theme-project.png\" alt=\"Projets Space - Th\u00e8me sombre activ\u00e9\" width=\"1422\" height=\"800\" \/><\/p>\n<p>Dans cet article, nous expliquons comment activer le th\u00e8me sombre et pr\u00e9sentons les coulisses de la mise en \u0153uvre de cette fonctionnalit\u00e9.<\/p>\n<h2>Comment activer le th\u00e8me sombre dans Space<\/h2>\n<h3>Sur les applications web et de bureau<\/h3>\n<p>Pour g\u00e9rer votre th\u00e8me Space dans les applications web et de bureau, cliquez sur votre photo de profil, aller dans <strong>My Profile<\/strong> <strong>|<\/strong> <strong>Workspace<\/strong> et s\u00e9lectionnez le th\u00e8me.<\/p>\n<p>Vous pouvez\u00a0alors :<\/p>\n<ul>\n<li>Activer le th\u00e8me clair<\/li>\n<li>Activer le th\u00e8me sombre<\/li>\n<li>Configurer le th\u00e8me sombre pour qu&#8217;il s&#8217;active ou se d\u00e9sactive automatiquement<\/li>\n<\/ul>\n<p>Cette derni\u00e8re option ajuste automatiquement le th\u00e8me de Space tout au long de la journ\u00e9e pour qu&#8217;il reste align\u00e9 avec les param\u00e8tres de votre syst\u00e8me d&#8217;exploitation. Pour macOS, le mode sombre peut \u00eatre activ\u00e9 via <strong>System Preferences | General | Appearance<\/strong>, et le processus d&#8217;activation est similaire sur les autres syst\u00e8mes d&#8217;exploitation.<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone wp-image-128293 size-full\" src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2021\/03\/dark-theme-settings.png\" alt=\"Comment activer le th\u00e8me sombre dans Space\" width=\"1422\" height=\"800\" \/><\/p>\n<p>Dans les param\u00e8tres Workspace, vous pouvez \u00e9galement g\u00e9rer la couleur d&#8217;accentuation appliqu\u00e9e lorsque le th\u00e8me sombre est inactif. Vous pouvez opter pour une barre lat\u00e9rale bleue, noire ou blanche.<\/p>\n<h3>Sur les applications mobiles<\/h3>\n<p>Pour g\u00e9rer le th\u00e8me de Space sur votre application mobile, vous devez activer le mode sombre \u00e0 l&#8217;\u00e9chelle du syst\u00e8me sur votre appareil.<\/p>\n<p>Si vous activez le mode sombre automatiquement sur Android ou iOS, l&#8217;application mobile Space passera au le th\u00e8me sombre au coucher du soleil ou \u00e0 une heure pr\u00e9cise, en fonction des param\u00e8tres de votre appareil.<\/p>\n<h4>Sur iOS<\/h4>\n<ul>\n<li>Aller dans les param\u00e8tres.<\/li>\n<li>Appuyez sur Affichage et Luminosit\u00e9.<\/li>\n<li>S\u00e9lectionnez Sombre.<\/li>\n<\/ul>\n<p style=\"text-align:center;\"><img decoding=\"async\" loading=\"lazy\" class=\"wp-image-128462 aligncenter\" src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2021\/03\/dark-theme-ios.png\" alt=\"Th\u00e8me sombre de Space activ\u00e9 sur iOS\" width=\"400\" height=\"866\" data-wp-editing=\"1\" \/><\/p>\n<h4>Sur Android<\/h4>\n<ul>\n<li>Aller dans les param\u00e8tres.<\/li>\n<li>Appuyez sur Accessibilit\u00e9.<\/li>\n<li>Sous Affichage, activez l&#8217;option Th\u00e8me Sombre.<\/li>\n<\/ul>\n<p>Vous pouvez \u00e9galement activer le th\u00e8me sombre dans l&#8217;application Android sans quitter Space. Pour ce faire, suivez les \u00e9tapes suivantes\u00a0:<\/p>\n<ul>\n<li>Allez dans My Profile.<\/li>\n<li>Cliquez sur les trois points dans le coin sup\u00e9rieur droit de l&#8217;\u00e9cran du tableau de bord.<\/li>\n<li>S\u00e9lectionnez Change Theme, puis Dark Theme.<\/li>\n<\/ul>\n<p>Et voil\u00e0 ! Vous pouvez d\u00e9sormais activer le th\u00e8me sombre sur tous vos appareils quand vous le souhaitez.<\/p>\n<h2>Comment nous avons d\u00e9velopp\u00e9 le th\u00e8me sombre dans Space<\/h2>\n<p>La cr\u00e9ation d&#8217;un th\u00e8me sombre n&#8217;est pas une nouveaut\u00e9 pour nous. Nous avions d\u00e9j\u00e0 introduit un th\u00e8me sombre dans d&#8217;autres outils et IDE JetBrains. Nous nous sommes appuy\u00e9s sur cette exp\u00e9rience pour maintenir une uniformit\u00e9 au sein de nos produits. Ainsi, les utilisateurs connaissant d\u00e9j\u00e0 le th\u00e8me sombre d&#8217;IntelliJ IDEA pourront facilement s&#8217;habituer au th\u00e8me sombre de Space.<\/p>\n<p>Lorsque nous avons commenc\u00e9 \u00e0 travailler sur ce nouveau th\u00e8me, nous disposions d\u00e9j\u00e0 d&#8217;une palette de plus de 50\u00a0couleurs dans Space et nous ne pensions pas avoir de difficult\u00e9 \u00e0 trouver leurs \u00e9quivalents dans le th\u00e8me sombre. Pourtant, apr\u00e8s avoir examin\u00e9 de plus pr\u00e8s notre base de code et syst\u00e9matis\u00e9 la palette pour le th\u00e8me sombre, nous nous sommes retrouv\u00e9s avec <strong>plus de 250\u00a0couleurs<\/strong>\u00a0!<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-128304\" src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2021\/03\/dark_theme_palette.png\" alt=\"Palette du th\u00e8me sombre de Space\" width=\"1422\" height=\"800\" \/><\/p>\n<p style=\"text-align: center;\"><em>Quelques unes des couleurs de la palette du th\u00e8me sombre de Space.<\/em><\/p>\n<p>Alors que le th\u00e8me clair ne n\u00e9cessite pas autant de couleurs, le th\u00e8me fonc\u00e9 requiert un ajustement plus avanc\u00e9 pour divers cas d&#8217;utilisation. En effet, certaines couleurs sont esth\u00e9tiques apr\u00e8s avoir \u00e9t\u00e9 invers\u00e9es, alors que d&#8217;autres ne le sont pas. Par exemple, certaines nuances de jaune ont un aspect \u00ab\u00a0sale\u00a0\u00bb et doivent \u00eatre remplac\u00e9es par d&#8217;autres couleurs.<\/p>\n<p>L&#8217;une des parties les plus compliqu\u00e9es de la cr\u00e9ation du th\u00e8me sombre a \u00e9t\u00e9 la coloration du code pour rendre la navigation et la r\u00e9vision de code plus simples et claires. Un autre obstacle auquel nous avons \u00e9t\u00e9 confront\u00e9s est la diff\u00e9rence de comportement des diff\u00e9rents \u00e9crans dans l&#8217;obscurit\u00e9, nous avons donc d\u00fb peaufiner les couleurs en tenant compte de cet aspect.<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone wp-image-128318 size-full\" src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2021\/03\/dark-theme-code-review.png\" alt=\"R\u00e9vision de code Space - Th\u00e8me sombre activ\u00e9\" width=\"1422\" height=\"800\" \/><\/p>\n<p>Pour impl\u00e9menter le th\u00e8me sombre dans Space, nous avons utilis\u00e9 un syst\u00e8me de conception pr\u00e9sentant une collection de composants r\u00e9utilisables. Cette approche nous a permis de construire le th\u00e8me sombre assez rapidement avec une <strong>\u00e9quipe de seulement deux personnes<\/strong>\u00a0: un designer, qui \u00e9tait responsable du style et de la biblioth\u00e8que de composants de l&#8217;interface utilisateur, et un d\u00e9veloppeur logiciel charg\u00e9 de l&#8217;impl\u00e9mentation technique. En ce qui concerne l&#8217;impl\u00e9mentation technique, les couleurs du th\u00e8me sont fournies aux composants \u00e0 l&#8217;aide de variables CSS et, parfois, de contextes React. Certaines couleurs rarement utilis\u00e9es sont calcul\u00e9es \u00e0 partir des couleurs du th\u00e8me lors de leur ex\u00e9cution.<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone wp-image-128329 size-full\" src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2021\/03\/dark-theme-team-directory.png\" alt=\"R\u00e9pertoire d'\u00e9quipe Space - Th\u00e8me sombre activ\u00e9\" width=\"1422\" height=\"800\" \/><\/p>\n<p>En appliquant la m\u00e9thode du <a href=\"https:\/\/blog.jetbrains.com\/blog\/2020\/03\/06\/software-development-the-jetbrains-way-dogfooding-and-other-key-principles\/\">dogfooding<\/a>, nous avons activ\u00e9 le th\u00e8me sombre pour l&#8217;ensemble de notre organisation Space et avons pris en compte les retours de nos coll\u00e8gues.<\/p>\n<p>Mais \u00e0 ce stade, notre travail n&#8217;\u00e9tait pas encore termin\u00e9. Nous continuerons \u00e0 perfectionner le th\u00e8me sombre pour vous permettre de b\u00e9n\u00e9ficier de la meilleure exp\u00e9rience dans Space.<\/p>\n<p>Avez-vous d\u00e9j\u00e0 essay\u00e9 l&#8217;un de nos th\u00e8mes sombres\u00a0? Lancez-vous et faites-nous part de vos retours et questions dans la section commentaires !<\/p>\n<p><em>Auteur de l&#8217;article original en anglais : <a href=\"https:\/\/blog.jetbrains.com\/author\/evgenia-verbina-jetbrains-com\/\" target=\"_blank\" rel=\"noopener noreferrer\">Evgenia Verbina<\/a><\/em><\/p>\n","protected":false},"author":813,"featured_media":129290,"comment_status":"closed","ping_status":"closed","template":"","categories":[89,4331],"tags":[6526],"cross-post-tag":[],"acf":[],"_links":{"self":[{"href":"https:\/\/blog.jetbrains.com\/fr\/wp-json\/wp\/v2\/space\/135850"}],"collection":[{"href":"https:\/\/blog.jetbrains.com\/fr\/wp-json\/wp\/v2\/space"}],"about":[{"href":"https:\/\/blog.jetbrains.com\/fr\/wp-json\/wp\/v2\/types\/space"}],"author":[{"embeddable":true,"href":"https:\/\/blog.jetbrains.com\/fr\/wp-json\/wp\/v2\/users\/813"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.jetbrains.com\/fr\/wp-json\/wp\/v2\/comments?post=135850"}],"version-history":[{"count":3,"href":"https:\/\/blog.jetbrains.com\/fr\/wp-json\/wp\/v2\/space\/135850\/revisions"}],"predecessor-version":[{"id":135853,"href":"https:\/\/blog.jetbrains.com\/fr\/wp-json\/wp\/v2\/space\/135850\/revisions\/135853"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/blog.jetbrains.com\/fr\/wp-json\/wp\/v2\/media\/129290"}],"wp:attachment":[{"href":"https:\/\/blog.jetbrains.com\/fr\/wp-json\/wp\/v2\/media?parent=135850"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.jetbrains.com\/fr\/wp-json\/wp\/v2\/categories?post=135850"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.jetbrains.com\/fr\/wp-json\/wp\/v2\/tags?post=135850"},{"taxonomy":"cross-post-tag","embeddable":true,"href":"https:\/\/blog.jetbrains.com\/fr\/wp-json\/wp\/v2\/cross-post-tag?post=135850"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}