Color mode (#984)

* css and className changes for color mode * docs color mode theme switch * lint * Added more info on themes * Update docs/components_page/components/form.md Co-authored-by: Tom Begley <[email protected]> * fixed stack style * align theme toggle to right & format as btn * lint * fixed stack examples * make examples pages always a light theme --------- Co-authored-by: Tom Begley <[email protected]>
facultyai · Oct 27, 2023 · da4553c · da4553c
1 parent b3464a1
commit da4553c
Show file tree

Hide file tree

Showing 13 changed files with 139 additions and 50 deletions.
diff --git a/components_page/components/form.md b/components_page/components/form.md
@@ -49,6 +49,8 @@ The `FormFeedback` component should be added to a `html.Div` containing the `Inp
 
 `Form` and other components can also be used with _dash-core-components_.
 
+Note that Bootstrap themes are not automatically applied to components such as _dash-core-components_, _dash-ag-grid_, or _DataTable_. For more information on styling other Dash components with a Bootstrap theme see the [Dash Bootstrap Theme Explorer](https://hellodash.pythonanywhere.com/) site.
+
 {{example:components/form/dash_core.py:form}}
 
 {{apidoc:src/components/form/Form.js}}

diff --git a/components_page/components/jumbotron/custom.py b/components_page/components/jumbotron/custom.py
@@ -12,7 +12,7 @@
             ),
             dbc.Button("Example Button", color="light", outline=True),
         ],
-        className="h-100 p-5 text-white bg-dark rounded-3",
+        className="h-100 p-5 text-white bg-primary rounded-3",
     ),
     md=6,
 )
@@ -28,7 +28,7 @@
             ),
             dbc.Button("Example Button", color="secondary", outline=True),
         ],
-        className="h-100 p-5 bg-light border rounded-3",
+        className="h-100 p-5 bg-light text-dark border rounded-3",
     ),
     md=6,
 )

diff --git a/components_page/components/jumbotron/simple.py b/components_page/components/jumbotron/simple.py
@@ -22,5 +22,5 @@
         fluid=True,
         className="py-3",
     ),
-    className="p-3 bg-light rounded-3",
+    className="p-3 bg-body-secondary rounded-3",
 )
diff --git a/components_page/components/layout/horizontal_stack.py b/components_page/components/layout/horizontal_stack.py
@@ -5,20 +5,20 @@
     [
         dbc.Stack(
             [
-                html.Div("Horizontal", className="bg-light border"),
-                html.Div("Stack", className="bg-light border"),
-                html.Div("Without", className="bg-light border"),
-                html.Div("Gaps", className="bg-light border"),
+                html.Div("Horizontal"),
+                html.Div("Stack"),
+                html.Div("Without"),
+                html.Div("Gaps"),
             ],
             direction="horizontal",
         ),
         html.Hr(),
         dbc.Stack(
             [
-                html.Div("Horizontal", className="bg-light border"),
-                html.Div("Stack", className="bg-light border"),
-                html.Div("With", className="bg-light border"),
-                html.Div("Gaps", className="bg-light border"),
+                html.Div("Horizontal"),
+                html.Div("Stack"),
+                html.Div("With"),
+                html.Div("Gaps"),
             ],
             direction="horizontal",
             gap=3,

diff --git a/components_page/components/layout/simple_stack.py b/components_page/components/layout/simple_stack.py
@@ -5,19 +5,17 @@
     [
         dbc.Stack(
             [
-                html.Div(
-                    "This stack has no gaps", className="bg-light border"
-                ),
-                html.Div("Next item", className="bg-light border"),
-                html.Div("Last item", className="bg-light border"),
+                html.Div("This stack has no gaps"),
+                html.Div("Next item"),
+                html.Div("Last item"),
             ]
         ),
         html.Hr(),
         dbc.Stack(
             [
-                html.Div("This stack has gaps", className="bg-light border"),
-                html.Div("Next item", className="bg-light border"),
-                html.Div("Last item", className="bg-light border"),
+                html.Div("This stack has gaps"),
+                html.Div("Next item"),
+                html.Div("Last item"),
             ],
             gap=3,
         ),

diff --git a/components_page/components/layout/stack_spacers.py b/components_page/components/layout/stack_spacers.py
@@ -1,27 +1,28 @@
 import dash_bootstrap_components as dbc
 from dash import html
 
+demo_div = "bg-primary-subtle border border-primary-subtle p-2"
+
 stack = html.Div(
     [
         dbc.Stack(
             [
-                html.Div("Start", className="bg-light border"),
+                html.Div("Start"),
                 html.Div(
-                    "Middle (ms-auto)", className="ms-auto bg-light border"
+                    "Middle (ms-auto)",
+                    className="ms-auto",
                 ),
-                html.Div("End", className="bg-light border"),
+                html.Div("End"),
             ],
             direction="horizontal",
             gap=3,
         ),
         html.Hr(),
         dbc.Stack(
             [
-                html.Div("Start", className="bg-light border"),
-                html.Div(
-                    "Middle (mx-auto)", className="mx-auto bg-light border"
-                ),
-                html.Div("End", className="bg-light border"),
+                html.Div("Start"),
+                html.Div("Middle (mx-auto)", className="mx-auto"),
+                html.Div("End"),
             ],
             direction="horizontal",
             gap=3,

diff --git a/content/docs/themes.md b/content/docs/themes.md
@@ -59,6 +59,45 @@ To start with, we recommend experimenting with some of the Bootswatch themes ava
 
 Check out the [theme explorer](/docs/themes/explorer/) for a live demo of dash-bootstrap-components using all of the different available themes. You may also like to check out the [dash-bootstrap-css](https://github.com/tcbegley/dash-bootstrap-css) project which contains Bootstrap stylesheets that apply consistent styling to various components from dash-core-components.
 
+## Light and Dark Color Modes
+
+_Available in dash-bootstrap-components>=1.5.0_
+
+To toggle between a light and dark mode in your app, create a component to switch the theme.  For example, add a component like this to the layout:
+
+```python
+app = Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP, dbc.icons.FONT_AWESOME])
+
+color_mode_switch =  html.Span(
+    [
+        dbc.Label(className="fa fa-moon", html_for="switch"),
+        dbc.Switch( id="switch", value=True, className="d-inline-block ms-1", persistence=True),
+        dbc.Label(className="fa fa-sun", html_for="switch"),
+    ]
+)
+```
+
+Here's a callback to change the theme:
+
+```python
+clientside_callback(
+    " " " 
+    (switchOn) => {
+       switchOn
+         ? document.documentElement.setAttribute('data-bs-theme', 'light')
+         : document.documentElement.setAttribute('data-bs-theme', 'dark')
+       return window.dash_clientside.no_update
+    }
+    " " ",
+    Output("switch", "id"),
+    Input("switch", "value"),
+)
+```
+
+See this example live in the [Dash Bootstrap Theme Explorer](https://hellodash.pythonanywhere.com/adding-themes/color-modes)
+See more information in the [Bootstrap Docs](https://getbootstrap.com/docs/5.3/customize/color-modes/)
+
+
 [dash-docs-external]: https://dash.plotly.com/external-resources/
 [bootstrap]:https://getbootstrap.com/
 [bootstrap-download]: https://getbootstrap.com/docs/5.0/getting-started/download/

diff --git a/static/docs.css b/static/docs.css
@@ -31,6 +31,11 @@ span.hljs-meta {
   color: #66d9ef;
 }
 
+.highlight {
+  border: var(--bs-border-color) var(--bs-border-style) var(--bs-border-width);
+  border-radius: 6px;
+}
+
 .demo-layout-container {
   height: 600px;
   margin-right: 0rem;
@@ -60,18 +65,17 @@ span.hljs-meta {
 }
 
 .docs-sidebar .nav-link {
-  color: #888;
+  color:  var(--bs-body-color)
   padding: 0.3rem 0.5rem 0.3rem 1rem;
   border-left: 2px solid transparent;
 }
 
 .docs-sidebar .nav-link:hover {
-  color: #777;
   border-left: 2px solid #aaa;
 }
 
 .docs-sidebar .nav-link.active {
-  color: #666;
+  color:  var(--bs-emphasis-color);
   border-left: 2px solid #d9534f;
 }
 
@@ -80,7 +84,7 @@ span.hljs-meta {
 }
 
 .example-container {
-  border: 1px solid #d8d8d8;
+  border: 1px solid var(--bs-border-color);
   margin: 2rem 0 0;
   border-radius: 6px;
 }
@@ -96,6 +100,7 @@ span.hljs-meta {
 
 .example-source-container pre {
   margin-bottom: 0;
+  border: 1px solid var(--bs-border-color);
 }
 
 .source-container pre.hljs {
@@ -108,14 +113,7 @@ span.hljs-meta {
 
 .layout-demo .row {
   margin-bottom: 10px;
-  background: linear-gradient(
-      to right,
-      rgba(0, 0, 0, 0),
-      rgba(0, 0, 0, 0) calc(100% - 0.75rem),
-      #fff calc(100% - 0.75rem)
-    ),
-    linear-gradient(to right, #fff, #fff 0.75rem, rgba(0, 0, 0, 0) 0.75rem),
-    linear-gradient(to right, #eeeeee, #eeeeee);
+  background: var(--bs-secondary-bg-subtle)
 }
 
 .layout-demo .row.g-0 {
@@ -127,10 +125,12 @@ span.hljs-meta {
 }
 
 .layout-demo .col > div,
-.layout-demo [class*='col-'] > div {
+.layout-demo [class*='col-'] > div,
+.layout-demo .vstack  > div,
+.layout-demo .hstack  > div {
   padding: 0.75rem;
-  background-color: rgba(86, 61, 124, 0.15);
-  border: 1px solid rgba(86, 61, 124, 0.2);
+  background-color: var(--bs-primary-bg-subtle);
+  border: 1px solid var(--bs-primary-border-subtle);
 }
 
 ._dash-undo-redo {
@@ -218,17 +218,18 @@ span.hljs-meta {
   padding: 0.25rem 0rem;
   font-weight: 500;
   font-size: 1.25rem;
-  color: rgba(0, 0, 0, 0.65);
+  color: var(--bs-body-color);
   text-decoration: none;
 }
 
 .dbcd-nav-link:hover {
-  color: rgba(0, 0, 0, 0.75);
   text-decoration: none;
+  font-weight: bold;
 }
 
 .dbcd-nav-item.active > .dbcd-nav-link {
-  color: rgba(0, 0, 0, 0.85);
+  color: var(--bs-emphasis-color);
+  font-weight: bold;
 }
 
 .dbcd-nav-links ul > li {
@@ -237,16 +238,17 @@ span.hljs-meta {
 
 .dbcd-nav-links ul > li > a {
   padding: 0.25rem 0rem;
-  color: rgba(0, 0, 0, 0.65);
+  color: var(--bs-body-color);
   text-decoration: none;
 }
 
 .dbcd-nav-links ul > li.active > a {
-  color: rgba(0, 0, 0, 0.85);
+   color: var(--bs-emphasis-color);
+   font-weight: bold;
 }
 
 .dbcd-nav-links ul > li > a:hover {
-  color: rgba(0, 0, 0, 0.75);
+  font-weight: bold;
   text-decoration: none;
 }
 

diff --git a/static/js/docs-theme-change.js b/static/js/docs-theme-change.js
@@ -0,0 +1,35 @@
+const getStoredTheme = () => localStorage.getItem('theme')
+const lightIcon = "bi bi-sun-fill"
+const darkIcon = "bi bi-moon-fill"
+
+
+const setIcon = theme => {
+  icon = theme == "light" ? lightIcon : darkIcon
+  document.getElementById('theme-icon').className = icon
+}
+
+const handleThemeChange = () => {
+  getStoredTheme() == 'dark' ? setTheme("light") : setTheme("dark")
+}
+
+const setTheme = theme => {
+  document.documentElement.setAttribute('data-bs-theme', theme)
+  localStorage.setItem('theme', theme)
+  setIcon(theme)
+}
+
+// icon needs to be set after page is loaded
+const setInitialIcon = () => {
+  getStoredTheme() == 'dark' ? setIcon("dark") : setIcon("light")
+}
+window.onload = (event) => {
+  // example pages should always be light theme
+  if (window.location.pathname.includes("/examples") ) {
+    return document.documentElement.setAttribute('data-bs-theme', "light")
+  }
+  setInitialIcon()
+
+};
+
+
+
diff --git a/templates/index.html b/templates/index.html
@@ -55,8 +55,8 @@ <h2>Get started quickly</h2>
         <a href="/docs/quickstart" class="btn btn-secondary">Quickstart »</a>
       </div>
       <div class="col-12 col-lg-6 mt-4 mt-lg-0">
-        <pre><code class="language-sh">pip install dash-bootstrap-components</code></pre>
-        <pre><code class="language-python">import dash
+        <pre><code class="language-sh border">pip install dash-bootstrap-components</code></pre>
+        <pre><code class="language-python border">import dash
 import dash_bootstrap_components as dbc
 
 app = dash.Dash(

diff --git a/templates/macros/navbar.html b/templates/macros/navbar.html
@@ -66,6 +66,11 @@
           </div>
         </li>
       </ul>
+       <div class="ms-auto" >
+          <button class="btn btn-outline-secondary bt-sm" id="docs-theme" onclick="handleThemeChange()" >
+            <i class="bi bi-sun-fill" id="theme-icon"></i>
+          </button>
+       </div>
     </div>
   </div>
 </nav>

diff --git a/templates/partials/head.html b/templates/partials/head.html
@@ -5,3 +5,9 @@
 <link rel="stylesheet" href="/static/docs.css" />
 <link rel="shortcut icon" type="image/png" href="/static/images/dbciconwhite16.png" />
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css" />
+
+<!-- sets correct theme on page refresh  -->
+<script>
+  dbcdStoredTheme = localStorage.getItem('theme')
+  document.documentElement.setAttribute('data-bs-theme', dbcdStoredTheme)
+</script>
diff --git a/templates/partials/scripts.html b/templates/partials/scripts.html
@@ -1,5 +1,6 @@
 <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script>
 <script src="/static/js/highlight.min.js"></script>
+<script src="/static/js/docs-theme-change.js"></script>
 <script>
   hljs.configure({ignoreUnescapedHTML: true})
   hljs.highlightAll()