Feature Request: CSS Styling/Theming?

[krth8]

Currently a very intuitive and functional UI. Maybe just a bit traditional looking?

Could some of the styling be exposed as boxes in a settings panel?

Or maybe a simpler way of overriding the defaults with CSS styling.

Not an important feature as i like the UI, would just be fun to be able to tighten it up to ones own preferences.

[elonen]

Not against it by any means, but it's quite a log of work. The client/frontend part has been developed with Tailwind CSS to save time and allow for rapid iteration, so making everything customizable would require refactoring all the Svelte components to an external, editable CSS file.

[krth8]

Aaah, i see!

Pardon my ignorance here, but checking the tailwind config file i see this:

theme: { extend: {}, },

Could one have env variables for some of these? Would that be simpler/possible? Colors, Border Radius, Body Color and Background to name a few.

theme: { extend: { colors: { primary: '#ff0000',
secondary: '#00ff00',
accent: '#0000ff',
},

[elonen]

There's no shortcut really. Here's an excerpt from CommentCard.svelte to illustrate what I mean:

    {#if showActions}
    <div class="p-2 flex place-content-end" transition:slide="{{ duration: 200 }}">
        <button class="border rounded-lg px-1 placeholder: ml-2 text-sm border-cyan-500 text-cyan-500" on:click={()=>showReply=true}>Reply</button>
        {#if comment.userId == $curUserId || $curUserIsAdmin}
            <button class="border rounded-lg px-1 ml-2 text-sm border-cyan-600 text-cyan-600" on:click="{()=>{editing=true;}}">Edit</button>
            {#if !hasChildren()}
            <button class="border rounded-lg px-1 ml-2 text-sm border-red-300 text-red-300" on:click={onClickDeleteComment}>Del</button>
            {/if}
        {/if}
    </div>
    {/if}

Tailwind makes it super compact and easy to develop and prototype, but turning that into customizable style would require rewriting all such code to refer to a central CSS. That, in turn, implies that the UI has reached a relatively stable place, as a rigorously externalized CSS is pretty hard to work with when you need to rapdily change/try out things.

So not impossible by any means, just not a very low hanging fruit and would slow down development of more functionality-focused features for now.

[elonen]

Note to self: add logo / name customization as a first step.

[krth8]

Very neat!

As there is no shortcut as you say, how about making different tailwind CSS theme files instead to load? I don't really know what i am talking about here, just spitballing.