Add button toggle for light/dark mode

[jldohmann]

I want to add a docked cell in the stylesheet definition that will toggle between "Dracula.nb" and "Default.nb" as the style definitions for a notebook.

Default.nb doesn't contain a definition for a toggle, so as soon as you toggle in a notebook with a Dracula theme, it will disappear. So, how I see it working, is that a separate stylesheet that inherits from Default.nb will be used...What I'm not sure about is if

1. users will need to have a new "Default-2.nb" stylesheet installed or if

2. the Notebook expression that contains the new stylesheet can be iconized and stored somewhere hidden like within the docked cell

The docked cell will need to be added to the notebook style definition, if at all

Other things to consider:

• a docked cell with just a toggle button is weird at best, annoying at worst. It will need to contain some other things
• is this something that would even be useful for other people 🤣

Basic prototype:

ex1 = Button[ "Toggle Light/Dark Mode",
  Module[{nb, dark, light, current},
      nb = EvaluationNotebook[];
      dark = "Dracula.nb";
      light = "Default.nb";
      current = StyleDefinitions -> "Dracula.nb";

   If[
       First@Options[nb, StyleDefinitions] === current,
       SetOptions[nb, StyleDefinitions -> light],
       SetOptions[nb, StyleDefinitions -> dark]
    ]
   ]];

CreateWindow[DockedCells -> Cell[BoxData[ToBoxes[ex1]], "DockedCell"]]

---

If anyone has any thoughts, please comment below.

[jldohmann]

An update: a better approach would be a RadioButtonBar, since they're a bit more nondescript. Prototype below:

[jldohmann]

Turning the input into a viable box expression using ex2 // CellPrint gives the following:

Cell[BoxData[
 DynamicModuleBox[{$CellContext`dark$$ = "Dracula.nb", $CellContext`light$$ = 
  "Default.nb", $CellContext`input$$ = "Dracula.nb", $CellContext`action$$}, 
  InterpretationBox[
   StyleBox[
    RowBox[{GridBox[{
       {
        RadioButtonBox[
         Dynamic[$CellContext`input$$, ($CellContext`input$$ = #; \
$CellContext`action$$[$CellContext`input$$])& ], {"Dracula.nb"},
         DefaultBaseStyle->"RadioButtonBar"], 
        StyleBox[
         StyleBox["\"\<Dark\>\"",
          StripOnInput->False,
          LineColor->GrayLevel[0],
          FrontFaceColor->GrayLevel[0],
          BackFaceColor->GrayLevel[0],
          GraphicsColor->GrayLevel[0],
          FontColor->GrayLevel[0]], "RadioButtonBarLabel", "ControlStyle",
         StripOnInput->False]}
      },
      AutoDelete->False,
      BaselinePosition->{1, 2},
      GridBoxAlignment->{"Columns" -> {{Left}}, "Rows" -> {{Baseline}}},
      GridBoxItemSize->{"Columns" -> {{Automatic}}, "Rows" -> {{Automatic}}},
      GridBoxSpacings->{"Columns" -> {
          Offset[0.27999999999999997`], {
           Offset[0.21]}, 
          Offset[0.27999999999999997`]}, "Rows" -> {
          Offset[0.2], {
           Offset[0.4]}, 
          Offset[0.2]}}], "  ", GridBox[{
       {
        RadioButtonBox[
         Dynamic[$CellContext`input$$, ($CellContext`input$$ = #; \
$CellContext`action$$[$CellContext`input$$])& ], {"Default.nb"},
         DefaultBaseStyle->"RadioButtonBar"], 
        StyleBox[
         StyleBox["\"\<Light\>\"",
          StripOnInput->False,
          LineColor->GrayLevel[0],
          FrontFaceColor->GrayLevel[0],
          BackFaceColor->GrayLevel[0],
          GraphicsColor->GrayLevel[0],
          FontColor->GrayLevel[0]], "RadioButtonBarLabel", "ControlStyle",
         StripOnInput->False]}
      },
      AutoDelete->False,
      BaselinePosition->{1, 2},
      GridBoxAlignment->{"Columns" -> {{Left}}, "Rows" -> {{Baseline}}},
      GridBoxItemSize->{"Columns" -> {{Automatic}}, "Rows" -> {{Automatic}}},
      GridBoxSpacings->{"Columns" -> {
          Offset[0.27999999999999997`], {
           Offset[0.21]}, 
          Offset[0.27999999999999997`]}, "Rows" -> {
          Offset[0.2], {
           Offset[0.4]}, 
          Offset[0.2]}}]}], "Deploy"],
   RadioButtonBar[
    Dynamic[$CellContext`input$$, ($CellContext`input$$ = #; \
$CellContext`action$$[$CellContext`input$$])& ], {"Dracula.nb" -> Style["Dark", 
       GrayLevel[0]], "Default.nb" -> Style["Light", 
       GrayLevel[0]]}, LabelStyle -> "ControlStyle"]],
  DynamicModuleValues:>{{DownValues[$CellContext`action$$] = {HoldPattern[
         $CellContext`action$$[
          Pattern[$CellContext`stylesheet, 
           Blank[]]]] :> SetOptions[
         EvaluationNotebook[], StyleDefinitions -> $CellContext`stylesheet]}}}]],
 GeneratedCell->True,
 CellAutoOverwrite->True]