search

francois-dorin / previnpact-extension

MIT License
2 stars 2 forks source link

Create dark-theme-nord.css #5

Closed Wivik closed 7 months ago

Wivik commented 7 months ago

:gift:

Details

![image](https://github.com/francois-dorin/previnpact-extension/assets/48727868/a9c6cc47-b1c3-4bd9-b657-cbad1e289ab0) ![image](https://github.com/francois-dorin/previnpact-extension/assets/48727868/bd0a7a97-4a3a-4790-b19e-12e96bbd2ed7)

J'ai remis le border sous les header car je préfère cette séparation. J'avais commencé à mettre des couleurs custom pour les themes mais la palette de Nord est trop limitée donc j'ai laissé tomber. J'ai séparé footer et header.

J'aurais apprécié que le header sur les articles soit plus clair, mais je pense qu'ils gèrent ça en back.

francois-dorin commented 7 months ago

Super merci.

De mon côté, je vais travailler un peu sur les thèmes une fois que la gestion des thèmes sera incluse de base sur le site (a priori, c'est pour bientôt).

Je vais fortement revoir mon code, pour le faire évoluer :

J'attends donc une stabilisation de la structuration des pages Web pour le faire aussi.

En tout cas, c'est cool comme contribution :) Encore merci

francois-dorin commented 7 months ago

A prévoir également pour les "crédits" : le nom que tu souhaites voir afficher (si tu souhaites le voir), ainsi que potentiellement ton pseudo sur Next.

Car je songe à rajouter une liste de contributeurs.

francois-dorin commented 7 months ago

Et pour en revenir aux thèmes, je souhaite aussi attendre car si je peux réutiliser le système du site, j'ai envie de dire pourquoi pas. Cela leur faciliterait en plus le travail si l'équipe de Next souhaite reprendre un thème pour le proposer directement de base, sans avoir besoin de passer par l'extension

Wivik commented 7 months ago

A prévoir également pour les "crédits" : le nom que tu souhaites voir afficher (si tu souhaites le voir), ainsi que potentiellement ton pseudo sur Next.

Car je songe à rajouter une liste de contributeurs.

Tu peux mettre "Seb" simplement et à côté "SebGF" pour le pseudo sur Next avec le lien vers le profil GitHub, ça pourra le faire :)

Wivik commented 7 months ago

Bon bah ils ont tout cassé, les thèmes sont arrivés :rofl: image

Ils ont repris Nord pour le thème Dracula ! :heart:

francois-dorin commented 7 months ago

Yes, je viens de voir que le sélecteur de thème est arrivé. Je regarde demain dans les détails, mais grosso-modo, on a utilisé la même approche pour la gestion des thèmes : l'ajout d'une classe au niveau du <body> et après, des règles CSS pour la personnalisation.

Dans les fichiers sources du site, j'ai vu que les 3 thèmes étaient disponibles dans le même fichier. Je vais donc pouvoir voir assez simplement les éléments à modifier pour rajouter des thèmes :)

Du coup, peut être pas pour le thème nord, puisqu'ils ont déjà le thème Dracula ^^

Wivik commented 7 months ago

Du coup, peut être pas pour le thème nord, puisqu'ils ont déjà le thème Dracula ^^

On peut toujours troller en mettant la version light de Nord :p

Je pense que tu peux fermer la PR. L'exercice restait intéressant et ça ne m'a pris qu'une dizaine de minutes, donc pas de regret !

francois-dorin commented 7 months ago

Je ne ferme pas encore la PR. Il y a une très forte probabilité que je ne l'intègre pas (à cause des changements qu'il y a eu sur le site), mais je suis en train de "faire mumuse" pour pouvoir intégrer des thèmes facilement. Si tout se passe bien, il y aura juste un bloc CSS à personnaliser par thème.

Il faut juste que je vérifie si le sélecteur sur :root pour la définition des variables CSS fonctionne (si oui, ce serait génial ^^)

:root body.nom-du-theme {
    --header-background-color: #FFFFFF;         /* header-biafine */
    --agora-background-color: #EAECFF;          /* background-agora-biafine */
    --background-color: #FBFCFF;                /* background-biafine */
    --sommaire-background-color: #FFFFFF;       /* background-sommaire-biafine */
    --article-home-background-color: #FBFCFF;   /* background-article-home-biafine */
    --sommaire-highlight-color: #4F62FF26;      /* sommairehighlight-biafine */
    --text-color: #242424;                      /* text-biafine */
    --category-tag-color: #F2F2F2;              /* category-tag-biafine */
    --text-bold-color: #6B6B6B;                 /* bold-biafine */
    --text-black-color: #242424;                /* black-biafine */
    --text-white-color: #FFFFFF;                /* white-biafine */
    --article-info-color: #6B6B6B;              /* info-article-biafine */
    --citation-color: #FFFFFF;                  /* citation-biafine */
}
francois-dorin commented 7 months ago

Hello @Wivik J'ai publié une mise à jour de l'extension. J'ai supprimé le thème sombre (qui n'avait plus vraiment d'utilité). Et j'ai commencé à rajouter le support du multithème.

L'approche que je souhaitais suivre est fonctionnelle. Pour la liste des variables à modifier, c'est par ici : https://github.com/francois-dorin/previnpact-extension/blob/master/modules/content_script/assets/css/custom-themes/variables.css

Donc si tu as envie de proposer un thème Nord light... n'hésite pas ;)

Wivik commented 7 months ago

Nice, j'essayerai d'y jeter un oeil (et de te faire aussi le workflow de publish, j'ai zappé).

Après il pourra être sympa d'essayer de proposer différents thèmes issues d'autres palettes. Il y a Catpuccin par exemple qui est pas mal aussi https://github.com/catppuccin

francois-dorin commented 7 months ago

Oui, ça pourrait être sympa d'intégrer d'autres thèmes.

Demain, je pense mettre en place le sélecteur de thème à proprement parler (ce n'est quasiment que de l'IHM, le code est prêt !).

Ce soir, j'ai juste rajouté la gestion des écrans larges :)

francois-dorin commented 7 months ago

Bon, du coup, je ferme cette PR sans intégration. Merci encore en tout cas :)