Fix Accessibility for themes - Lighthouse Integration

.github/workflows/lighthouse.yml

@@ -0,0 +1,27 @@
+# https://github.com/marketplace/actions/lighthouse-ci-action
+name: Lighthouse CI for Netlify sites
+on: pull_request
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    steps:
+    - uses: actions/checkout@v3
+    - uses: actions/setup-node@v3
+      with:
+        node-version: v18.13.0
+    - run: npm ci
+
+    - name: Wait for the Netlify Preview
+      uses: jakepartusch/wait-for-netlify-action@v1
+      id: netlify
+      with:
+        site_name: academic-folio
+    - name: Audit URLs using Lighthouse
+      uses: treosh/lighthouse-ci-action@v9
+      with:
+        urls: |
+          ${{ steps.netlify.outputs.url }}
+          ${{ steps.netlify.outputs.url }}/posts/
+        budgetPath: ./budget.json
+        uploadArtifacts: true

assets/css/_base.scss

@@ -1,9 +1,10 @@
 a {
     font-weight: 500;
-    text-decoration: underline;
+    color: var(--global-theme-color);
 
     &:hover {
         color: var(--global-theme-color);
+        text-decoration: underline;
     }
 }
 

budget.json

@@ -0,0 +1 @@
+[]

config/_default/params.yaml

@@ -27,4 +27,4 @@ showRecentNews: true
 socialNavbar: true # show social icons on navbar
 socialHomePage: true # show social icons on the home page
 
-colorTheme: blue # choose a theme from `data/themes` folder
+colorTheme: green # choose a theme from `data/themes` folder

data/themes/green.yaml

@@ -1,15 +1,15 @@
-lightmode_text_color: '#171717'
-lightmode_text_color_light: '#525252'
-lightmode_bg_color: '#f5f5f5'
-lightmode_theme_color: '#16a34a'
-lightmode_header_color: '#f5f5f5'
-lightmode_footer_color: '#f5f5f5'
-lightmode_divider_color: '#525252'
+lightmode_text_color: '#28293d'
+lightmode_text_color_light: '#555770'
+lightmode_bg_color: '#ffffff'
+lightmode_theme_color: '#06C270'
+lightmode_header_color: '#f7f7fa'
+lightmode_footer_color: '#f7f7fa'
+lightmode_divider_color: '#555770'
 
-darkmode_text_color: '#f5f5f5'
-darkmode_text_color_dark: '#a3a3a3'
-darkmode_bg_color: '#171717'
-darkmode_theme_color: '#4ade80'
-darkmode_header_color: '#171717'
-darkmode_footer_color: '#171717'
-darkmode_divider_color: '#a3a3a3'
+darkmode_text_color: '#fafafa'
+darkmode_text_color_dark: '#8f90a6'
+darkmode_bg_color: '#28293d'
+darkmode_theme_color: '#39d98a'
+darkmode_header_color: '#1c1c28'
+darkmode_footer_color: '#1c1c28'
+darkmode_divider_color: '#8f90a6'

tailwind.config.js

@@ -16,6 +16,9 @@ module.exports = {
             typography: ({ theme }) => ({
                 DEFAULT: {
                     css: {
+                        a: {
+                            'text-decoration': 'none',
+                        },
                         h2: {
                             'margin-top': '0',
                         },
@@ -41,7 +44,7 @@ module.exports = {
                         '--tw-prose-body': theme('colors.primary'),
                         '--tw-prose-headings': theme('colors.primary'),
                         '--tw-prose-lead': theme('colors.primary'),
-                        '--tw-prose-links': theme('colors.primary'),
+                        '--tw-prose-links': theme('colors.theme'),
                         '--tw-prose-bold': theme('colors.primary'),
                         '--tw-prose-counters': theme('colors.primary'),
                         '--tw-prose-bullets': theme('colors.primary'),