WhatZeWeb

Ces derniers temps, vous avez dû voir un grand engouement pour les thèmes dark. Ces thèmes à la côté permettent de se reposer les yeux. Il en existe de plus en plus, je vais ici vous présentez quelques-uns :

 

Slack

 

Vous pouvez installer un thème dark dans votre navigateur web ou dans l'application de bureau.

1. Installation via le navigateur web

On va ici se baser sur un repository Github, dont voici l'url :  https://github.com/laCour/slack-night-mode

On va ici pouvoir mettre en place notre thème grâce à l'extension Stylus (à ne pas installer, celle-ci le sera automatiquement lors du choix de notre thème).

Vous avez ici deux thème proposés, Black ou Aubergine.Pour l'installer, il vous suffit de cliquer sur install et le tour est joué. 

 

Voyons maintenant l'installation via l'app de bureau 😁

 

2. Installation via l'application de bureau

J'ai choisi ici de le faire aussi en suivant un autre repository Github, mais surtout pour pouvoir le faire que ce soit sur Mac OS, Windows ou Linux. Voici le lien du repository : https://github.com/widget-/slack-black-theme

Il vous suffit ici de trouver le répertoire où se trouve votre application Slack : 

- sur Mac OS, dans /Applications/Slack.app/Contents/

- sur Windows dans %homepath%\AppData\Local\slack\

- sur Linux dans /usr/lib/slack

Cherchez le fichier ssb-interop.js qui doit se trouver dans resources\app.asar.unpacked\src\static\ssb-interop.js

Ajoutez à la fin de ce fichier le code suivant :

document.addEventListener("DOMContentLoaded", function() {

   let webviews = document.querySelectorAll(".TeamView webview");

   const cssPath = 'https://cdn.rawgit.com/widget-/slack-black-theme/master/custom.css';
   let cssPromise = fetch(cssPath).then(response => response.text());

   let customCustomCSS = `
   :root {
      /* Modifiez ici votre CSS pour avoir les couleurs désirées: */
      --primary: #09F;
      --text: #CCC;
      --background: #080808;
      --background-elevated: #222;
   }
   `

   cssPromise.then(css => {
      let s = document.createElement('style');
      s.type = 'text/css';
      s.innerHTML = css + customCustomCSS;
      document.head.appendChild(s);
   });

   webviews.forEach(webview => {
      webview.addEventListener('ipc-message', message => {
         if (message.channel == 'didFinishLoading')
            cssPromise.then(css => {
               let script = `
                     let s = document.createElement('style');
                     s.type = 'text/css';
                     s.id = 'slack-custom-css';
                     s.innerHTML = \`${css + customCustomCSS}\`;
                     document.head.appendChild(s);
                     `
               webview.executeJavaScript(script);
            })
      });
   });
});

Relancez votre application et admirez le résultat 😁

 

Passons maintenant à Gmail 😉

 

Gmail

Vous pouvez simplement utiliser les paramètres de Gmail pour mettre en place votre thème. Il vous suffit d'aller dans la section Thèmes et de sélectionner votre thème. Si vous enregistrez, vous pouvez maintenant profiter de votre nouveau thème.

Si vous essayer de rédiger un nouveau mail... Le fond est toujours en blanc 😔

 

Si cela vous suffit, vous pouvez très bien vous en contenter. Sinon, on va aussi passer par l'outil Stylus qu'on a utilisé pour installer le thème dark de Slack dans le navigateur web.

J'ai sélectionné ici deux thèmes, mais libre à vous de choisir celui que vous souhaitez :

- Dark Gmail 2018 by DM

- Gmail Clean Dark

Installez celui qui vous plaît, et amusez-vous avec votre nouveau thème.

 

Chrome

Pour avoir Google Chrome avec un environnement le plus sombre possible, on va avoir besoin de plusieurs éléments : 

- Material Dark Theme

- Stylus Google Clean Dark

- Changer accueil Google Chrome

- New Tab Redirect

Commençons par Material Dark Theme, qui va nous permettre d'avoir le menu de Google ainsi que les onglets avec une apparence sombre.

Très simple à installer, vous avez juste à cliquer pour profiter de votre nouvelle apparence.

 

Occupons-nous maintenant de la page web en elle-même.

 

J'ai choisi ici de passer par Stylus qui offre de nombreux thèmes sombres pour Google Chrome, j'ai choisi celui-ci : Google - Clean Dark

Ici encore, je n'insiste pas sur l'installation, vous savez maintenant faire.

Si vous essayez d'ouvrir un nouvel onglet ou d'ouvrir la page d'accueil... le thème est encore en blanc 😔Par contre, pour les résultats de recherche et les autres pages (comme elle de https://google.com), celles-ci s'affichent bien comme il faut.

Attention, les sites web ont leur propre design, tout ce qu'on va faire ici ne va pas changer le design de ceux-ci.

Modifions maintenant notre page d'accueil pour qu'elle apparaisse aussi dans notre couleur favorite 😃

Dans les paramètres de Google, allez à la section "Apparence". Cochez la case "Afficher le bouton Accueil" et sélectionnez la case "Saisissez une adresse Web personnalisée". Ici, je vais renseigner : https://google.com

Essayez maintenant de relancer votre navigateur et admirez le résultat 😊

 

 

Il nous reste maintenant à régler l'affichage des nouveaux onglets. Pour cela, on va profiter de l'extension New Tab Redirect .

Installez là, allez dans sa configuration et choisissez comme adresse de redirection : https://google.com

Profitez maintenant de votre nouveau navigateur personnalisé 😉

 

PHPStorm

 

PHPStorm contient par défaut un thème sombre que l'on peut choisir lors du lancement pour la première fois de l'application.

 

On peut aussi changer de thème en allant dans les Préférences de PHPStorm, dans la section "Appearance and Behavior" et dans le sous-menu "Appearance".

 

Si les thèmes ne vous plaisent pas, vous pouvez en installer de nouveaux. Je vous invite à faire une recherche, vous devriez facilement trouver comment faire.

 

Vous pouvez aussi au besoin créer votre propre thème.Pour cela, rien de plus simple, il vous suffit d'aller dans les préférences de PHPStorm. Dans le menu Editor, choisissez le sous-menu Color Scheme et sélectionnez un langage (ici PHP).

 
Choisissez un élément dans le menu central, et changez la couleur de la manière souhaitée dans le menu de droite.

 

Amusez-vous bien avec vos nouveaux thèmes, et surtout, reposez plus vos yeux 😉