sijad best of luck! I'm waiting for another amazing extension of yours!

    it's almost ready, still has few bugs, after fixing those it'll be released as an extension. dark style autogenerate via a script using diff between dark and light styles.

    there's a demo for stylus.

      sijad I'm honestly excited about this. Thank you very much!

        sijad I'm surprised that you didn't just create an extension that would do the exact same thing, but it still looks good nonetheless. ?

            I see, its a custom theme design made for a 3rd party web browser extension.

            Felli first bugs of that script should get fixed, extension need more time to be done, e.g. add ability to let user choose dark mode in front-end, save that settings, regenerate css, etc.

                sijad You could use the form class id to create a toggle switch that would pretty much do this, the only issue I'd see with doing this is you'd have to have two CSS files to call on each form entry.

                  sijad choose dark mode in front-end, save that settings, regenerate css, etc.

                  Regenerating css is not necessary. Because then you're assuming css is related to a user, it would require compilation of the same amount of css as you have users. @Felli has a point here, you'd have to ensure the Less compiler is spitting out a light and dark variant and save the state of the user selection (dark, light). Nothing more I think?

                  Never mind you were thinking the same: flarum/core865#issuecomment-348709128

                      luceos Regenerating css is not necessary. Because then you're assuming css is related to a user, it would require compilation of the same amount of css as you have users. @Felli has a point here, you'd have to ensure the Less compiler is spitting out a light and dark variant and save the state of the user selection (dark, light). Nothing more I think?

                      I mean regenerating diff from dark and light css, you see there's a script that parses both light and dark css and only keeps the different, prioritizes remained css selectors by adding a prefix (e.g. a css class). maybe I did over thinking it, but there's two reason for creating this script:

                      1. making dark css manually is not a good solution.
                      2. I'm not sure changing colors in admin section does or does not effect colors in dark mod. for this reason, dark mode colors should regenerated after changing admin settings.

                        How does the current "theme_dark_mode" setting in the settings table actually work? And can it be utilized given there is a @config-dark-mode LESS variable available?

                          Is it not possible to make an extension that moves the dark theme option from the admin appearance options to the users settings?
                          Maybe give admin option of allowing users to control theme or not.

                            Ralkage after changing theme_dark_mode value, all less files compile again, Flarum sets @config-dark-mode to value of theme_dark_mode before compiling.

                            0E800 no that's not possible currently because there's only one css file for all users.

                                  sijad So... I have a stupid idea. If we have 2 CSS files for all users and based on their choice (if dark mode is active or not), dark.css gets activated for that user. I don't know technical stuff or even if I'm saying something smart. ? Hope it helps.

                                      duman that was my first solution. but currently there's no way to prevent loading main css so user has to download both css files each time he/she reloads the page.

                                          sijad oh... okay ? rest is out of my scope. I'm not really smart about design things. Sorry, wish I could help some

                                            sijad I've thought of this issue as well while working on theming for HumHub, and I've not been able to do much on this issue myself, I at the moment use the following to toggle between two different CSS files.

                                            <form id="switchform">
	<a href="javascript:chooseStyle('none', 60)" checked="checked"><i class="fa fa-sun-o"></i></a>
	<a href="javascript:chooseStyle('dark-theme', 60)"<i class="fa fa-moon-o"></i></a>
</form>

                                            While this does work, it requires two different CSS files to be called. none is seen as the default theme display while dark-theme is the one everyone wishes to switch to for dark mode.

                                              Couldnt the single css that controls the whole flarum site include global variables for the different themes and a switch in the users settings that determines which variable the user wants?

                                              /* MyComponent.css */
.root {
  color: black;
}

/* Dark theme */
:global(.dark-theme) {
  .root {
    color: white;
  }
}

/* Blue theme */
:global(.blue-theme) {
  .root {
    color: blue;
  }
}

                                              or

                                              More than one css.

                                              //index.css 
.btn { font-weight: bold; }

//theme.dark.css
.btn { color:green; } 

//theme.light.css
.btn { color: red; }

                                                Or just give them a color picker and let them go crazy ?