Allow user colors and motion

[akrossu]

The current accessibility is so absolutely and utterly garbage. There needs to be a settings where users are able to change all current global colors which are currently

colors: {
        'text':'#8cff1a',
        'header':'#8f7ff7',
        'link':'#ff8052',
        'border':'#8cff1a',
      }

The green and purple and moving background is super cool and all for the first impression, but afterwards it's just straining to read

[akrossu]

Finally got a very very basic color option working. Further elements are customizable by specifying classses with the html[data-theme='default'] selector within the app.css file like so:

@layer base {
    html[data-theme='default'] {
        --color-text: #8cff1a;
        --color-header: #8f7ff7;
        --color-link: #ff8052;
        --color-border: #8cff1a;
    }
}

/* ------------------------------------------ */
/*            ACCESSIBILITY LAYOUT            */
/* ------------------------------------------ */
@layer base {
    html[data-theme='monochromatic'] {
        --color-text: #ffffff;
        --color-header: #ffffff;
        --color-link: #ffffff;
        --color-border: #ffffff;
    }
}

/* ------------------------------------------ */
/*             CUSTOM TEST LAYOUT             */
/* ------------------------------------------ */
@layer base {
    html[data-theme='CUSTOM'] {
        --color-text: #ffffff;
        --color-header: #E2E2B6;
        --color-link: #6EACDA;
        --color-border: #E2E2B6;
    }
}

This is then read by the tailwind.config.js with:

theme: {
    extend: {
      colors: {
        text:'var(--color-text)',
        header:'var(--color-header)',
        link:'var(--color-link)',
        border:'var(--color-border)',
      }
    },
  },

[akrossu]

commit a71902e now supports theme changing.

fd3c67a added the custom css files.

BUGS:

There currently exists a bug where selecting a theme.

• Select theme 2
• Go to another page
• Select the next theme
• Go back to the previous page
• Select the next theme

Observation: The theme does not updated on the first click.