Maison >interface Web >tutoriel CSS >Thème Obsidienne Cyberdev
J'ai conçu un thème Obsidian spécial adapté aux développeurs qui travaillent sur leur ordinateur tard le soir, écrivant du code ou prenant des notes. Ce thème est développé pour minimiser la fatigue oculaire des utilisateurs qui passent de longues heures devant l'écran. Un contraste élevé est obtenu en utilisant des couleurs contrastées sur un fond noir, améliorant la lisibilité et offrant une expérience utilisateur confortable.
Lors du développement de cette thématique, les principaux défis rencontrés ont été les suivants :
Luminosité de l'écran : création d'un design qui ne fatigue pas les yeux lors d'une utilisation prolongée.
Lisibilité : garantir que le texte et le code sont facilement distinguables et compréhensibles.
Simplicité et minimalisme : éviter l'encombrement visuel inutile pour offrir une expérience utilisateur ciblée.
Lisibilité du code : concevoir un jeu de couleurs qui rend le code facilement distinguable et analysable.
Avec ces critères à l'esprit, j'ai cherché à créer un thème qui donne la priorité à l'expérience utilisateur.
Les fichiers de modèle de thème ont été copiés du fichier de modèle Obsidian dans un fichier de coffre-fort Obsidian nouvellement créé.
Après que les fichiers modèles ont été déplacés vers le dossier .obsidian/themes, le fichier manifest.json a été modifié.
Le point le plus important à noter ici est que la valeur attribuée au champ de nom dans le fichier manifest.json doit correspondre au nom du dossier. Par exemple, si la valeur est "name": "cyberdev", le nom du dossier de modèles doit également être mis à jour en "cyberdev".
À partir de ce moment, tous les ajustements seront effectués dans le fichier theme.css. A ce stade, il y a deux points clés à comprendre :
Variables CSS par défaut dans l'API Obsidian :
Obsidian fournit des variables CSS par défaut, qui vous permettent de modifier directement des valeurs telles que la couleur, la taille de la police, la famille de polices et l'épaisseur de la bordure. Ces variables peuvent être trouvées dans la section Variables CSS dans Obsidian Docs.
Utilisation des outils de développement :
Après avoir ouvert l'interface Obsidian, vous pouvez accéder aux outils de développement en appuyant sur CTRL SHIFT I. Ensuite, en utilisant le raccourci CTRL SHIFT C, vous pouvez activer le mode inspection. Cela vous permet de sélectionner des éléments spécifiques sur l'écran à l'aide de la souris. Les variables CSS liées à l'élément sélectionné seront affichées. Pour ces classes, telles que .cm-em{}, vous devez les écrire avec une notation par points et définir les variables entre accolades.
Comme les autres codes de thème Obsidian, le thème est open-source sous licence MIT. Après l'avoir téléchargé sur votre ordinateur ou créé une branche via un fork depuis le référentiel, vous pouvez le personnaliser et ajouter des fonctionnalités à votre guise. Vous pouvez également cloner le référentiel et le modifier sur votre ordinateur comme vous le souhaitez.
Vous pouvez consulter le projet à l'adresse GitHub suivante :
gokayburuc/cyberdev-obsidian-theme
Les instructions pour télécharger le thème peuvent être trouvées dans le référentiel spécifié.
Vous pouvez me contacter concernant le projet via les canaux suivants
Télégramme : @gokayburuc
Courrier : gokayburuc@yandex.com
LinkTree : https://linktr.ee/gokayburuc
Si vous avez aimé cet article, abonnez-vous à ma chaîne et partagez cet article.
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!