docs: update theme

Author: mrholek

docs/layouts/shortcodes/example.html

@@ -21,7 +21,7 @@
 
 <div class="docs-example-snippet docs-code-snippet">
   {{- if eq $show_preview true -}}
-  <div{{ with $id }} id="{{ . }}"{{ end }} class="docs-example{{ with $class }} {{ . }}{{ end }}">
+  <div{{ with $id }} id="{{ . }}"{{ end }} class="docs-example m-0 border-0{{ with $class }} {{ . }}{{ end }}">
     {{- $input -}}
   </div>
   {{- end -}}
@@ -31,9 +31,6 @@
       <div class="d-flex align-items-center highlight-toolbar ps-3 pe-2 py-1 border-0 border-top border-bottom">
         <small class="font-monospace text-body-secondary text-uppercase">{{- $lang -}}</small>
         <div class="d-flex ms-auto">
-          {{- /*<button type="button" class="btn-edit text-nowrap"{{ with $stackblitz_add_js }} data-sb-js-snippet="{{ $stackblitz_add_js }}"{{ end }} title="Try it on StackBlitz">
-            <svg class="bi" aria-hidden="true"><use xlink:href="#lightning-charge-fill"/></svg>
-          </button>*/ -}}
           <button type="button" class="btn-clipboard mt-0 me-0" title="Copy to clipboard">
             <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="16" height="16">
               <polygon fill="var(--ci-primary-color, currentColor)" points="408 432 376 432 376 464 112 464 112 136 144 136 144 104 80 104 80 496 408 496 408 432" class="ci-primary"/>

docs/layouts/shortcodes/js-docs.html

@@ -26,11 +26,19 @@
   {{- $match = replace $match $capture_start "" -}}
   {{- $match = replace $match $capture_end "" -}}
 
-  <div class="docs-example-snippet docs-code-snippet">
-    <div class="docs-clipboard">
-      <button type="button" class="btn-clipboard" title="Copy to clipboard">
-        <svg class="bi" aria-hidden="true"><use xlink:href="#clipboard"></use></svg>
-      </button>
+  <div class="docs-example-snippet docs-code-snippet docs-file-ref">
+    <div class="d-flex align-items-center highlight-toolbar ps-3 pe-2 py-1 border-bottom">
+      <div class="font-monospace link-secondary link-underline-secondary link-underline-opacity-0 link-underline-opacity-100-hover small">
+        {{- $file -}}
+      </div>
+      <div class="d-flex ms-auto">
+        <button type="button" class="btn-clipboard mt-0 me-0" title="Copy to clipboard">
+          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="16" height="16">
+            <polygon fill="var(--ci-primary-color, currentColor)" points="408 432 376 432 376 464 112 464 112 136 144 136 144 104 80 104 80 496 408 496 408 432" class="ci-primary"/>
+            <path fill="var(--ci-primary-color, currentColor)" d="M176,16V400H496V153.373L358.627,16ZM464,368H208V48H312V200H464Zm0-200H344V48h1.372L464,166.627Z" class="ci-primary"/>
+          </svg>
+        </button>
+      </div>
     </div>
     {{- $unindent := 0 -}}
     {{- $found := false -}}

docs/layouts/shortcodes/scss-docs.html

@@ -39,11 +39,11 @@
     {{- $match = replace $match " !default" "" -}}
   {{- end -}}
 
-  <div class="docs-example-snippet docs-code-snippet docs-scss-docs">
+  <div class="docs-example-snippet docs-code-snippet docs-file-ref">
     <div class="d-flex align-items-center highlight-toolbar ps-3 pe-2 py-1 border-bottom">
-      <a class="font-monospace link-secondary link-underline-secondary link-underline-opacity-0 link-underline-opacity-100-hover small" href="{{ .Site.Params.repo }}/blob/v{{ .Site.Params.current_version }}/{{ $file | replaceRE `\\` "/" }}">
+      <div class="font-monospace link-secondary link-underline-secondary link-underline-opacity-0 link-underline-opacity-100-hover small">
         {{- $file -}}
-      </a>
+      </div>
       <div class="d-flex ms-auto">
         <button type="button" class="btn-clipboard mt-0 me-0" title="Copy to clipboard">
           <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="16" height="16">

docs/static/assets/js/color-modes.js

@@ -9,17 +9,19 @@
 
   const THEME = 'coreui-docs-theme'
 
-  const storedTheme = localStorage.getItem(THEME)
+  const getStoredTheme = () => localStorage.getItem(THEME)
+  const setStoredTheme = theme => localStorage.setItem(THEME, theme)
 
   const getPreferredTheme = () => {
+    const storedTheme = getStoredTheme()
     if (storedTheme) {
       return storedTheme
     }
 
     return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
   }
 
-  const setTheme = function (theme) {
+  const setTheme = theme => {
     if (theme === 'auto' && window.matchMedia('(prefers-color-scheme: dark)').matches) {
       document.documentElement.setAttribute('data-coreui-theme', 'dark')
     } else {
@@ -43,7 +45,8 @@
   }
 
   window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
-    if (storedTheme !== 'light' || storedTheme !== 'dark') {
+    const storedTheme = getStoredTheme()
+    if (storedTheme !== 'light' && storedTheme !== 'dark') {
       setTheme(getPreferredTheme())
     }
   })
@@ -55,7 +58,7 @@
       .forEach(toggle => {
         toggle.addEventListener('click', () => {
           const theme = toggle.getAttribute('data-coreui-theme-value')
-          localStorage.setItem(THEME, theme)
+          setStoredTheme(theme)
           setTheme(theme)
           showActiveTheme(theme)
         })