Q1. Can I overwrite the Vanilla theme completely? I mean to completely replace it?
1.1. I mean I do not like to start a fresh / new TW with $:/themes/tiddlywiki/vanilla?
Some difficulties:
Do you want to change the palette or do you also want to change the PageTemplate and all its children?
I want to replace both of them, but first the PageTemplate!
If I understood you well…
The Vanilla theme has two kind of tiddlers: themetweak/settings and CSS tiddler. Maybe you only need to change The part of CSS. Then you have to options:
You could add a new CSS tiddler to the vanilla theme, it will use the Cascade of CSS to overwrite the previous styles (only you have to ensure that your new styles are loaded after of the originals). It is similar to how works the themes based on the vanilla theme (reusing the selectors).
The hard way. You will need to know the structure of the layout and its selectors and then you have to create your styles, it you could reuse some selector o create new selectors. But you maybe have to solve problems of specifity in your styles.
I am only learning about this myself, some thoughts;
If you make enough changes and are comprehensive about it rather than overwrite the theme, you replace it. The advantage of it being there, is it’s a fall back for any elements you have not addressed.
I am not expert on this but I would keep themes and page layouts seperate. Start with cloning $:/core/ui/PageTemplate as per https://tiddlywiki.com/#Alternative%20page%20layouts and keep as many of the functional tiddlers in the process “as is” and cloning or introducing new tiddlers to your alternative layout as needed.
With the theme I suggest leaving the basic theme in place and using a clone to rewrite it, an empty list-after field should always make it the last stylesheet to take effect. If you need eventually to remove the Vanilla theme only do it for your published edition at the end when you are confident you have handled all requirements.
Perhaps editing the contents of $:/themes/tiddlywiki/vanilla until you have the required outcomes then generating a new theme plugin from the result is a good idea?
Please share your final approach @Mohammad
Hi Tony!
I am looking for a (peaceful 
) method to replace vanilla theme! As @Alvaro explained I have to know the structure of layout and its selectors,… This is the hardway!
As we discussed few times before the UI of TW has not grown as much as its WikiText has grown and got advanced features.
If we can find a simpler method to shape the visual face of TW, then we can have different variants.
I tried to understand and improve JD’s material theme some years ago.
One thing I did was compare the diff between her layout tiddlers with the vanilla theme tiddlers. I could not make much headway because, at that time, my knowledge of TW was minimal.
I gave up and made myself live with the vanilla theme until I gathered enough TW knowledge and time to create a theme of my own.
Perhaps, you, too, can start with this “viewing diff” strategy cause your knowledge of TW is far superior to mine. Pick a simpler custom theme like Zacht, understand how it changes the layouts, and move to more involved themes like Captivate.
This is a good tool for viewing diff.
This would be an immense contribution. TW lacks modern themes. And customizing the layout aspect of TW is not well documented.
Compare TW’s meager list of themes with some other tool like Hugo’s.
OK. … I think there would be some “reverse engineering” for the documentation be needed first. …
As I wrote at: Search for TW classes and where they are used in the UI - #4 by pmario the easiest way to start would be with little helper styles, that outline a certain class.
Then it would need to be documented. May be some additional docs for the TW-dev wiki where every class-name is documented for what it is used at the moment. …
May be every class name and class combination that is defined in the vanilla palette should get its own tiddler with a little <style>.tc-somethin {outline: 1px solid blue}</style> definition. So the outline is only shown if the tiddler is open in the story river.
Together with the new Palette Manager that will connect the colour names to the visual elements, this would probably be a solid fundament to start with.
I think without that basic info your endeavour will be an endless task.
Very likely your theme will be very specific to your usecases and your opinion.
But what we need as a community is basic understanding how the templates and classes work together so we can modify it to our liking.
Just some thoughts.
BTW Nobody did try to create a new PageTemplate + all children from scratch, because the info I did mention above is missing.
There would be a second step involved, which needs some knowledge about the core javascript code, because some classes are “hardcoded” there. …
I would be willing to help with that part of the documentation, but I don’t have the time to create the first part mentioned in the other post.
I’m struggling to finish the Palette-Manager project, because every time I add a bit more docs to publish it, I find a new inconvenience that needs to be fixed first. 
-m
Many thanks for your clarification and hints.
I will investigate and document my finding in a wiki and then will share!
I will also look at some alternate page templates out there.
Three naĂŻve comments from an end user 
From my point of view “Vanilla” is only superficially difficult. But mainly that is due to its size and scope. Practically I found that once I can see what the main containing CSS classes do it gets a lot, lot easier. So, in practice, this issue could get easier IF we had …
… a TW CSS Trainer edition … I’m thinking along the lines of what @BurningTreeC has done for the special classes in MCL (see “Documentation”) where he live demos the main container classes. What I’m getting at is visual feedback of what classes do what is, to at least me, extremely helpful. Maybe that is relevant here too?
I’m not sure if it is still helpful, but, in past, I found @telmiger’s Bricks Plugin very useful for thinking about CSS in TW and handling Vanilla.
Comments, TT
As I wrote the palette manager already gives a good overview about colours and related elements. The only thing missing is the connection from there to the real tc-classes used in TW.
It should be possible to add some links from there to the “to be written” docs about the classes.
Right.
And what you doing on palettes is brilliant! Making clearer, as you are doing, how they work with CSS classes is gonna help everyone colour better!
My point was more generic to the OP.
Does “Vanilla” need to be overwritten? I dunno!
I personally think it is rather well written, though very difficult (because of it’s size) to get your head around just reading it’s code.
My point was simply whether a more interactive visual way of understanding it, that teaches you the classes interactively via screen demo could help?
Just a thought
TT
I think it would be interesting to build a new theme from scratch. Starting with the page template and having mobile and accessibility in mind from the beginning.
I personally do like the existing TW UI using it with the desktop. But it is kind of unusable with mobile.
I think for mobile the main page should have much less noise, which imo would also be a good thing for screen readers on desktop. Since there would be less elements visible at the same time.
Just a comment (from someone who isn’t a back-end coder who understands any core issues).
I think I get what you mean.
But IF you happy on desktop already IS the solution for mobile needing a new base?
Or simply some kinda Startup Actions? to reduce the CSS when a mobile is detected?
Just a naĂŻve comment!
TT
I am back to your first question.
And pointing out “Vanilla” is a few things, not just one.
To change that “Vanilla” CSS in TW we DO need understand what it IS and what it DOES, I think. It does a LOT more than most CSS themes.
Just a comment, TT
RESET — https://tiddlywiki.com/#%24%3A%2Fthemes%2Ftiddlywiki%2Fvanilla%2Freset
BASE (including dynamic macros) — https://tiddlywiki.com/#%24%3A%2Fthemes%2Ftiddlywiki%2Fvanilla%2Fbase
STICKY — https://tiddlywiki.com/#%24%3A%2Fthemes%2Ftiddlywiki%2Fvanilla%2Fsticky
THEMETWEAKS (overrides by user selection) — https://tiddlywiki.com/#%24%3A%2Fthemes%2Ftiddlywiki%2Fvanilla%2Fthemetweaks
I’d guess the BASE is the Proof-Of-The-Pudding.
I think it a great piece of work, but huge, and it is NOT simple CSS.
It involves TW macros.
Basta, TT
Well, Vanilla is important to the world economy…
Short answer. You can!
Question: Do you want to rewrite over 500 CSS rules?
Would you be better than JR?
The creation of new theme from scratch, it is the top hardway. Then we have to create the new UI with their elements, maybe we will forget some elements. The key would be the vanilla theme but also it can bring to us its complexity and its derivated problems. My doubt is when we could reduce the complexity of the vanilla theme: before or after starting the new theme.
The second question is how can reduce the complexity in the new theme (¿and in vanilla?). I think the best way is “divide et vinces”. Maybe it could be separated in 3 or 4 groups, but the problem would be have understandabled (¿clear?) limits. I think in groups as: layout, theme and palette (and maybe reset styles). But I’m not sure that everyone sees them with the same clearness (or maybe I would be wrong in how I thouthg about them).
I found me with a problem when I try reduce the complexity by division, I could do more division than the needed group. Welcome to the new complexity!!