If you like it please review lets get this everywhere! For feedback please contact me with information about your problem at www.linkedin.com/in/ameer-jamal or raise a github issue here : https://github.com/Ameer-Jamal/ChatGpt-Material-Dark
and ill be happy to fix any arising issues. Note:
- Make sure chatGPT General Theme settings is set to dark for best results
- I prioritize High Customizability with this theme, check the theme settings (how to access below) to change colors to your liking
Transform your ChatGPT experience with a sleek material dark theme. This theme provides a visually pleasing dark mode with improved readability, ensuring a more comfortable and immersive user experience during extended chat sessions.
-
2.0 update!! : Im trying to do LOTS of color customization in stylus settings (see how to access below) so you can make GPT look as you want Also:
-
Fixing many color issues
-
using better calibrated screen for better colors showing on devices
-
themed settings
-
better hover effects
-
themed menus
-
bug fixes in theme
-
NEW customizable feature for adjusting the maximum height of the User Text Input Bar directly from the Stylus settings, enhancing your reading experience for composing and reviewing larger questions.
-
NEW Remove Team subscription Advertising in Chat History Option from stylus settings (On By default)
-
NEW: GPT WIDE MODE! allow chats to be wide great for programmers that like bigger code blocks (details below)
- Added the ability select your own input and output text colors (details below)
- A deep and consistent dark color scheme inspired by material design.
- Better Selection Highlighting with HighContrast
- User input and GPT output now are different colors for easier on the eyes reading and also faster distinguishing between input and output
- Better Code Syntax Highlight within text to function like Slack's embedded orange code ( when code written out of code-box)
- Strong white headings on silver easy on the eyes main text for GPT output
- Border + Color separation in chat between GPT and user to allow for easier to see differentiation of question and answer
- Better Code Box!
- VS Code Dark+ Code Background
- FIRA CODE Font
- Better letter spacing
- Top Code Bar language highlight
- Font smoothed/Antialiased (for low resolution displays)
- Better horizontal scroll bar visibility
- Clearer thicker scroll Bars for better navigation horizontally and vertically
- Better Alert Colors
- Enhanced code sections with improved background and text contrast.
- Integration with popular Google Fonts for enhanced readability.
Enhance your ChatGPT experience with these initial steps:
- Add UserStyle: Install the "ChatGpt Material Dark With Wide Mode Option" UserStyle using Stylus or a similar supported browser extension. Make sure to navigate to ChatGPT post-installation.
- Enable Dark Mode: Switch to GPT Dark mode to prevent any style conflicts by:
- On https://chat.openai.com/ after logging in
- Click your username at the bottom left corner.
- Navigate to Settings > General.
- Click on the Theme and select Dark.
Tailor your ChatGPT interface effortlessly:
- Open Stylus Plugin: Click the Stylus extension icon on your browser's toolbar.
- Find the Theme: Search for "ChatGPT Material Dark" in your UserStyles list.
- Customize Colors 🌈 & Activate Wide Mode 🖥️: Utilize the gear icon next to the theme for customization. Here, you can alter the text colors and toggle the GPT WIDE MODE for an expanded chat interface, ideal for larger code blocks or extensive text.
This setup is compatible with various extensions and features, enhancing your ChatGPT experience:
- ChatGPT Chat Organizer
- Dark Reader
- Suitable for ChatGPT Plus Subscription users.