Light mode (thomiceli#38)

README.md

@@ -29,6 +29,7 @@ A self-hosted pastebin **powered by Git**. [Try it here](https://opengist.thomic
 * Download raw files or as a ZIP archive
 * OAuth2 login with GitHub and Gitea
 * Avatars via Gravatar or OAuth2 providers
+* Light/Dark mode
 * Responsive UI
 * Enable or disable signups
 * Restrict or unrestrict snippets visibility to anonymous users
@@ -39,7 +40,6 @@ A self-hosted pastebin **powered by Git**. [Try it here](https://opengist.thomic
 
 #### Todo
 
-- [ ] Light mode
 - [ ] Tests
 - [ ] Search for snippets
 - [ ] Embed snippets

package.json

@@ -19,6 +19,7 @@
  "autoprefixer": "^10.4.14",
  "codemirror": "^6.0.1",
  "cssnano": "^5.1.15",
+ "github-markdown-css": "^5.2.0",
  "highlight.js": "^11.7.0",
  "markdown-it": "^13.0.1",
  "moment": "^2.29.3",
@@ -27,6 +28,7 @@
  "postcss-cssnext": "^3.1.1",
  "postcss-import": "^15.1.0",
  "postcss-loader": "^7.1.0",
+ "sass": "^1.62.1",
  "sugarss": "^4.0.1",
  "tailwindcss": "^3.2.7",
  "vite": "^4.2.1"

public/admin.ts

@@ -25,7 +25,8 @@ const registerDomSetting = (el: HTMLElement) => {
  setSetting(el.id, el.dataset["bool"] === 'true' ? '1' : '0')
  .then(() => {
  el.classList.toggle("bg-primary-600");
- el.classList.toggle("bg-gray-400");
+ el.classList.toggle("dark:bg-gray-400");
+ el.classList.toggle("bg-gray-300");
  (el.childNodes.item(1) as HTMLElement).classList.toggle("translate-x-5");
  });
 };

public/hljs.scss

@@ -0,0 +1,9 @@
+:root {
+ @import "github-markdown-css/github-markdown-light";
+ @import 'highlight.js/scss/base16/one-light.scss';
+}
+
+.dark {
+ @import "github-markdown-css/github-markdown-dark";
+ @import 'highlight.js/scss/base16/onedark.scss';
+}

public/main.ts

@@ -1,13 +1,56 @@
-import 'highlight.js/styles/tokyo-night-dark.css';
 import './style.css';
-import './markdown.css';
+import './hljs.scss';
 import './favicon.svg';
 import './default.png';
 import moment from 'moment';
 import md from 'markdown-it';
 import hljs from 'highlight.js';
 
 document.addEventListener('DOMContentLoaded', () => {
+
+ const themeMenu = document.getElementById('theme-menu')!;
+
+ const checkTheme = () => {
+ if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
+ document.documentElement.classList.add('dark')
+ } else {
+ document.documentElement.classList.remove('dark')
+ }
+ }
+
+ checkTheme()
+
+ window.matchMedia('(prefers-color-scheme: dark)')
+ .addEventListener('change',({ matches }) => {
+ checkTheme()
+ }
+ )
+
+ document.getElementById('light-mode')!.onclick = (e) => {
+ e.stopPropagation()
+ localStorage.theme = 'light';
+ themeMenu.classList.toggle('hidden');
+ checkTheme()
+ }
+
+ document.getElementById('dark-mode')!.onclick = (e) => {
+ e.stopPropagation()
+ localStorage.theme = 'dark';
+ themeMenu.classList.toggle('hidden');
+ checkTheme()
+ }
+
+ document.getElementById('system-mode')!.onclick = (e) => {
+ e.stopPropagation()
+ localStorage.removeItem('theme');
+ themeMenu.classList.toggle('hidden');
+ checkTheme();
+ }
+
+ document.getElementById('theme-btn')!.onclick = (e) => {
+ themeMenu.classList.toggle('hidden');
+ }
+
  document.querySelectorAll('.moment-timestamp').forEach((e: HTMLElement) => {
  e.title = moment.unix(parseInt(e.innerHTML)).format('LLLL');
  e.innerHTML = moment.unix(parseInt(e.innerHTML)).fromNow();
@@ -37,8 +80,6 @@ document.addEventListener('DOMContentLoaded', () => {
  highlight: function (str, lang) {
  if (lang && hljs.getLanguage(lang)) {
  try {
- console.log(str)
- console.log(hljs.highlight(str, {language: lang, ignoreIllegals: false}, false));
  return '<pre class="hljs"><code>' +
  hljs.highlight(str, { language: lang, ignoreIllegals: true }).value +
  '</code></pre>';